学习总结

​​​​​​jQuery中的DOM操作

jQuery对JavaScript中的DOM操作进行了封装

jQuery中的DOM操作

1. 样式操作
2. 内容及Value值操作
3. 节点操作
4. 节点属性操作
5. 节点遍历

 

1.样式操作

 

• 设置单个属性

css(name,value) ;

• 同时设置多个属性

css({name:value, name:value,name:value…}) ;

• 获取属性值

css(name)

• 追加样式

$(selector).addClass(class);

或   $(selector).addClass(class1 class2 … classN);

• 移除样式

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

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

• 切换样式

$(selector).toggleClass(class) ;

• 判断是否含指定的样式

$(selector). hasClass(class);

 

2.内容及Value值操作

HTML代码操作

标签内容操作

属性值操作

• 获取元素中的html代码

$("div.left").html();

• 设置元素中的html代码

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

1. 标签内容操作

• 获取元素中的文本内容

$("div.left").text();

• 设置元素中的文本内容

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

• html( ) 和text( )方法的区别

html()设置可以包含文本和标签

text() 设置只能是文本

1. 属性值操作

• 获取元素的value属性值

$(this).val();

• 设置元素的value属性值

$(this).val(value);

 

3.节点操作

jQuery中节点操作

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

创建节点

插入节点

删除节点

替换节点

复制节点

• 元素内部插入子节点

1. append(content)

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

1. prepend(content)

$(A). prepend (B)表示将B前置插入到A中

• 元素外部插入同辈节点

after(content)

$(A).after (B)表示将B插入到A之后

before(content)

$(A). before (B)表示将B插入至A之前

 

• 删除节点

remove()：删除整个节点  $(selector).remove([expr]);

empty()：清空节点内容  $(selector).empty();

• 替换节点

replaceWith()

• clone()用于复制某个节点

$(selector).clone([includeEvents]) ;

参数ture或flase, true复制事件处理，flase时反之

 

4.属性操作

获取与设置元素属性

删除元素属性

 

attr()用来获取与设置元素属性

获取属性值

$(selector).attr([name]) ;

设置多个属性的值

$(selector).attr({[name1:value1]…[nameN:valueN]})

删除元素属性

removeAttr()用来删除元素的属性

语法:$(selector).removeAttr(name) ;

 

5.节点遍历

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> ]