查找，获取，创建，插入节点

查找，获取，创建，插入节点

查找元素节点

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

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

查找文本节点

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

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

查找属性节点

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

cosole.log($('p').attr('title'));

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

以上jQuery``和DOM用法的比较

获取父节点

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

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

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

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

jQuery中除了children()方法用于获得指定元素的子元素。

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

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

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

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

获取兄弟节点

1. jQuery中的next()方法用于获取指定元素的下一个相邻兄弟元素。

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

   • selector: 表示jQuery中的选择器。

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

     var $p1=$('p').next()//<p>元素的下一个相邻兄弟元素
     

2. jQuery中的prey()方法用于获取指定元素的上一个相邻兄弟元素

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

• selector: 表示jQuery的选择器。
• expr: 可选，~prev()方法的参数`，表示用于筛选的选择器。

var $p1=$('p').prev();//<p>元素上的一个相邻兄弟元素

创建元素节点

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

var $element=$(elementName);

• elementName:表示元素名称

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

插入外部节点

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

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

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

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

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

  //before - before后面的节点被添加到before前面的节点的前面
  $("#tj").beforee($("#ms"));
  //after - after后面的节点被添加到after前面的节点的后面
  $("#tj").after($("#ms"));
  //insertBefore
  $("#tj").insertBefore($("#ms"));
  //insertAfter
  $("#tj").insertAfter($("#ms"));