jQuery学习笔记（1）-DOM 操作

2022-07-11 18:13:37

1.元素属性操作

通过attr()获取和设置元素的属性，removeAttr()方法删除指定属性

eg:

1 <body>
2     <<img alt="" title="this is a image"
3         src="images/01.jpg" />
4     <div id="divAlt">
5     </div>
6 <body>

我们编写如下jQuery代码在divAlt中写入 img 的 src属性：

1 var strAlt = $("img").attr("scr");
2 $("#divAlt").html(strAlt);

修改img 的 src 属性:

1 $("img").attr("src", "images/img02.jpg");

删除 img 的 src 属性：

1 $("img").removeAttr("src");

attr()方法还可以绑定一个 function() 函数，用函数的返回值作为元素的属性值:

1 attr(key, function(index));

*补充说一点：

在jQuery1.9+以后，具有true, false两个属性使用prop();其它则使用attr()

2.获取和设置元素

在jQuery中操作元素内容的方法包括html() 和 text()

关于 html() 和 text() 的区别如下表：

html() 和 text()方法区别
语法格式	参数说明	功能描述
html()	无	用户获取元素的HTML内容
html(val)	val 参数为元素的HTML内容	用户设置元素的 HTML内容
text()	无	用户获取元素的文本内容
text(val)	val 参数为元素的文本内容	用于设置元素的文本内容

可能看了这个还是不太明白两者的区别，再来看下面的例子：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(function() {
 7             var strHTML = $("#divShow").html();
 8             var strText = $("#divShow").text();
 9             $("#divHTML").html(strHTML);
10             $("#divText").text(strText);
11         })
12     </script>
13 </head>
14 <body>
15     <div id="divShow">
16         <b><i>Write Less Do More</i></b>
17     </div>
18     <div id="divHTML"></div>
19     <div id="divText"></div>
20 </body>
21 </html>

在浏览器中的显示如下图：

可以看到 html() 方法有加粗和斜体效果，而 text() 没有这些效果，在Chrome中调试，我们发现

1 var strHTML = $("#divShow").html();

得到的是：

1 <b><i>Write Less Do More</i></b>

而 1 var strText = $("#divShow").text(); 得到的仅仅是 1 Write Less Do More

这说明 text() 方法是去除了 html 标签，仅仅获取标签里面的内容，而 html() 方法是获取标签里的html()

3.元素样式操作

在jQuery中，操作元素样式有如下方法：

css(name, value)
addClass(class)
toggleClass(class)
removeClass([class])

首先来看看 css() 方法的使用

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(function() {
 7             $("p").click(function() {
 8                 $(this).css("font-weight", "bold");
 9                 $(this).css("font-style", "italic");
10                 $(this).css("background-color", "#cde");
11             });
12         })
13     </script>
14 </head>
15 <body>
16     <p>Write Less Do More</p>
17 </html>

开始截图如下：

点击之后效果截图如下：

也可以使用 addClass() 方法

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
 5     <style type="text/css">
 6         .cls1 {font-weight: bold; font-style: italic}
 7         .cls2 {border:solid 1px #eee; background-color: #cde}
 8     </style>
 9     <script type="text/javascript">
10         $(function() {
11             $("p").click(function() {
12                 $(this).addClass(‘cls1 cls2‘);
13             });
14         })
15 
16     </script>
17 </head>
18 <body>
19     <p>Write Less Do More</p>
20 </html>

点击段落后截图如下：

需要补充一点的是，addClass() 并不是覆盖原来的 class，仅仅是添加 class

toggle 是切换的意思， toggleClass() 方法用于 css 样式的切换，讲上面代码的 addClass 改成 toggleClass之后，通过点击就可以在原样式和新样式直接切换

要删除某一样式可以通过 removeClass() 方法实现，多个样式之间用空格隔开

eg:

　　 1 $("p").removeClass("cls0 cls1");

4.页面元素操作

当要增加某个元素，首先找到该元素的上级节点，然后用 $(html) 来创建节点元素，最后添加到该节点。

例如给 body 添加一个 div

1 var $new_div = $("<div title=‘jQuery‘>Write Less Do More</div>");
2 $("body").append($new_div);

插入内部节点的方法：

语法格式	功能描述
append(content)	向所选择的元素内部插入内容
append(function(index, html))	function 返回值追加到目标内容
appendTo(content)	把所选的元素追加到另一个指定的元素集合中
prepend(content)	向目标前置内容
prepend(function(index, html))	前置插入function返回值
prependTo(content)	把所选的元素前置插入到另一个指定的元素集合中

appendTo() 方法举例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(function() {
 7             $("p").appendTo($("span"));
 8         })
 9 
10     </script>
11 </head>
12 <body>
13     <p>Write Less Do More</p>
14     <span><p>Hello</p></span>
15 </html>

在Chrome中查看代码结构如下：

可以发现 appendTo() 是讲 p 标签都移到了 span 标签内部

外部节点插入：

语法格式	功能描述
after(content)	外部后面插入内容
after(function())	外部后面插入函数返回值
befort(content)	外部前面插入内容
before(function())	外部前面插入函数返回值
insertAfter(content)	将所选元素插入到另一指定元素外部后面
insertBefore(content)	将所选元素插入到另一指定元素外部前面

after() 举例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(function() {
 7             $("span").after(retHtml);
 8             function retHtml() {
 9                 // var str = "<span><b>Write Less Do More</b></span>";
10                 var str = "<b>Write Less Do More</b>";
11                 return str;
12             }
13         })
14 
15     </script>
16 </head>
17 <body>
18     <span>jQuery</span>
19 </html>

Chrome中代码如下：

可以看到仅仅是在标签之后添加了相应代码

复制节点：

clone () 只是单独的复制， clone(true) 怎会复制元素的所有处理事件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(function() {
 7             $("img").click(function() {
 8                 $(this).clone().appendTo(‘span‘);
 9             });
10         })
11 
12     </script>
13 </head>
14 <body>
15     <span><img title="封面" src="images/00.png" /></span>
16 </html>

通过点击图片会复制一张相同的图片，但是复制的图片点击没有效果，如果将代码改为 clone(true) 则复制的图片点击之后也会复制新图片

替换元素节点：

替换节点使用 replaceWith() 或者 replaceAll() 方法

eg:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(function() {
 7             $("#span1").replaceWith("<span title =‘replaceWith‘>fly</span>");
 8             $("<span title=‘replaceAll‘>fly@gmail.com</span>").replaceAll(‘#span2‘);
 9         })
10 
11     </script>
12 </head>
13 <body>
14     <p>name: <span id="span1">aa</span></p>
15     <p>email: <span id="span2">bb</span></p>
16 </body>
17 </html>

上面代码中的 aa 和 bb 将分别被替换为 fly 和 fly@gmail.com

replaceWith() 和 replaceAll() 操作的是 Html 而不是标签的内容，个人感觉两个函数的作用一样，只不过写法不一样。

包裹元素节点：

wrap(html)
wrap(elem)
wrap(fn)
unwrap()
wrapAll(html)
wrapInner(html)
wrapInner(elem)
wrapInner(fn)

其中常用的有： wrap 和 wrapInner

eg：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(function() {
 7             $("p").wrap(‘<b></b>‘);
 8             $("span").wrapInner(‘<i></i>‘);
 9         })
10 
11     </script>
12 </head>
13 <body>
14     <p>favorite people: <span>wang fei</span></p>
15     <p>favorite movie: <span>Titanic</span></p>
16 </body>
17 </html>

在Chrome中查看代码：

可以看到 放在了 标签内部，而 放在了 标签外部

遍历元素：

这个比较简单，直接上例子：

1 $("img").each(function(index) {
2     this.title = "the " + index + " picture";
3 })

删除页面元素：

jQuery提供了两种删除元素的方法： remove() 和 empty()

eg:

1 $("ul li").remove("li[titel=t]");
2 $("ul li:eq(1)").remove();

jQuery学习笔记（1）-DOM 操作,布布扣,bubuko.com

jQuery学习笔记（1）-DOM 操作

码农公寓

1.元素属性操作

2.获取和设置元素

3.元素样式操作

4.页面元素操作

相关文章