jQuery中的DOM操作

最新推荐文章于 2024-07-30 23:43:41 发布

原创最新推荐文章于 2024-07-30 23:43:41 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #DOM

本文详细介绍jQuery中样式和DOM操作的方法，包括设置和获取CSS属性、添加、删除及切换类，以及各种DOM操作如插入、删除、替换节点等实用技巧。

设置单个属性
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);
示例:

$("h2").mouseover(function() {
    if(!$("p").hasClass("content ")){
	$("p").addClass("content ");
	}
});
$("h2").mouseout(function() {
      if($("p").hasClass("content ")) {
	$("p").removeClass("content ");
    }
});

获取元素中的html代码
$(“div.left”).html();
设置元素中的html代码

$("div.left").html("<div class='content'>…</div>");

获取元素中的文本内容
$(“div.left”).text();
设置元素中的文本内容

$("div.left").text("<div class='content'>…</div>");

html( ) 和text( )方法的区别
html()设置可以包含文本和标签
text() 设置只能是文本
获取元素的value属性值
$(this).val();
设置元素的value属性值
$(this).val(value);
元素内部插入子节点
i.append(content)

$(A).append(B)表示将B追加到A中
如：$("ul").append($newNode1);

ii.prepend(content)

$(A). prepend (B)表示将B前置插入到A中
如：$("ul"). prepend ($newNode1);

元素外部插入同辈节点
after(content)

$(A).after (B)表示将B插入到A之后
如：$("ul").after($newNode1);

before(content)

$(A). before (B)表示将B插入至A之前
如：$("ul").before($newNode1);

删除节点
remove()：删除整个节点 $(selector).remove([expr]);
empty()：清空节点内容 $(selector).empty();
替换节点
replaceWith()
示例:

var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
$(".gameList li:eq(2)").replaceWith($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 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
jQuery 代码:
$("div").children()
结果:
[ <span>Hello Again</span> ]
描述:

在每个div中查找 .selected 的类。

HTML 代码:
<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
jQuery 代码:
$("div").children(".selected")
结果:
[ <p class="selected">Hello Again</p> ]

next([expr])返回后面那个紧邻的同辈元素
示例

描述:

找到每个段落的后面紧邻的同辈元素。

HTML 代码:
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
jQuery 代码:
$("p").next()
结果:
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]
描述:

找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
jQuery 代码:
$("p").next(".selected")
结果:
[ <p class="selected">Hello Again</p> ]