jQuery操作DOM节点的方法总结

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors"> body (曾曾祖父)
  <div style="500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

</html>

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.descendants *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").find("span").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="500px;">div (current element) 
  <p>p (子)
    <span>span (孙)</span>     
  </p>
  <p>p (child)
    <span>span (孙)</span>
  </p> 
</div>

</body>
</html>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$('p').remove();

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

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

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

$("p").removeClass("intro");    // 移除所有 <p> 的 "intro" 类

$("p").removeClass();    // 删除<p>元素的所有类

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

$('p').detach()

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

$('p').empty();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  text()和HTML()的区别:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  (1)设置被选元素的属性和值:

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

   (2)返回被选元素的属性值:

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

  (3)使用函数来设置属性/值:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("img").attr("width",function(n,v){
      return v-50;
    });
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" width="128" height="128" />
<br />
<button>减少图像的宽度 50 像素</button>
</body>
</html>

  (4)为被选元素设置一个以上的属性和值:

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

27、获取并设置 CSS 类:

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

.blue
{
color:blue;
}

  例子:

$("div").addClass(""important blue"");    // 向 div 元素添加类 "important blue"

$("div").removeClass("blue");    // 从div元素上删除类blue

$("div").toggleClass("blue");    // div元素切换 CSS 类blue

$("p").css("background-color");    // 返回 p 元素的背景色

$("p").css("background-color","yellow");    // 设置 p 元素的背景色

$("p").css({"background-color":"yellow","font-size":"20px"});    // 为 p 元素设置多个样式

$("p").hasClass("intro");    // 检查段落是否拥有类 "intro"

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

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

  例子:

$("#div1").width();    // 返回id为div1元素的宽

$("#div1").height();    // 返回id为div1元素的高

$("#div1").innerWidth();    // 返回id为div1元素的宽度(包括内边距)

$("#div1").innerHeight();    // 返回id为div1元素的高度(包括内边距)

$("#div1").outerWidth();    // 返回id为div1元素的宽度(包括内边距和边框)

$("#div1").outerHeight();    // 返回id为div1元素的宽度(包括内边距和边框)

$("#div1").outerWidth(true);    // 返回id为div1元素的宽度(包括内边距、边框和外边距)

$("#div1").outerHeight(true);    // 返回id为div1元素的宽度(包括内边距、边框和外边距)

$(window).width();    // 显示文档和窗口的宽

$(window).height();    // 显示文档和窗口的高

$("#div1").width(320);    // 调整 div 的宽
$("#div1").height(320);    // 调整 div 的高
$("#div1").width(320).height(320);    // 调整 div 的尺寸

 29、元素的过滤:

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

  例子:

$("div p").first();    // 返回首个 <div> 元素内部的第一个 <p> 元素

$("div p").last();    // 返回最后一个 <div> 元素中的最后一个 <p> 元素

$("p").eq(1);    // 返回第二个 <p> 元素(索引号 等于1)

$("tr:gt(2)");    // 返回第3个<tr>元素后的所有<tr>元素(索引号大于2)

$("tr:lt(2)");    // 返回前3个<tr>元素(索引号小于2)

$("p").filter(".intro");    // 返回带有类名 "intro" 的所有 <p> 元素

$("p").not(".intro");    // 返回不带有类名 "intro" 的所有 <p> 元素
原文地址:https://www.cnblogs.com/minozMin/p/8376614.html