1.jQuery中的DOM操作
jQuery对JavaScript中的DOM操作进行了封装
2.
使用css()为指定的元素设置样式值或获取样式值
addClass() 追加样式
$("h2").mouseover(function() {
$("p").addClass("content border");
});
remove()移除加样式
$("h2").mouseout(function() {
$("p").removeClass("text content"); });
toggleClass()
模拟addClass()与removeClass()实现样式切换过程
$("h2").click(function() {
$("p").toggleClass("content border");
});
3.HTML代码操作
html()可以对HTML代码进行操作,类似于JS中的innerHTML
4.text()可以获取或设置元素的文本内容
html()用于获取第一个匹配元素的HTML内容或文本内容
5.
val()可以获取或设置元素的value属性值
6.工厂函数$()用于获取或创建节点
$(selector):通过选择器获取节点
$(element):把DOM节点转化成jQuery节点
$(html):使用HTML字符串创建jQuery节点
7.删除节点
remove():删除整个节点
$(selector).remove([expr]);
empty():清空节点内容
$(selector).empty();
8.替换节点
replaceWith()和replaceAll()用于替换某个节点
var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);
$($newNode1).replaceAll(".gameList li:eq(2)");
9.复制节点
clone()用于复制某个节点
$(".gameList li:eq(1)").click(function(){
$(this).clone(true).appendTo(".gameList");
})
$(".gameList li:eq(2)").click(function(){
$(this).clone(false).appendTo(".gameList");
})
10
attr()用来获取与设置元素属性
$(".contain img").attr({width:"200",height:"80"});
removeAttr()用来删除元素的属性
$(".contain img").removeAttr("alt");