1.2jQuery中的DOM操作
jQuery对JavaScript中的DOM操作进行了封装
jQuery中的DOM操作
样式操作
内容及Value值操作
节点操作
节点属性操作
节点遍历
设置单个属性
css(name,value) ;
或
同时设置多个属性
css({name:value, name:value,name:value…}) ;
示例;$(this).css(“border”,“5px solid #f5f5f5”);
或
$(this).css({“border”:“5px solid #f5f5f5”,“opacity”:“0.5”});
获取属性值
css(name)
追加样式
$(selector).addClass(class);
或 $(selector).addClass(class1 class2 … classN);
示例:
$(“h2”).mouseover(function() {
$(“p”).addClass(“content border”);
});
移除样式
$(selector).removeClass(“class”) ;
或 $(selector).removeClass("class1 class2 … classN ") ;
示例:
$(“h2”).mouseout(function() {
$(“p”).removeClass(“text content”);
});
切换样式
toggleClass()
模拟了addClass()与removeClass()实现样式切换的过程
语法:
$(selector).toggleClass(class) ;
示例:
$(“h2”).click(function() {
$(“p”).toggleClass(“content border”);
});
判断是否含指定的样式
hasClass( )方法来判断是否包含指定的样式
语法:
$(selector). hasClass(class);
示例:
KaTeX parse error: Expected '}', got 'EOF' at end of input: …on() { if(!(“p”).hasClass("content ")){
$(“p”).addClass("content ");
}
});
KaTeX parse error: Expected '}', got 'EOF' at end of input: …n() { if((“p”).hasClass("content ")) {
$(“p”).removeClass("content ");
}
});
内容操作
HTML代码操作
标签内容操作
属性值操作
获取元素中的html代码
$(“div.left”).html();
设置元素中的html代码
$(“div.left”).html("
标签内容操作
获取元素中的文本内容
$(“div.left”).text();
设置元素中的文本内容
$(“div.left”).text("
html( ) 和text( )方法的区别
html()设置可以包含文本和标签
text() 设置只能是文本
属性值操作
获取元素的value属性值
$(this).val();
设置元素的value属性值
$(this).val(value);
节点操作
jQuery中节点操作
查找节点(前面章节已讲)
创建节点
插入节点
删除节点
替换节点
复制节点
插入节点
元素内部插入子节点
i.append(content)
(“ul”).append($newNode1);
ii.prepend(content)
(“ul”). prepend ($newNode1);
元素外部插入同辈节点
after(content)
(“ul”).after($newNode1);
before(content)
(“ul”).before($newNode1);
删除节点
remove():删除整个节点 $(selector).remove([expr]);
empty():清空节点内容 $(selector).empty();
替换节点
replaceWith()
示例:
var
(“
newNode1);
clone()用于复制某个节点
$(selector).clone([includeEvents]) ;
参数ture或flase, true复制事件处理,flase时反之
属性操作
获取与设置元素属性
删除元素属性
attr()用来获取与设置元素属性
获取属性值
$(selector).attr([name]) ;
设置多个属性的值
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;
示例:
$(".contain img").attr({width:“200”,height:“80”});
删除元素属性
removeAttr()用来删除元素的属性
语法:$(selector).removeAttr(name) ;
示例 删除元素的alt属性
$(".contain img").removeAttr(“alt”);
节点遍历
children([expr]) 只考虑子元素而不考虑所有后代元素
示例
查找DIV中的每个子元素。
HTML 代码:
Hello
And Again
jQuery 代码: $("div").children() 结果: [ Hello Again ] 描述:在每个div中查找 .selected 的类。
HTML 代码:
Hello Again
And Again
Hello Again
]next([expr])返回后面那个紧邻的同辈元素
示例
描述:
找到每个段落的后面紧邻的同辈元素。
HTML 代码:
Hello
Hello Again
Hello Again
,找到每个段落的后面紧邻的同辈元素中类名为selected的元素。
HTML 代码:
Hello
Hello Again
Hello Again
]