02_jQuery的DOM操作

最新推荐文章于 2020-04-14 13:05:28 发布
最新推荐文章于 2020-04-14 13:05:28 发布
阅读量333 收藏
点赞数
分类专栏： d_jQuery 文章标签： jQuery jQuery的DOM操作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qd_liyp/article/details/8624843
版权

jQuery的DOM操作

1、  查找节点

1.1、查找元素节点：

Var $li = $(“ul li:eq(1)”);

Var li_txt = $li.text();

Alert(li_txt);

获取<ul>元素里第二个<li>节点，并将它的文本内容打印出来。

1.2、查找属性节点：

Var $para = $(“p”);

Var p_txt = $para.attr(“title”);

Alert(p_txt);

获取<p>节点，并将它的title属性值打印出来。

示例0201

2、  创建节点

2.1、创建元素节点：

                   Var $li_1 = $(“<li></li>”);

                   Var $li_2 = $(“<li></li>”);

                   $(“ul”).append($li_1);

                   $(“ul”).append($li_2);

                   创建2个<li>元素，并将这2个元素插入文档中。

2.2、创建文本节点：

                   Var $li_1 = $(“<li>香蕉</li>”);

                   Var $li_2 = $(“<li>苹果</li>”);

                   $(“ul”).append($li_1);

                   $(“ul”).append($li_2);

                   创建元素节点时直接把文本写出来，然后再添加到文档中。

2.3、创建属性节点：

Var $li_1 = $(“<li title=’香蕉’>香蕉</li>”);

                   Var $li_2 = $(“<li title=’苹果’>苹果</li>”);

                   $(“ul”).append($li_1);

                   $(“ul”).append($li_2);

                   创建元素节点时直接把属性写出来，然后再添加到文档中。

                   示例0202

3、  插入节点

方法

描述

示例

Append()

向每个匹配的元素内部追加内容

Html代码:

<p>我想说:<p>

jQuery代码:

$(“p”).append(“<b>你好</b>”);

结果:

<p>我想说:<b>你好</b></p>

appendTo()

将所有匹配的元素追加到指定的元素中。与append()不同，$(A).appendTo(B)不是将B追加到A中，而是将A追加到B中

Html代码:

<p>我想说:<p>

jQuery代码:

$(“<b>你好</b>”).appendTo(“p”);

结果:

<p>我想说:<b>你好</b></p>

Prepend()

向每个匹配的元素内部前置内容

Html代码:

<p>我想说:<p>

jQuery代码:

$(“p”).prepend(“<b>你好</b>”);

结果:

<p><b>你好</b>我想说:</p>

prependTo()

将所有匹配的元素前置倒指定的元素中。与prepend()不同，$(A).prependTo(B)不是将B前置到A中，而是将A前置到B中

Html代码:

<p>我想说:<p>

jQuery代码:

$(“<b>你好</b>”).prependTo(“p”);

结果:

<p><b>你好</b>我想说:</p>

After()

在每个匹配的元素之后插入内容

Html代码:

<p>我想说:<p>

jQuery代码:

$(“p”).after(“<b>你好</b>”);

结果:

<p>我想说:</p><b>你好</b>

insertAfter()

将所有匹配的元素插入到指定元素的后面。与after()不同，$(A).insertAfter(B)不是将B插入到A后面，而是将A插入到B后面

Html代码:

<p>我想说:<p>

jQuery代码:

$(“<b>你好</b>”).insertafter(“p”);

结果:

<p>我想说:</p><b>你好</b>

Before()

在每个匹配的元素之前插入内容

Html代码:

<p>我想说:<p>

jQuery代码:

$(“p”).before(“<b>你好</b>”);

结果:

<b>你好</b><p>我想说:</p>

insertBefore()

将所有匹配的元素插入到指定的元素前面。与before()不同，$(A).insertBefore(B)不是将B插入到A前面，而是将A插入到B前面

Html代码:

<p>我想说:<p>

jQuery代码:

$(“<b>你好</b>”).insertBefore(“p”);

结果:

<b>你好</b><p>我想说:</p>

示例0203

4、  删除节点

4.1、remove()方法：

Var $li = $(“ul li:eq(1)”).remove();

$li.appendTo(“ul”);

删除<ul>节点的第二个<li>元素节点，删除方法返回一个指向被删除节点的引用，然后重新将节点添加到<ul>元素里。

$(“ul li”).remove(“li[title!=菠萝]”)

将<li>元素中属性title不等于’菠萝’的<li>元素删除。

4.2、empty()方法：

$(“ul li:eq(1)”).empty();

将第二个<li>元素里的内容清空。

示例0204

5、  复制节点

$(“ul li“).click(function(){

                   $(this).clone().appendTo(“ul”);

})

复制当前点击的节点，并把它添加到<ul>元素中。此时复制出来的新元素没有点击事件功能。

$(this).clone(true).appendTo(“body”);

此时复制出来的新元素具有点击事件功能，同时复制了功能。

示例0205

6、  替换节点

将网页中的”<p title=”你好”>你好</p>”替换成”<strong>谢谢</strong>”可以通过以下两种方式实现：

1)$(“p”).replaceWith(“<strong>谢谢</strong>”);

2)$(“<strong>谢谢</strong>”).replaceAll(“p”);

示例0206

7、包裹节点

Html代码：

<strong>谢谢</strong>

<strong>谢谢</strong>

 

$(“strong”).wrap(“<b></b>”);结果：

<b><strong>谢谢</strong></b>

<b><strong>谢谢</strong></b>

$(“strong”).wrapAll(“<b></b>”);结果：

<b>

<strong>谢谢</strong>

<strong>谢谢</strong>

</b>

$(“strong”).wrapInner(“<b></b>”);结果：

<strong><b>谢谢</b></strong>

示例0207

8、属性操作

8.1、获得属性和设置属性：

Var p_txt = $(“p”).attr(“title”);

$(“p”).attr(“title”,”your title!”);

8.2、删除属性：

$(“p”).removeAttr(“title”);

示例0208

9、样式操作

9.1、获取样式和设置样式：

Var p_class = $(“p”).attr(“class”);

$(“p”).attr(“class”,”myClass”);

9.2、追加样式：

$(“p”).addClass(“myClass”);

(如果一个元素加了多个样式，则不同的样式合并，相同的样式后者覆盖前者。)

9.3、移除样式：

$(“p”).removeClass(“myClass”);

示例0209

10、设置和获取html、文本和值

10.1、html()方法：

Html代码：

<p><strong>谢谢</strong></p>

var p_html = $(“p”).html();

alert(p_html);

打印结果:<strong>谢谢</strong>

 

$(“p”).html(“<strong>哈哈</strong>”);//设置<p>元素的html代码

结果: <p><strong>哈哈</strong></p>

10.2、text()方法：

Html代码：

<p><strong>谢谢</strong></p>

var p_text = $(“p”).text();

alert(p_text);

打印结果：谢谢

 

$(“p”).text(“哈哈”);//设置<p>元素的文本内容

结果：<p><strong>哈哈</strong></p>

10.3、val()方法：

示例0210

11、遍历节点

11.1、children()方法：取得匹配元素的子元素集合。

Html代码：

<body>

                   <p>qq</p>

                   <ul>

                                     <li>aa</li><li>bb</li><li>cc</li>

                   </ul>

</body>

Var $body = $(“body”).children();

Var $p = $(“p”).children();

Var $ul = $(“ul”).children();

Alert($body.length);                  alert($p.length);      alert($ul.length);

(2、0、3)

11.2、next()方法：取得匹配元素后面紧邻的同辈元素。

Var $p1 = $(“p”).next();

结果：

<ul>

                   <li>aa</li><li>bb</li><li>cc</li>

</ul>

11.3、prev()方法：取得匹配元素前面紧邻的同辈元素。

Var $ul = $(“ul”).prev();

结果：

<p>qq</p>

11.4、siblings()方法：取得匹配元素前后所有的同辈元素。

11.5、closest()方法：取得最近的匹配元素。

示例0211

12、CSS-DOM操作

$(“p”).css(“color”);//取得p元素的样式颜色

$(“p”).css(“color”,”red”);//设置p元素的样式颜色为红色

示例0212

13、其它常用方法

13.1、offset()方法：取得元素在当前视窗的相对偏移。

Var offset = $(“p”).offset();

Var left = offset.left;

Var top = offset.top;

13.2、position()

13.3、scrollTop()和scrollLeft()

 

李_逍遥
关注
专栏目录
jQuery中的DOM操作（2）
LWT的专栏
06-11 376
6、替换节点 你最喜欢的水果是?   苹果   橘子   菠萝         $(function(){  $("p").replaceWith("你最不喜欢的水果是?");  // 同样的实现：$("你最不喜欢的水果是?").replaceAll("p");   });
jquery的DOM操作
onepunchmen00的博客
01-08 3971
创建HTML DOM对象和jquery对象的区别 DOM对象是浏览器渲染出来的元素   jquery对象是对0、1个或者多个DOM对象的包装    例如 最后一个返回jquery版本号         创建HTML   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta c...
JQuery删除DOM节点的方法
qq_36470492的博客
11-23 1292
如果文档中某一个元素多余，那么应将其删除。JQuery提供了两种删除节点的方法，即remove()和empty()。 HTML DOM结构如下: p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家p> ul class="nm_ul">   li title='PHP编程'>简单易懂的PHP编程li>   
jQuery中的DOM操作（1）
LWT的专栏
06-09 482
1、查找节点 你最喜欢的水果是?   苹果   橘子   菠萝       $(function(){          var$para = $("p");                        //获取节点   var $li = $("ulli:eq(1)");  
jQuery-创建、删除、复制、替换、包裹节点
Anna
09-20 797
创建删除复制替换包裹节点 你最喜欢的水果是？ 苹果 橘子 菠萝 $("html"); //$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回 //首先创建两个Li 元素 var $li_1 = $(""); //创建第一个li元素 var $li_2
jquery-array.rar_jquery_jquery array_jquery array_jquery array
09-23
在JavaScript的世界里，jQuery库是不可或缺的一部分，它极大地简化了DOM操作、事件处理以及Ajax交互。在本主题中，我们将深入探讨jQuery中的数组操作，如何使用jQuery提供的便捷方法来处理和操作数组。jQuery虽然并...
jQuery常见面试题之DOM操作详析
12-10
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
【练习向】jQuery基础教程第四版章节源码——Book05_jQuery_操作DOM
11-28
DOM操作在jQuery中非常直观。要添加新元素，可以使用"$().append()"或"$().prepend()"方法，将新内容放置在元素内部的末尾或开头。同样，"$().before()"和"$().after()"可在现有元素前后插入内容。删除元素则使用"$...
jquery-3.4.1_jquery_3.4.1.js_jquery-3.4.1_sangat1_jquery3.4.1_jq
09-30
它以其简洁的API和强大的功能，极大地简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在本篇文章中，我们将深入探讨jQuery 3.4.1这一版本，了解其核心特性以及在实际项目中的应用。 首先，我们来看看标题中...
13_JQuery DOM操作之对class属性的删除、添加和切换
l0510402015的博客
04-14 889
1.addClass():添加class属性值 2.removeClass():删除class属性值 3.toggleClass():切换class属性 * toggleClass("one"): * 判断如果元素对象上存在class="one"，则将属性值one删除掉。如果元素对象上不存在class="one"，则添加 4.css():设置样式 <...
weixin286基于SSM框架的童装购买平台微信小程序+ssm.rar
09-13
所有源码，都可正常运行
基于Spring框架的Java Web文章CRUD应用.zip
最新发布
09-13
这是一个基于Spring框架的Java Web应用程序，用于实现文章的增删改查（CRUD）操作。程序集成了JSF前端技术和JPA数据访问层，通过Hibernate实现。PostgreSQl被用作数据库系统。在使用此项目之前，需在__applicationContext.xml__文件中设置数据库的用户名和密码。该项目文件位于src/main/webapp/WEB-INF/文件夹中。该项目使用Maven管理依赖关系、构建源代码和打包应用程序。通过在项目文件夹中打开终端并执行以下命令，可以完成所有这些操作：mvn clean package。该项目使用Tomcat作为应用程序服务器，要运行服务器，请在项目文件夹中打开终端并执行：sh target/bin/webapp。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看reADME.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
springboot基于Android的酒店预订系统App毕业论文.docx
09-13
springboot基于Android的酒店预订系统App毕业论文.docx
weixin271松江大学城就餐推荐系统设计与实现+ssm.rar
09-13
所有源码，都可正常运行
基于java的保密信息学科平台系统设计与实现.docx
09-13
基于java的保密信息学科平台系统设计与实现.docx
基于java的图书电子商务网站的设计与实现.docx
09-13
基于java的图书电子商务网站的设计与实现.docx
基于java的新闻稿件管理系统设计与实现.docx
09-13
基于java的新闻稿件管理系统设计与实现.docx
基于java的数码论坛系统设计与实现设计与实现.docx
09-13
基于java的数码论坛系统设计与实现设计与实现.docx
JQuery DOM操作详解：轻松掌握节点创建与查询
在jQuery基础教程中，DOM操作是核心内容之一，它允许开发...掌握jQuery的DOM操作，能够提升开发者的网页交互能力和页面响应式设计能力。在实际项目中，熟练运用DOM操作能帮助开发者更高效地构建和维护复杂的网页结构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值