jQuery简化DOM操作

jQuery简化DOM操作

1.操作元素的属性

GET操作	jQ对象.attr(‘属性名’,‘属性值’);
SET操作	jQ对象.attr(‘属性名’,‘属性值’);
//多个属性时，可用对象形式参数   操作后，新属性值会替换掉原有属性值
移除操作	jQ对象.removeAttr(‘属性名’)

 

2.操作元素的内容

包含HTML标签的操作
GET操作	jQ对象.html( );               //取得第一个匹配元素的html内容
SET操作	jQ对象.html(“html内容”);   //参数可以为DOM对象，文档片段，jQ对象等
对元素内容进行操作
GET操作	jQ对象.text( );                 //取得所有的匹配元素的文本内容
SET操作	jQ对象.text(“文本内容”);

 

3.操作元素的值(表单元素的value属性)

GET操作	表单类型的jQ对象.val()         //获得匹配元素的value值
SET操作	表单类型的jQ对象.val(“值”)   //赋值操作

 

4.操作元素的样式

操作元素的的css

GET操作	jQ对象.css(‘css属性名’)               //返回第一个匹配到的元素的css样式
SET操作	jQ对象.css(‘css属性名’，‘属性值’)    //设置所有匹配元素的css样式
	jQ对象.css( {“属性”：“值”，…} )        //使用属性/值对方式一次更改多个

操作元素class更改样式

jQ对象.addClass(‘类名’)	向选中元素追加一个或多个类(添加多个使用空格分割类名)
jQ对象.removeClass(‘类名’)	从选中元素移除一个或多个类(不指定参数则删除所有类)
jQ对象.hasClass(‘类名’)	检查匹配元素中是否包含指定的class名
jQ对象.toggleClass('类名')	切换元素的指定类名, 有则删除，无则添加。

 

5.遍历元素

jQ对象.parent( );	匹配元素的父元素
jQ对象.children( “selector”)	在直接子元素中查找(没有参数选择器则返回所有直接子元素)
jQ对象.find(‘selector’)	在所有子元素中查找(没有参数选择器返回所有子元素)
jQ对象.next(‘selector’)	查找所有选中元素后一个兄弟元素（参数选择器可进行筛选）
jQ对象.nextAll(‘selector’)	查找所有选中元素后面所有的兄弟元素（参数选择器可进行筛选）
jQ对象.prev(‘selector’)	前一个兄弟元素
jQ对象.prevAll(‘selector’)	前面所有的兄弟元素
jQ对象.siblings(‘selector’)	返回选中元素的所有兄弟元素

迭代方法

JQ对象.each(function(index,elem))

对每个匹配元素执行参数中的回调函数（迭代）

6.添加元素

参数（追加的元素）可以为jQ对象、HTML片段、DOM对象等。

追加子元素
jQ对象.append(‘元素’)	//向每个选中元素末尾插入子元素
子元素.appendTo(‘父元素’)	将子元素插入到目标父元素的末尾
jQ对象.prepend(‘元素’)	将子元素追加为选中元素的第一个子元素
追加兄弟元素
jQ对象.after(“内容”)	在每个匹配到的元素后面插入内容（兄弟关系）
jQ对象.before	在每个匹配到的元素前面插入内容（兄弟关系）
删除并追加为目标兄弟元素(参数为已有元素时将被从原位置移走)
jQ对象.insertAfter(‘元素’)	向目标元素后面插入兄弟元素(参数为已有元素或HTML标签)
jQ对象.insertBefore(‘元素’)	向目标元素前面插入兄弟元素(参数为已有元素或HTML标签)

 

7.删除元素

jQ对象.remove( );	删除当前选中的元素
jQ对象.empty( );	清空当前选定元素的内容
jQ对象.html(“”)

 

8.替换元素

参数可以为jQ对象/DOM对象/$(‘选择器’)；

$('新元素').replaceAll(‘旧元素’)	用新元素替换每个匹配到的元素//并返回新元素
$('旧元素').replaceWith(‘新元素’)	将匹配到的元素替换为新元素  //并返回旧元素

 

9.克隆元素(创建副本)

jQ对象.clone(是否复制事件)

创建一个目标元素副本（包含子节点、文本及属性）

 

 

 

使用jQuery读取元素HTML5的扩展属性：

<li data-car-type="lt30">            $('li').data('car-type');          //读取 $('li').data('car-type', 'lt300');   //设置