jQuery的结点操作 （超详细）

吾覭
490 阅读2分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

学不积硅步，无以至千里

结点操作

查找元素结点

使用 jQuery 中的选择器用法即可完成查找元素节点的功能，相对于 DOM 中的查找元素节点 jQuery 选择器的方式更便捷。

var $li = $('ul li:eq(2)');

查找文本节点

通过 jQuery 的选择器查找到元素节点后，可以利用 text() 方法获取其文本节点的文本内容。text()方法的用法类似于 DOM 中的 textContent 属性。

console.log($('p').text());

查找属性结点

通过 jQuery 的选择器查找到元素节点后，可以利用 attr() 方法获取其属性的值。attr() 方法的用法类似于 DOM 中的 getAttribute() 方法。

console.log($('p').attr("'title'));

<button id="but" name="button">按钮</button>
<script>
// 定位页面元素 - jQuery 的选择器
var $but =  $('#but');
// 指定元素的文本内容 - 类似于DOM中的textContent属性
console.log($but.text());
// 指定元素的指定属性名得到的属性值 - 类似于DOM中的getAttribute(attrName)
console.log($but.attr('name'));
// 为指定元素设置文本内容
$but.text('新按钮');

$but.attr('class','cls');
/* 
 jQuery查找页面元素 – 并没有参考DOM中的Node对象，而是Element对象
  * text()方法 - 类似于DOM中的textContent属性
   * 获取 - text()
   * 设置 - text(textContent)
    * textContent - 表示新的文本内容
  * attr()方法
   * 获取 - attr(name) - 类似于DOM中的getAttribute(name)
   * 设置 - attr(name,value)-类似于DOM中的setAttribute(name, value)
*/
    </script>

获取父节点

jQuery 中的 parent() 方法用于获取指定元素的父元素。

var Selement = $('selector').parent([expr]);

selector : 表示 jQuery 中的选择器。

expr : 可选，parent() 方法的参数,表示用于筛选的选择器。

var $parent = $("li:first").parent(); //第一个<li>元素的父元素

jQuery 中除了 parent() 方法以外，还提供 parents() 方法和 closest() 方法具有类似功能。

B6c3Pe.png

获取子节点

jQuery 中的 children() 方法用于获取指定元素的所有子元素。

var $element = $('selector').children([expr]);

selector : 表示 jQuery 中的选择器。

expr : 可选，children() 方法的参数，表示用于筛选的选择器。

var $ul = $("ul").children();//<p>元素下有3个子元素

说明: children() 方法只获取指定元素的子元素集合，而不获取其后代元素。

<div>
  <ul>
   <li>a
    <ul>
     <li>a1</li>
     <li>a2</li>
     <li>a3</li>
    </ul>
   </li>
   <li>b</li>
   <li>c</li>
 </ul>
</div>
<script>
var $ul = $('ul:first');
// 获取指定元素的子元素
console.log($ul.children());
// 获取指定元素的指定后代元素
console.log($ul.find('li'));
</script>

获取兄弟结点

  1. jQuery 中的 next() 方法用于获取指定元素的下一个相邻兄弟元素。
var $element = $('selector").next([expr]);
  • selector : 表示 jQuery 中的选择器。
  • expr : 可选，next() 方法的参数，表示用于筛选的选择器。
var $p1 = $('p').next();//<p>元素的下一个相邻兄弟元素
  1. jQuery 中的 prev() 方法用于获取指定元素的上一个相邻兄弟元素。
var Selement = $('selector').prev([expr]);
  • selector : 表示 jQuery 中的选择器。
  • expr : 可选，prev() 方法的参数，表示用于筛选的选择器。
var Sp1 = $('p').prev(); //<p>元素的上一个相邻兄弟元素

创建元素结点

通过 jQuery 的工厂函数来创建元素节点。

var $element = $(elementName);

elementName : 表示元素名称。

var $li = $('<li></li>');

<div>
 <ul id="ul">
  <li>d</li>
  <li>a</li>
  <li id="b">b</li>
  <li>c</li>
  <li>e</li>
 </ul>
</div>
<script>
/* // 创建元素结点
  var $f = $('<li></li>');
  // 设置文本内容
  $f.text('f'); 
  // 设置属性
  $f.attr('id','f') */

// jQuery 的工厂函数接收的是字符串类型的HTML代码
var $f = $('<li id="f">f</li>');

$('ul').append($f);
</script>

两种 JS 代码功能相同，但下方更简洁。

插入内部结点

jQuery 提供了一系列方法用于向指定 HTML 页面元素内部插入节点:

append() 方法:向每个匹配的元素内部追加内容。

appendTo() 方法:把所有匹配的元素追加到另一个指定的元素元素集合中。

prepend() 方法:向每个匹配的元素内部前置内容!

prependTo() 方法:把所有匹配的元素前置到另一个、指定的元素元素集合中。

// append - append后面的节点被添加到append前面的节点的后面
$("#ti").append($("#ms"));
// prepend - prepend后面的节点被添加到prepend前面的节点的前面$("#ti").prepend($("#ms"));
// appendTo - append To前面的节点被添加到appendTo后面的节点的后面$("#ti"").appendTo($("#ms"));
// prependTo - prependTo前面的节点被添加到prependTo后面的节点的前面$("#ti"").prependTo($("#ms"));

插入外部方法

jQuery 提供了一系列方法用于向指定 HTML 页面元素外部插人节点:

before() 方法:在每个匹配的元素之前插入内容。

after() 方法:在每个匹配的元素之后插入内容。

  • insertBefore() 方法:把所有匹配的元素插人到另一个、指定的元素元素集合的前面。

  • insertAfter() 方法:把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

  • DOM 中不包含
// before - before后面的节点被添加到before前面的节点的前面
("#ti").before($("#ms"));
// after - after后面的节点被添加到after前面的节点的后面
$("#ti").after($("#ms"));
// insertBefore
$("#ti").insertefore($("#ms"));
// insertAfter
$("#ti").insertAfter($("#ms"));

插入方法也可以实现移动效果

<div>
<ul id="ul1">  
  <li id="a">a</li>
  <li>b</li>
  <li>c</li>
</ul>
<ul id="ul2">
  <li id="a1">a1</li>
  <li id="b1">b1</li>
  <li>c1</li>
</ul>
</div>
<script>
// 插入结点的方法也可以实现移动效果
var $a1 = $('#a1');// 作为新节点

$('#ul1').append($a1);

var $b1 = $('#b1');
$('#ul1').append($b1);

var $a = $('#a');
$('#ul2').prepend($a);
</script>

删除结点

==remove()==

jQuery 中提供 remove() 方法用于从 DOM 中删除所有匹配的元素。

$element.remove([expr]);

expr : 用于筛选元素的 jQuery 表达式。

$("ul li:eq(1)").remove(); //获取第二个<li>元素节点后，将它从网页中删除
$("ul li").remove("li[title!=菠萝]");//把<l>元素中属性title不等于"菠萝"的<li>元素删除

empty()

jQuery 中提供 empty() 方法删除匹配的元素集合中所有的子节点。

$element.empty();

empty() 方法的用法如下示例代码:

$("ul li:eq(1)").empty(); //获取第二个<li>元素节点后,清空此元素里的内容

// 哪个元素调用remove() - 哪个元素被删除
$('#a').remove();
// 删除后代结点，保留自身结点 - 清空
$('#ul').empty();

替换结点

replaceWidth()

jQuery 中提供 replaceWidth() 方法将所有匹配的元素替换成指定的 HTML 或 DOM 元素。

$element.replaceWidth(content);

content : 用于将匹配元素替换掉的内容。

$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");

复制结点

clone()

jQuery 中提供 clone() 方法克隆匹配的 DOM 元素并且选中这些克隆的副本。

$Selement.clone(events);

events : 一个布尔值( true 或者 false )指示事件处理函数是否会被复制。默认为 false。

$("ul li").click(function(){
$(this).clone().appendTo("ul");//复制当前点击的节点，并将它追加到<ul>元素$(this).clone(true).appendTo("ul");//注意参数true
//可以复制自己,并且他的副本也啊同样功能
});

说明:该方法与原生 DOM 中的复制节点的方法 cloneNode() 在使用时极为相似。

  • 原生 DOM 中的 cloneNode(Boolean) 方法，参数 Boolean 表示是否复制后代节点。
  • jQuery 中的 clone(Boolean) 方法，参数 Boolean 表示是否复制事件。
avatar
文章
阅读
粉丝