DOM的操作

1.1、jq与js的区别：

get() 就是把jq转成原生的js

$('div').eq(2).html(); //调用jquery对象的方法

$('div').get(2).innerHTML; //调用dom的方法属性

oDiv.innerHTML = 'hello';  //赋值（js写法） alert( oDiv.innerHTML );  //取值（js写法） $('#div1').html('hello');  //赋值：赋给所有 （jq写法）

alert( $('#div1').html() ); //取值：不写参数，只能取第一个值（jq写法）

1.2、操作元素的样式

$('div').css('div');//获取宽度值

$('div').css('width','300');//设置宽度为300

$('div').css({'background':'red','font-size':'15'});//设置多个属性值（需逗号隔开）

$('div').addClass('one'); //为元素增加名称为box的class 

$('div'").removeClass('one'); //删除元素名称为box的class 

$('div').toggleClass('one'); //如果存在（不存在）就删除（添加）名称为box的class 

1.3、把新元素插入现有元素内（多为子元素)

.html() 获取集合中第一个匹配元素的HTML内容 设置每一个匹配元素的html内容。 $('.box').html();//获取box元素节点的html内容,当一组元素的时候，取值是一组中的第一个 $('.box').html('<b>new content</b>');//将“<b>new content</b>” 作为html串写入box元素节点中, 页面显示粗体的new content; 当一组元素的时候,赋值是一组中的所有元素

.text()

得到匹配元素集合中每个元素的合并文本，包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容 $('.box').text();//获取box元素节点的的文本内容。 $('.box').text('<b>new content</b>');//将“<b>new content</b>” 作为普通文本串写入box元素节点中, 页面显示<b>new content</b>

.append()与.appendTo()区别：后续操作不一样

父节点.append(子节点) 后续是对父节点操作 子节点.appendTo（父节点）后续是对子节点操作

.append()

在每个匹配元素里面的末尾处插入参数内容。 $('ul').append($li);//插入到里面的后面 .appendTo() 将匹配的元素插入到目标元素的最后面 $li.appendTo($('ul'));

.prepend()

将参数内容插入到每个匹配元素的前面（元素内部） $('ul').prepend($li);//插入到里面的前面

.prependTo()

将所有元素插入到目标前面（元素内）。 $li.prependTo($('ul'));

1.3、把新元素插入现有元素外（多为兄弟元素）

.after()

在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。 $('ul').after($li)//把li插入到ul后面作为兄弟节点

.insertAfter()

在目标元素后面插入集合中每个匹配的元素 注：与上面after()作用一样的只是写法不一样 $li.insertAfter($('ul')) .before() 根据参数设定，在匹配元素的前面插入内容 $('ul').before($li)//把li插入到ul前面作为兄弟节点 .insertBefore() 在目标元素前面插入集合中每个匹配的元素 注：与上面before()作用一样的只是写法不一样 $li.insertBefore($('ul')) 1.4、移除 $('li:eq(3)').empty() //清除第4个li的内容 $('li:eq(3)').remove() //删除第4个li节点（不保留这个节点的操作） $('#box').detach(); //删除id为box的节点，和remove（）一样可以删除节点，但是会保留这个节点的操作 1.5、替换 .replaceWith() $('div.second').replaceWith('<h2>New</h2>')//替换指定元素节点 .replaceAll() $('<h2>New</h2>').replaceAll('div.second'); 1.6、包裹 $('ul').wrapAll('<div></div>') //div包住ul $('li').wrapInner('<a    href="javascript:"></a>')//a包住li里面的内容  $('li').wrap('<b></b>') //用b标签分别包含所有的li 1.7、其他属性操作 $('li:eq(3)').clone() //复制第4个li节点。复制完一般要插入 $("em").attr("title","photo");//改变em的title属性值为photo $('div').has('p') //找包含有p标签的div $('div').find('b') //在div里面找所有的b标签 $('div').filter('.one')//查找类名为one的div $('div').not('.one')//过滤掉类名为one的div ，filter反义词 $('div').next() //找下一个兄弟节点  单个 $('div').prev()//找上一个兄弟节点 $('div').nextAll()//找下面所有的兄弟节点 $( 'div' ).prevAll() //找上面所有的兄弟节点 $('div').sibling()//找所有的兄弟节 $( 'div' ). even()//偶数（0，2，4... ...） $( 'div' ). odd()//奇数（1，3，5... ...） $( 'div' ). eq(2)//选择序号为2的div元素 $( 'div' ). gt(2)//选择序号大于2的所有元素（不包括自己） $( 'div' ). lt(2)//选择序号小于2的所有元素（不包括自己） $( 'div' ). contains(‘B’)//选择含有B的div

 5、集合处理功能 

对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。  包括两种形式：  .each $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})  //为索引分别为0，1，2的p元素分别设定不同的字体颜色。  $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})  //实现表格的隔行换色效果  $("p").click(function(){alert($(this).html())})  //为每个p元素增加了click事件，单击某个p元素则弹出其内容