1、parent()：获得当前匹配元素集合中每个元素的父元素，该方法只会向上一级对 DOM 树进行遍历

  1. $('li.item-a').parent().css('background-color', 'red');        // 寻找类名为item-a的li元素的父节点元素，并设置背景色为红色

1.1、parents() ：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)

  1. $("span").parents().css({"color":"red","border":"2px solid red"});    // 将span元素直到HTML节点之前的所有父节点元素设置边框样式

1.2、parentsUntil() ：返回介于两个给定元素之间的所有祖先元素

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .ancestors *
  6. {
  7. display: block;
  8. border: 2px solid lightgrey;
  9. color: lightgrey;
  10. padding: 5px;
  11. margin: 15px;
  12. }
  13. </style>
  14. <script src="/jquery/jquery-1.11.1.min.js">
  15. </script>
  16. <script>
  17. $(document).ready(function(){
  18.   $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
  19. });
  20. </script>
  21. </head>
  22.  
  23. <body class="ancestors"> body (曾曾祖父)
  24.   <div style="width:500px;">div (曾祖父)
  25.     <ul>ul (祖父)
  26.       <li>li (直接父)
  27.         <span>span</span>
  28.       </li>
  29.     </ul>
  30.   </div>
  31. </body>
  32.  
  33. </html>

2、children()：返回返回被选元素的所有直接子元素，该方法只会向下一级对 DOM 树进行遍历

  1. $('ul.level-2').children().css('background-color', 'red');    // 寻找类名为level-2的ul元素，并将其子节点背景色设置为红色

2.1、find() ：返回被选元素的后代元素，一路向下直到最后一个后代

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .descendants *
  6. {
  7. display: block;
  8. border: 2px solid lightgrey;
  9. color: lightgrey;
  10. padding: 5px;
  11. margin: 15px;
  12. }
  13. </style>
  14. <script src="/jquery/jquery-1.11.1.min.js">
  15. </script>
  16. <script>
  17. $(document).ready(function(){
  18.   $("div").find("span").css({"color":"red","border":"2px solid red"});
  19. });
  20. </script>
  21. </head>
  22. <body>
  23.  
  24. <div class="descendants" style="width:500px;">div (current element)
  25.   <p>p (子)
  26.     <span>span (孙)</span>
  27.   </p>
  28.   <p>p (child)
  29.     <span>span (孙)</span>
  30.   </p>
  31. </div>
  32.  
  33. </body>
  34. </html>

3、创建节点：写好html内容，直接用$()包裹

  1. var $newDiv = $("<div id="newDiv"></div>");

4、clone()：生成被选元素的副本，包含子节点、文本和属性

  1. $("p:first").clone(true);    // 复制每个 p 元素，事件处理器同样被复制到p元素

5、append()：在被选元素的结尾（仍然在内部）插入指定内容

  1. $("p").append(function(n){
  2.       return "<b>This p element has index " + n + "</b>";
  3. });    // 在每个 p 元素的结尾添加内容

6、appendTo()：在被选元素的结尾（仍然在内部）插入指定内容（与append()不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。）

  1. $("<b> Hello World!</b>").appendTo("p");    // 在每个 p 元素的结尾添加内容

7、prepend()：在被选元素的开头（仍位于内部）插入指定内容

  1. $("p").prepend("<b>Hello world!</b> ");    // 在每个 p 元素的开头插入内容

8、prependTo()：在被选元素的开头（仍位于内部）插入指定内容（与prepend()差异在于语法：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。）

  1. $("<b>Hello World!</b>").prependTo("p");    // 在每个 p 元素的开头插入文本

9、before() ：在被选元素前插入指定的内容（被选元素外部）

  1. $("p").before(function(n){
  2.       return "<p>The p element below has index " + n + "</p>";
  3. });    // 在每个段落前面插入新的段落

10、after() ：  在被选元素后插入指定的内容（被选元素外部）

  1. $("p").after(function(n){
  2.       return "<p>The p element above has index " + n + "</p>";
  3. });    // 在每个 p 元素后插入内容

11、insertBefore()：在被选元素前插入 HTML 元素（被选元素外部）

  1. $('<span>insertBefore content</span>').insertBefore('p');    // 在p元素前插入span元素

12、insertAfter() ：在被选元素后插入 HTML 元素（被选元素外部）

  1. $('<span>insertAfter content</span>').insertAfter('p');    // 在p元素后面插入span元素

13、remove() ：移除被选元素，包括所有文本和子节点；除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据

  1. $('p').remove();

13.1、removeAttr() ：从被选元素中移除属性

  1. $("p").removeAttr("id");    // 从任何 p 元素中移除 id 属性

13.2、removeClass() ：从被选元素移除一个或多个类（注释：如果没有规定参数，则该方法将从被选元素中删除所有类）

  1. $("p").removeClass("intro");    // 移除所有 <p> 的 "intro" 类
  2.  
  3. $("p").removeClass();    // 删除<p>元素的所有类

14、detach() ：移除被选元素，包括所有文本和子节点；detach() 会保留所有绑定的事件、附加的数据

  1. $('p').detach()

15、empty() ：从被选元素移除所有内容，包括所有文本和子节点

  1. $('p').empty();

16、replaceWith() ：用指定的 HTML 内容或元素替换被选元素

  1. $('p').replaceWith('<b>replaceWith content!</b>')    // 用粗体文本替换所有段落

17、replaceAll() ：指定的 HTML 内容或元素替换被选元素 （与replaceWith差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。）

  1. $('p').replaceAll('<b>replaceAll content!</b>');

18、wrap() ：把每个被选元素放置在指定的 HTML 内容或元素中

  1. $("p").wrap(function(){ return "<div></div>" });    // 用 div 包裹每个段落

18.1、unwrap() ：删除被选元素的父元素

  1. $("p").unwrap();    // 删除所有 <p> 元素的父元素

19、wrapAll() ：在指定的 HTML 内容或元素中放置所有被选的元素

  1. $("p").wrapAll("<div></div>");    // 用一个 div 包裹所有段落

20、warpInner()：使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)

  1. $("p").wrapInner("<b></b>");    // 加粗段落中的文本

21、each()：为每个匹配元素规定运行的函数（遍历指定元素）

  1. $("li").each(function(){
  2.       alert($(this).text())
  3. });    // 输出每个列表项的值

22、text()：设置或返回被选元素的文本内容

  1. $("p").text("Hello world!");    // 改变所有 p 元素的文本内容
  2. $("p").text();    // 获取p元素的文本内容

23、html()：返回或设置被选元素的内容 (inner HTML)

  1. $("p").html("Hello <b>world!</b>");    // 改变 p 元素的内容
  2. $("p").html();    // 获取p元素的内容

　　text()和HTML()的区别：

　　　　区别一：text()函数可用于xml 文档 和 html 文档，而 html() 只能用于html文档。

　　　　区别二：html()函数不仅仅显示文本，输出的还包括标签对和文本，而text()只有文本。

24、val()：返回或设置被选元素的值，元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值

  1. $(":text").val("Hello Kitty");    // 改变文本域的值

25、next()：获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素

  1. $("p").next(".selected").css("background", "yellow");    // 查找每个段落的下一个同胞元素，仅选中类名为 "selected" 的段落，设置背景色为黄色

25.1、siblings()：返回被选元素的所有同胞元素

  1. $("h2").siblings().css({"color":"red","border":"2px solid red"});    // 为h2标签同级的所有元素设置边框样式
  2.  
  3. $("h2").siblings("p").css({"color":"red","border":"2px solid red"});    // 为h2标签同级的所有p元素设置边框样式

25.2、next() ：返回被选元素的下一个同胞元素，该方法只返回一个元素

  1. $("h2").next().css({"color":"red","border":"2px solid red"});   // 为h2元素的下一个同胞元素设置边框样式

25.3、nextAll() ：返回被选元素的所有跟随的同胞元素

  1. $("h2").nextAll().css({"color":"red","border":"2px solid red"});   // 为h2元素的后面所有同胞元素设置边框样式

25.4、nextUntil() ：返回介于两个给定参数之间的所有跟随的同胞元素

  1. $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});    // 为h2元素后的所有同胞元素，直到h6元素设置边框样式

25.5、prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

26、attr() ：设置或返回被选元素的属性值

　　（1）设置被选元素的属性和值：

  1. $("img").attr("width","180");    // 设置图像的 width 属

　　 （2）返回被选元素的属性值：

  1. $("img").attr("width");    // 返回图像的宽度

　　（3）使用函数来设置属性/值：

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $("button").click(function(){
  7.     $("img").attr("width",function(n,v){
  8.       return v-50;
  9.     });
  10.   });
  11. });
  12. </script>
  13. </head>
  14. <body>
  15. <img src="/i/eg_smile.gif" width="128" height="128" />
  16. <br />
  17. <button>减少图像的宽度 50 像素</button>
  18. </body>
  19. </html>

　　（4）为被选元素设置一个以上的属性和值：

  1. $("img").attr({width:"50",height:"80"});    // 设置图像的 width 和 height 属性

27、获取并设置 CSS 类：

  • addClass()：向被选元素添加一个或多个类
  • removeClass()：从被选元素删除一个或多个类
  • toggleClass()：对被选元素进行添加/删除类的切换操作
  • css()：设置或返回样式属性
  • hasClass() ：检查被选元素是否包含指定的 class
  1. .important
  2. {
  3. font-weight:bold;
  4. font-size:xx-large;
  5. }
  6.  
  7. .blue
  8. {
  9. color:blue;
  10. }

　　例子：

  1. $("div").addClass(""important blue"");    // 向 div 元素添加类 "important blue"
  2.  
  3. $("div").removeClass("blue");    // 从div元素上删除类blue
  4.  
  5. $("div").toggleClass("blue");    // div元素切换 CSS 类blue
  6.  
  7. $("p").css("background-color");    // 返回 p 元素的背景色
  8.  
  9. $("p").css("background-color","yellow");    // 设置 p 元素的背景色
  10.  
  11. $("p").css({"background-color":"yellow","font-size":"20px"});    // 为 p 元素设置多个样式
  12.  
  13. $("p").hasClass("intro");    // 检查段落是否拥有类 "intro"

28、处理元素和浏览器窗口的尺寸：

  • width()：设置或返回元素的宽度（不包括内边距、边框或外边距）
  • height()：设置或返回元素的高度（不包括内边距、边框或外边距）
  • innerWidth()：返回元素的宽度（包括内边距）
  • innerHeight()：返回元素的高度（包括内边距）
  • outerWidth()：返回元素的宽度（包括内边距和边框）
  • outerHeight()：返回元素的高度（包括内边距和边框）
  • outerWidth(true)：返回元素的宽度（包括内边距、边框和外边距）
  • outerHeight(true)：返回元素的高度（包括内边距、边框和外边距）

　　例子：

  1. $("#div1").width();    // 返回id为div1元素的宽
  2.  
  3. $("#div1").height();    // 返回id为div1元素的高
  4.  
  5. $("#div1").innerWidth();    // 返回id为div1元素的宽度（包括内边距）
  6.  
  7. $("#div1").innerHeight();    // 返回id为div1元素的高度（包括内边距）
  8.  
  9. $("#div1").outerWidth();    // 返回id为div1元素的宽度（包括内边距和边框）
  10.  
  11. $("#div1").outerHeight();    // 返回id为div1元素的宽度（包括内边距和边框）
  12.  
  13. $("#div1").outerWidth(true);    // 返回id为div1元素的宽度（包括内边距、边框和外边距）
  14.  
  15. $("#div1").outerHeight(true);    // 返回id为div1元素的宽度（包括内边距、边框和外边距）
  16.  
  17. $(window).width();    // 显示文档和窗口的宽
  18.  
  19. $(window).height();    // 显示文档和窗口的高
  20.  
  21. $("#div1").width(320);    // 调整 div 的宽
  22. $("#div1").height(320);    // 调整 div 的高
  23. $("#div1").width(320).height(320);    // 调整 div 的尺寸

29、元素的过滤：

  • first() ：返回被选元素的首个元素
  • last() ：返回被选元素的最后一个元素
  • eq() ：返回被选元素中带有指定索引号的元素
  • gt()：选择器选取 index 值高于指定数的元素（index 值从 0 开始）
  • lt()：选取 index 值小于指定数的元素（index 值从 0 开始）
  • filter() ：允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
  • not() ：返回不匹配标准的所有元素（提示：not() 方法与 filter() 相反）

　　例子：

  1. $("div p").first();    // 返回首个 <div> 元素内部的第一个 <p> 元素
  2.  
  3. $("div p").last();    // 返回最后一个 <div> 元素中的最后一个 <p> 元素
  4.  
  5. $("p").eq(1);    // 返回第二个 <p> 元素（索引号 等于1）
  6.  
  7. $("tr:gt(2)");    // 返回第3个<tr>元素后的所有<tr>元素（索引号大于2）
  8.  
  9. $("tr:lt(2)");    // 返回前3个<tr>元素（索引号小于2）
  10.  
  11. $("p").filter(".intro");    // 返回带有类名 "intro" 的所有 <p> 元素
  12.  
  13. $("p").not(".intro");    // 返回不带有类名 "intro" 的所有 <p> 元素

jQuery操作DOM节点的方法总结的更多相关文章

  1. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  2. vue中操作Dom节点的方法

    1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...

  3. jQuery操作DOM知识总结

    jquery操作DOM(节点) 1.创建元素 //$(htmlStr) //htmlStr:html格式的字符串 $("<span>这是一个span元素</span> ...

  4. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

  5. 第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  6. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  7. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  8. 第四章 使用jQuery操作DOM

    第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...

  9. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

随机推荐

  1. MFC message routine

    现在维护的一个软件还是用mfc写的,最近被要加入一个功能弄得焦头烂额.主要现象就是加入的菜单的响应函数没被call到 上网搜索,在官方网站找到了不少资料 主要链接如下 https://msdn.mic ...

  2. mysql 的 docker 镜像使用

    mysql 的 docker 镜像使用: 下载镜像: docker pull mysql:8.0.14 运行容器: docker run -it -e MYSQL_ROOT_PASSWORD=mypw ...

  3. hanlp和jieba等六大中文分工具的测试对比

    本篇文章测试的哈工大LTP.中科院计算所NLPIR.清华大学THULAC和jieba.FoolNLTK.HanLP这六大中文分词工具是由  水...琥珀 完成的.相关测试的文章之前也看到过一些,但本篇 ...

  4. Spring Cloud(Dalston.SR5)--Hystrix 断路器-合并请求

    在 Spring Cloud 中可以使用注解的方式来支持 Hystrix 的合并请求,缓存与合并请求功能需要先初始化请求上下文才能实现,因此,必须实现 javax.servlet.Filter 用于创 ...

  5. 【转】使用kettle工具遇到的问题汇总及解决方案

    使用kettle工具遇到的问题汇总及解决方案   转载文章版权声明:本文转载,原作者薄海 ,原文网址链接 http://blog.csdn.net/bohai0409/article/details/ ...

  6. 车载文档记录（ROM）

    一,缩写词定义 1,ECU和ECM ECU: Engine Control Unit 发动机控制单元:从用途上讲则是汽车专用微机控制器.ECM: Engine Control Module 发动机控制 ...

  7. Delegate event 委托事件---两个From窗体使用委托事件

    窗体如下:   public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void b ...

  8. CAD 中绘制点

    首先开启点样式,否则点是看不到的 系统变量 PDMODE 和 PDSIZE 控制点对象的显示外观. PDMODE 取值为 0.2.3 .4 时指定表示点的图形,取值为 1 表示不显示任何图形,如下图所 ...

  9. Selenium Python FirefoxWebDriver处理打开保存对话框

    代码如下(网上示例): #profile =  webdriver.FirefoxProfile(r"C:\Users\Skyyj\AppData\Roaming\Mozilla\Firef ...

  10. Firefox不支持event解决方法

    IE 中可以直接使用event 对象,而FF 中则不可以,解决方法之一如下: var theEvent = window.event || arguments.callee.caller.argume ...