1.jQuery中的DOM操作
jQuery对JavaScript中的DOM操作进行了封装
2.设置和获取样式值
1.使用css()为指定的元素设置样式值或获取样式值
$(this).css("border","5px solid #f5f5f5");
或
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});
//opacity设置透明度
2.addClass() 追加样式
$("h2").mouseover(function() {
$("p").addClass("content border");
});
3.remove()移除加样式
$("h2").mouseout(function() {
$("p").removeClass("text content");
});
4.toggleClass()切换样式
模拟addClass()与removeClass()实现样式切换过程
$("h2").click(function() {
$("p").toggleClass("content border");
});
5.hasClass()判断是否包含指定样式
$("h2").mouseover(function() {
if(!$("p").hasClass("content ")){
$("p").addClass("content ");
}
});
3.HTML代码操作
html()可以对HTML代码进行操作，类似于JS中的innerHTML
$("div.left").html();
或
$("div.left").html("<div class=‘content‘>…</div>");
4.标签内容操作
text()可以获取或设置元素的文本内容
html()用于获取第一个匹配元素的HTML内容或文本内容
$("div.left").text();
或
$("div.left").text("<div class=‘content‘>…</div>");
5.属性值操作
val()可以获取或设置元素的value属性值
$(this).val(); 或
$(this).val(value);
6.创建节点函数
工厂函数$()用于获取或创建节点
$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点
var $newNode=$("<li></li>");
var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
var $newNode2=$("<li title=‘last‘>北京申办冬奥会是再合适不过了！</li>");
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");