第四章第三天初识JQuery操作DOM

最新推荐文章于 2022-07-04 17:19:59 发布

qq_40115919

最新推荐文章于 2022-07-04 17:19:59 发布

阅读量138

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_40115919/article/details/82120087

博客介绍了DOM操作分类，包括DOM Core、HTML - DOM、CSS - DOM。重点阐述了jQuery中的DOM操作，涵盖样式操作、内容操作、属性值操作、节点操作和节点遍历等，详细说明了各操作的方法、语法及示例，如css()、html()、append()等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM操作分类

DOM操作分为三类：

DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
HTML-DOM：用于处理HTML文档，如document.forms
CSS-DOM：用于操作CSS，如element.style.color="green"

jQuery中的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：选择器（你要改变的地址）h1，div，自己设的类名(clss,id)等

$(selector).addClass(class);

或 $(selector).addClass("class1 class2 … classN");//多个样式之间是空格

示例:

$("h2").mouseover(function() {

$("p").addClass("class1 class2 ");

});

移除样式

$(selector).removeClass("class") ;

或 $(selector).removeClass("class1 class2 … classN ") ;

示例:

$("h2").mouseout(function() {

$("p").removeClass("class1 class2 ");

});

切换样式

toggleClass()

模拟了addClass()与removeClass()实现样式切换的过程

语法:

$(selector).toggleClass(class) ;

示例:

$("h2").click(function() {

$("p").toggleClass("content border");

});

判断是否含指定的样式

hasClass( )方法来判断是否包含指定的样式

语法:

$(selector). hasClass(class);

示例:

$("h2").mouseover(function() {

if(!$("p").hasClass("class ")){

$("p").addClass("class ");

}

});

$("h2").mouseout(function() {

if($("p").hasClass("class ")) {

$("p").removeClass("class ");

}

});

内容操作

HTML代码操作

标签内容操作

属性值操作

获取元素中的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);

节点操作

jQuery中节点操作

查找节点（前面章节已讲）

创建节点

插入节点

删除节点

替换节点

复制节点

创建节点

var uu="<ul><li>美女</li></ul>";
$("#love").html(uu);

元素内部插入子节点

append(content)

$(A).append(B)表示将B追加到A中

如：$("ul").append($newNode1);

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]) 只考虑子元素而不考虑所有后代元素

each

示例

查找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>, ]

描述:

找到每个段落的后面紧邻的同辈元素中类名为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> ]