2024年最新轻松学习jQuery控制DOM_jquery平滑显示指定dom(2)，怒肝三个月啃完这110道面试题

最新推荐文章于 2024-07-27 10:13:06 发布

2401_84181253

最新推荐文章于 2024-07-27 10:13:06 发布

阅读量644

点赞数 24

分类专栏：程序员文章标签：大数据面试学习

本文链接：https://blog.csdn.net/2401_84181253/article/details/138850167

版权

程序员专栏收录该内容

172 篇文章 0 订阅

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

	<title></title>
	<script src="js/jQuery-3.6.1.js"></script>

</head>
<body>
	<img src="img/wzx.jpg" width="500px"/>
</body>
<script>

$(function(){
//点击图片，设置新的src属性值
$(‘img’).click(function(){
$(‘img’).attr(‘src’,‘img/lyf.jpg’);
})
});


运行效果：


![在这里插入图片描述](https://img-blog.csdnimg.cn/174345f4bb6d4ec794230cec70cdae0d.gif#pic_center)  
   有的时候对于某些元素，希望可以同时设置它的很多不同属性，如果采用上面的方法则需要一个各地设置属性，十分麻烦。然而jQuery很人性化，attr()还提供了一个进行列表设置的attr(properties)方法，利用该方法可以同时设置多个属性。


案例：点击图片，设置多个属性：src属性值、title属性、width属性。


代码如下：

</head>
<body>
	<!-- <button>删除src属性</button> -->
	<img src="img/wzx.jpg" width="500px" title="女神王祖贤"/>
</body>
<script>

$(function(){
//点击图片，设置多个属性：src属性值、title属性、width属性
$(‘img’).click(function(){
$(‘img’).attr({
‘src’:‘img/lyf.jpg’,
‘title’:‘女神刘亦菲’,
‘width’:‘400px’
});
})
});


运行效果：


![在这里插入图片描述](https://img-blog.csdnimg.cn/a7851cc9c55f4522b5318c8ac5a71c5d.gif#pic_center)


#### 删除属性


  当设置某个元素的属性的值时，可以通过removeAttr(name)方法将该属性的值删除。


案例：点击图片，删除src属性值


代码如下：

</head>
<body>
	<img src="img/wzx.jpg" width="500px" title="女神王祖贤"/>
</body>
<script>

$(function(){
//点击图片，删除src属性值
$(‘img’).click(function(){
$(‘img’).removeAttr(‘src’);
})
});


运行效果：


![在这里插入图片描述](https://img-blog.csdnimg.cn/9bc930ada2a140d3bfd41e966003a0a9.gif#pic_center)


### 页面元素


![在这里插入图片描述](https://img-blog.csdnimg.cn/d9e0c72782254598a86a941dae8d50df.png)


  对于页面的元素，在DOM编程中可以通过各种查询、修改手段进行管理，但在喝多时候都非常麻烦。jQuery提供了一整套方法来处理页面中的元素，包括元素复制、移动、替换等。


#### 直接获取和编辑内容


  在jQuery中，主要是通过html()和text()两个方法来获取和编辑页面内容的。


  其中html()相当于获取节点的innerHTML属性；添加参数时（即方法为html(text)时），则为设置innerHTML。而方法为text()则相当于获取元素的纯文本，text(content)为设置纯文本。


  这两个方法 有时候会搭配使用，text()通常用来过滤页面中的标记，而html(text)用来设置节点中的innerHTML。


获取内容案例：

内容操作

段落标签1
段落标签2

var result2 =$(‘div’).text();
console.log(result2);
});


运行效果：


![在这里插入图片描述](https://img-blog.csdnimg.cn/9ebdedc2a4614ae2820e7f3093835041.png)  
 编辑内容案例：

内容操作


运行效果：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d673eef0b60d4b7dae0f1f5f88d831a8.png)


#### 添加元素


  在普通的DOM中，如果希望在某个元素的后面添加一个元素，通常会使用父元素的appendChild()或者insertBefore()，且在很多时候需要反复寻找节点的位置，这十分麻烦。jQuery中提供了append、appendTo、prepend和prependTo方法添加新元素；也提供了after、insertAfter、before和insertBefore方法插入新元素。下面我将通过案例代码的方式一一为您介绍方法的应用。


**1、通过 *父子关系* 添加新元素**


**【1】 
 
 
 
 
 a 
 
 
 p 
 
 
 p 
 
 
 e 
 
 
 n 
 
 
 d 
 
 
 ( 
 
 
 ) 
 
 
 
 append() 
 
 
 append()方法**

$(‘ul’).append(‘

jQuery中创建的元素节点
’);
```
语法说明：找到父元素ul，然后通过父元素ul去添加新元素li到最后位置;


案例代码：
```
节点操作
```
**【2】 
 
 
 
 
 a 
 
 
 p 
 
 
 p 
 
 
 e 
 
 
 n 
 
 
 d 
 
 
 T 
 
 
 o 
 
 
 ( 
 
 
 ) 
 
 
 
 appendTo() 
 
 
 appendTo()方法**
```
$(^{'} < l i > j Q u ery 中创建的元素节点 < / l i >^{'}) . a pp e n d T o ($ (‘ul’));
```
语法说明：创建新元素li，然后将新元素li追加到ul父元素中的最后位置；


案例代码：
```
节点操作
```
以上两种方法的运行效果是一样的，都是将新元素添加到最后位置：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d79f9ab1d38846c896269ed5bbe64735.png)  
 **【3】 
 
 
 
 
 p 
 
 
 r 
 
 
 e 
 
 
 p 
 
 
 e 
 
 
 n 
 
 
 d 
 
 
 ( 
 
 
 ) 
 
 
 
 prepend() 
 
 
 prepend()方法**
```
$(‘ul’).prepend(‘
jQuery中创建的元素节点
’);
```
语法说明：找到父元素ul，然后通过父元素ul去添加新元素li到第一个位置;


案例代码：
```
节点操作
```
**【4】 
 
 
 
 
 p 
 
 
 r 
 
 
 e 
 
 
 p 
 
 
 e 
 
 
 n 
 
 
 d 
 
 
 T 
 
 
 o 
 
 
 ( 
 
 
 ) 
 
 
 
 prependTo() 
 
 
 prependTo()方法**
```
$(^{'} < l i > j Q u ery 中创建的元素节点 < / l i >^{'}) . p re p e n d T o ($ (‘ul’));
```
语法说明：创建新元素li，然后将新元素li追加到ul父元素中的最后位置；


案例代码：
```
节点操作
```
以上两种方法的运行效果是一样的，都是将新元素添加到第一个位置：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/b669e7a86c8e4502a9a0306b9615aa79.png)  
 以上四种方法是通过父元素和子元素的关系，给父元素ul添加li；


**2、通过 *兄弟关系* 插入新元素**


下面将有四种方法是通过子元素li之间的关系来插入新的li。


**【1】 
 
 
 
 
 a 
 
 
 f 
 
 
 t 
 
 
 e 
 
 
 r 
 
 
 ( 
 
 
 ) 
 
 
 
 after() 
 
 
 after()方法**
```
$(‘.li1’).after(‘
我是用after方法新创建的li标签
’);
```
语法说明：找到某个兄弟元素li，然后通过兄弟元素li去插入新元素li到兄弟元素的后面;


案例代码：
```
节点操作
```
运行效果：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8c3861165c944364b10aadf10d1caddd.png)


**【2】 
 
 
 
 
 i 
 
 
 n 
 
 
 s 
 
 
 e 
 
 
 r 
 
 
 t 
 
 
 A 
 
 
 f 
 
 
 t 
 
 
 e 
 
 
 r 
 
 
 ( 
 
 
 ) 
 
 
 
 insertAfter() 
 
 
 insertAfter()方法**
```
$(^{'} < l i > 我是用 in ser t A f t er 方法新创建的 l i 标签 < / l i >^{'}) . in ser t A f t er ($ (‘.li1’));
```
语法说明：创建新元素li，然后将新元素li插入到指定兄弟元素li的后面；


案例代码：
```
节点操作
```
运行效果：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/4241c211b9674f5fad74e0fa07a768a7.png)  
 **【3】 
 
 
 
 
 b 
 
 
 e 
 
 
 f 
 
 
 o 
 
 
 r 
 
 
 e 
 
 
 ( 
 
 
 ) 
 
 
 
 before() 
 
 
 before()方法**
```
$(‘.li2’).before(‘
我是用before方法新创建的li标签

’);


语法说明：找到某个兄弟元素li，然后通过指定兄弟元素li去插入新元素li到兄弟元素的前面;


案例代码：

节点操作

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

fa07a768a7.png)
**【3】

(

)

before()

before()方法**

$('.li2').before('<li>我是用before方法新创建的li标签</li>');

语法说明：找到某个兄弟元素li，然后通过指定兄弟元素li去插入新元素li到兄弟元素的前面;

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>节点操作</title>
		<script src="js/jQuery-3.6.1.js"></script>
	</head>


[外链图片转存中...(img-RK8bCVwP-1715662316276)]
[外链图片转存中...(img-8BqUjkQ7-1715662316277)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

2401_84181253

关注

24
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
2024年最新轻松学习jQuery控制DOM_jquery平滑显示指定dom(2)，怒肝三个月啃完这110道面试题

语法说明：找到某个兄弟元素li，然后通过指定兄弟元素li去插入新元素li到兄弟元素的前面;//点击图片，设置多个属性：src属性值、title属性、width属性。//点击图片，设置新的src属性值。‘title’:‘女神刘亦菲’,//点击图片，删除src属性值。before()方法**
复制链接

扫一扫