一. jquery获取元素
1. 获取元素的属性,使用attr方法,语法:.attr('属性名')
2. 设置属性值,则使用attr('属性名','属性值')\
3. 获取元素的value值,多用于form控件,普通元素中没有。.val()\
4. 获取元素的文本内容,即标签内部的文本内容,它会过滤掉标签中的子标签。语法:.text()\
5. 获取元素的内部html信息,这个跟text()很像,但不过滤里面的html标签。语法:.html()\
二. jQuery的链式操作
jQuery链式操作就是最终选中网页元素以后,可以对它进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来。例:
$('div').find('h3').eq(2).html('Hello');
解开为:
$('div') //找到div元素
.find('h3') //选择其中的h3元素
.eq(2) //选择第3个h3元素
.html('Hello'); //将它的内容改为Hello
jQuery还提供了.end()方法,使得结果集可以后退一步:
.find('h3')
.eq(2)
.html('Hello')
**.end() //退回到选中所有的h3元素的那一步**
.eq(0) //选中第一个h3元素
.html('World'); //将它的内容改为World
三. jQuery创建元素
创建元素节点:
$("<div></div>")
创建为本节点:
$("<div>文本节点</div>")
创建为属性节点:
$("<div id='test' class='fang'>文本节点</div>")
四. jQuery移动元素
提供两组方法,来操作元素在网页中的位置移动。一组方法是直接移动该元素,另一组方法是移动其他元素,使得目标元素达到我们想要的位置。
1.使用.insertAfter(),把div元素移动p元素后面:
$('div').insertAfter($('p'));
1.使用.after(),把p元素加到div元素前面:
$('p').after($'div'));
二者差别在于第一种方法返回div元素,第二种方法返回p元素
五. jQuery修改元素属性
-
复制元素使用.clone()。
-
删除元素使用.remove()和.detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。
-
清空元素内容(但是不删除该元素)使用.empty()。
-
创建新元素的方法非常简单,只要把新元素直接传入jQuery的构造函数就行了:
$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');