Jquery-Dom和css操作

/** *              一 应用jQuery设置元素及内容 * *              1.如何获取/设置,元素中的HTML内容? *              2.如何获取/设置,元素中的文本内容? *              3.如何获取/设置,表单中的文本内容? * * */$(function(){    //获取html内容id=box    $('#box').html();    //设置html内容会覆盖掉原来的内容    $('#box').html('<em>新内容</em>');    //只获取文本内容,不包含html标签    $('#box').text();    //设置文本内容,标签会在html页面显示,股不应该设置    $('#box').text('<em>这是新的内容</em>');    //获取表单中的文本内容    $('input').val();    //设置表单的文本内容(value值)    $('input').val('表单中新的文本内容');    $('input').val();    //设置input中某些值被选中    $('input').val(['男','读书']);})/** *      二 应用jQuery操作元素属性 *   1.如何获取/设置,某个元素的属性值 *   2.如何获取/设置,某个元素的多个属性值 *   3.如何通匿名fn来设置某个元素属性值 *   4.如何删除元素指定的属性 * */$(function(){    //获取某个元素的属性的值    $('div').attr('id');    //设置某个元素属性的值    $('div').attr('title','我的title');    //设置多个属性的值    $('div').attr({'title':'我的title','class':'cla','date':'2015'});    //index标志当前设置的是哪一个div,value在设置之前的value值    $('div').attr('title',function(index,value){        return '我的title';    })    //删除属性    $('div').removeAttribute('title');})/** *        三  应用jQuery操作元素样式 *      1.如何获取/设置,某个元素内单个/多个css样式 *      2.如何通过fn来设置元素css样式 *      3.如何给元素添加单个/多个css类 *      4.如何删除某个元素单个/多个css类 *      5.如何切换默认样式和制定的样式? *      6.如何通过fn设置切换规则 */$(function(){    //获得css样式的值    $('div').css('color');    //设置css样式的值jQuery设置比默认的高    $('div').css('color','green');    //获得原生的对象的值    var box=$('div').css(['width','color','height']);    //利用javaScript的方式获取得到的值    for(var i in box){        alert(i+':'+box[i])    }    //利用jQuery的方式得到多个属性的值    $.each(box,function (attr, value) {        alert(attr+':'+value);    })    //用来迭代对象    $('div').each(function (index,element) {        alert(index+':'+element);    });    //使用连缀的方式进行多个样式的书写    $('div').css('color','gray').css('width','300px');    //利用集合的方式    $('div').css({'color':'blue',    'width' : '200px',     'height' :'300px'        }    );    //通过计算的方式进行叠加,index是当前div的下标,value是当前的div,width属性的原始值    $('div').css('width',function (index,value) {        return parseInt(value)+200+'px';    });})/** *          四 应用jQuery操作元素样式 * *          1.如何获取/设置,某个元素行内单个/多个css样式 *          2.如何通过fn来设置元素css类 *          3.如何给元素添加单个/多个css类 *          4.如何删除某个元素的单个/多个css类 *          5.如何切换默认样式和指定的样式 *          6.如何通过fn设置切换规则 **/$(function(){    //添加class    $('div').addClass('red');    //添加多个class    $('div').addClass('red bg');    //删除class    $('div').removeClass('red');    //删除多个class    $('div').removeClass('red bg');    $('div').click(function(){        //当点击时添加class        $('div').addclass('red');        //第一次点击切换为red再次点击切换为默认的颜色        //$('div').toggleClass('red');        if ($('div').hasClass('blue')){            //$('div').removeClass('blue');            //$('div').addClass('red');            //另一种(链式)写法            $('div').removeClass('red').addClass('blue');        }else {            $('div').removeClass('red');            $('div').addClass('blue');        }    })})/** *          五 jQuery中css方法应用 *   1.如何获取/设置元素的宽度 *   2.如何通过fn获取/设置元素的宽度 *   3.如何获取/设置元素长度 *   4.如何通过fn获取/设置元素长度 * *   5.如何获得元素,包含内边距的边框,高度? *   6.如何获得元素,包含边框,内边距的边框,高度? *   7.如何获得元素,包含边框,内边,外边距距的边框,高度? * *   8.如何获得某个元素相对于可视窗口的位置偏移量? *   9.如何获得某个元素对父元素的偏移量 *   10.如何获得/设置,垂直滚动条的值 * */$(function(){    //得到div的宽度    $('div').css('width');//返回的string    $('div').width();//返回的是int对象    //可以智能的该边单位等300pt    $('div').width('300px');    $('div').width(function (index,value) {        return value+200+'px';    });    $('div').height('400');    $('div').height(function (index,value) {        return value+300;    });    $('div').innerWidth();    $('div').outerWidth();    //距离可视边框的偏移量    $('div').offset().left;    $('div').offset().top;    //    $(window).scrollTop();//获得滚动条相对没有偏移时的偏移量    $(window).scrollTop(300);//进行定位})/** * *          六 应用jQuery创建节点 * *          1.创建节点 *          2.插入节点 */$(function(){    //给div追加新的内容(方式1)    var box=$('<strong>新的内容</strong>');    $('div').append(box);    //给div追加新的内容(方式2)(下标,旧内容)    $('div').append(function(index,html){        return '<strong>新的内容</strong>';    })    //将已有的strong内容添加到div中去    $('strong').appendTo('div');    //在div前面进行添加(方式一)    $('div').prepend('<strong>添加到前面</strong>');    //在div前面进行添加(方式二)参数同上    $('div').prepend(function (index, html) {        return '<strong>添加到前面</strong>';    })    //将已有的strong内的内容移动到div的前面    $('strong').prependTo('div');    //将strong内容添加到div后面(兄弟)    $('div').after('<strong>后面的内容</strong>');    $('div').after(function (index,html) {        return '<strong>后面的内容</strong>';    });    $('div').before('<strong>前面的内容</strong>');    $('div').before(function (index, html) {        return '<strong>前面的内容</strong>';    });    $('strong').insertAfter('div');    $('strong').insertBefore('div');})/** *      七 应用jQuery节点操作 *      1.包裹节点操作 *      2.节点替换,克隆,删除操作 */$(function(){    //外部节点包裹    $('div').wrap('<strong></strong>');    //div方法abc的后面    $('div').wrap('<strong>abc</strong>');    //多层包裹    $('div').wrap('<strong><em></em></strong>');    //移除单层包裹当多层时有几层就要调用几次    $('div').unwrap();    //对div进行整体包裹    $('div').wrapAll();    //内部节点包裹    $('div').wrapInner('<strong></strong>');    //将div克隆,并添加到body总    $('div').clone().appendTo('body');    $('div').click(function (){        alert('123');    }    )    $('div').clone(true).appendTo('body');    })