小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
查找节点
查找元素节点
使用 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"));
获取父节点
获取父节点
jQuery 中的parent()方法用于获取指定元素的父元素。
var Selement = $("selector").parent([expr]);
- selector:表示 jQuery 中的选择器。
- expr:可选，
parent()方法的参数，表示用于筛选的选择器。
var $parent = $("li:first").parent(); //第一个<li>元素的父元素
jQuery 中除了parent()方法以外，还提供parents()方法和closest()方法具有类似功能。
| 方法名称 | 描逑 |
|---|---|
parent() | 获取一个包含着所有匹配元素的唯一父元素的元素集合 |
parents() | 获取一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素） |
closest() | 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素 |
获取子节点
获取子节点
jQuery 中的children()方法用于获取指定元素的所有子元素。
var $element = $("selector").children([expr]);
- selector:表示 jQuery 中的选择器。
- expr:可选，
children()方法的参数，表示用于筛选的选择器。
var $ul = $("ul").children();
ll < p > 元素下有3个子元素;
说明: children()方法只获取指定元素的子元素集合，而不获取其后代元素。
获取兄弟节点
获取兄弟节点
1.jQuery 中的next()方法用于获取指定元素的下一个相邻兄弟元素。
var $element = $("selector").next([expr]);
- selector:表示 jQuery 中的选择器。
- expr:可选，
next()方法的参数，表示用于筛选的选择器。
var $p1 = $('p').next();/l<p>元素的下一个相邻兄弟元素
2.jQuery 中的prev()方法用于获取指定元素的上一个相邻兄弟元素。
var $element = $("selector").prev([expr]);
- selector:表示 jQuery 中的选择器。
- expr:可选，
prev()方法的参数，表示用于筛选的选择器。
var $p1 = $('p').pre();/l<p>元素的上一个相邻兄弟元素
创建元素节点
创建元素节点
通过 jQuery 的工厂函数来创建元素节点。
var $element = $(elementName);
elementName:表示元素名称。
var $li = $("<li></li>");
插入节点
插入内部节点
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()方法:把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
// before - before后面的节点被添加到before前面的节点的前面
$("#ti").before($("#ms"));
// after - after后面的节点被添加到after前面的节点的后面
$("#ti").after($("#ms"));
//insertBefore
$("#ti").insertBefore($("t#ms"));
//insertAfter
$("#ti").insertAfter($("#ms"));
删除节点
remove()方法
jQuery 中提供rermove()方法用于从 DOM 中删除所有匹配的元素。
$element.remove([expr]);
- expr:用于筛选元素的 jQuery 表达式。
$("ul li:eq(1)").remove(); //获取第二个<li>元素节点后，将它从网页中删除
$("ul li").remove("li[title!=菠萝]"); //把<li>元素中属性title不等于"菠萝"的<li>元素删除
empty()方法
jQuery 中提供 empty)方法删除匹配的元素集合中所有的子节点。
$element.emptv();
empty()方法的用法如下示例代码:
$("ul lieq(1)").empty();ll获取第二个<li>元素节点后，清空此元素里的内容
替换节点
replaceWith()方法
jQuery 中提供replaceWidth()方法将所有匹配的元素替换成指定的 HTML 或 DOM 元素。
$element.replaceWidth(content);
- content:用于将匹配元素替换掉的内容。
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
replaceAll()方法
jQuery 中提供replaceAll()方法将所有匹配的元素替换成指定的 HTML 或 DOM 元素。
$element.replaceAll(content);
- content:用于将匹配元素替换掉的内容。
$("p").replaceAll("<strong>你最不喜欢的水果是?</strong>");
复制节点
colne()方法
jQuery 中提供clone()方法克隆匹配的 DOM 元素并且选中这些克隆的副本。
$element.clone(events);
- events:一个布尔值 ( true 或者 false)指示事件处理函数是否会被复制。默认为 false。
$("ul li").click(function(){
$(this).clone().appendTo("ul"");//复制当前点击的节点，并将它追加到<u>元素 $(this).clone(true).appendTo("ul");//注意参数true
//可以复制自己，并且他的副本也有同样功能
});
说明:该方法与原生 DOM 中的复制节点的方法 cloneNode()在使用时极为相似。
- 原生 DOM 中的
cloneNade(Boolean)方法，参数 Boolean 表示是否复制后代节点。 - jQuery 中的
clone(Boolean)方法，参数 Boolean 表示是否复制事件。
属性操作
removeAttr()方法
jQuery 中提供removeAttr()方法从每一个匹配的元素中删除一个属性。
$("#id").removeAttr("name");
- name：要删除的属性名
//removeAttr()方法–类似于DOM中的removeAttribute()
$("#bj").removeAttr("id");
