jQuery中的节点操作
1.查找节点
通过jQuery选择器来完成
jQuery 选择器允许对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()
- 基本选择器
$("#test") //选择id值为test的元素，id值是唯一的所以返回单个元素。
$("div") //选择所有的div标签元素，返回div元素数组
$(".myclass") //选择使用myclass类的css的所有元素
$("*") //选取所有元素
$("#test,div,.myclass") //选取多个元素。
- 层次选择器
$("div span") //选取<div>里的所有<span>元素
$("div >span") //选取<div>元素下元素名是<span>的子元素
$("#one +div") //选取id为one的元素的下一个<div>同辈元素 等同于$("#one").next("div")
$("#one~div") //选取id为one的元素的元素后面的所有<div>同辈元素 等同于$("#one").nextAll("div")
$("#one").siblings("div") //获取id为one的元素的所有<div>同辈元素（不管前后）
$("#one").prev("div") //获取id为one的元素的前面紧邻的同辈<div>元素
所以获取元素范围大小顺序依次为：
$("#one").siblings("div")>$("#one~div")>$("#one +div")
或是
$("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")
一些其他选择器：
- 基本过滤选择器
$("div:first") //选取所有<div>元素中第1个<div>元素
$("div:last") //选取所有<div>元素中最后一个<div>元素
$("input:not(.myClass)") //选取class不是myClass的<input>元素
$("input:even") //选取索引是偶数的<input>元素(索引从0开始)
$("input:odd") //选取索引是基数的<input>元素(索引从0开始)
$("input:eq(2)") //选取索引等于2的<input>元素
$("input:gt(4)") //选取索引大于4的<input>元素
$("input:lt(4)") //选取索引小于4的<input>元素
$(":header") //过滤掉所有标题元素，例如：h1、h2、h3等
$("div:animated") //选取正在执行动画的<div>元素
$(":focus") //选取当前获取焦点的元素
- 内容过滤选择器
$("div:contains('Name')") //选取所有<div>中含有'Name'文本的元素
$("div:empty") //选取不包含子元素（包括文本元素）的<div>空元素
$("div:has(p)") //选取所有含有<p>元素的<div>元素
$("div:parent") //选取拥有子元素的（包括文本元素）<div>元素
- 可见性过滤选择器
$("div:hidden") //选取所有不可见的<div>元素
$("div:visible") //选取所有可见的<div>元素
- 属性过滤选择器
$("div[id]") //选取所有拥有属性id的元素
$("input[name='test']") //选取所有的name属性等于'test'的<input>元素
$("input[name!='test']") //选取所有的name属性不等于'test'的<input>元素
$("input[name^='news']") //选取所有的name属性以'news'开头的<input>元素
$("input[name$='news']") //选取所有的name属性以'news'结尾的<input>元素
$("input[name*='news']") //选取所有的name属性包含'news'的<input>元素
$("div[title|='en']") //选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的<div>元素
$("div[title~='en']") //选取属性title用空格分隔的值中包含字符en的<div>元素
$("div[id][title$='test']") //选取拥有属性id,并且属性title以'test'结束的<div>元素
- 子元素过滤选择器
$("div .one:nth-child(2)") //选取class为'one'的<div>父元素下的第2个子元素
$("div span:first-child") //选取每个<div>中的第1个<span>元素
$("div span:last-child") //选取每个<div>中的最后一个<span>元素
$("div button:only-child") //在<div>中选取是唯一子元素的<button>元素
- 表单对象属性过滤选择器
$("#form1 :enabled") //选取id为'form1'的表单内所有可用元素
$("#form2 :disabled") //选取id为'form2'的表单内所有不可用元素
$("input :checked") //选取所有被选中的<input>元素
$("select option:selected") //选取所有的select 的子元素中被选中的元素
- 表单选择器
$(":input") //选取所有<input>,<textarea>,<select> 和 <button>元素
$(":text") //选取所有的单行文本框
$(":password") //选取所有的密码框
$(":radio") //选取所有单的选框
$(":checkbox") //选取所有的多选框
$(":submit") //选取所有的提交按钮
$(":image") //选取所有的图像按钮
$(":reset") //选取所有的重置按钮
$(":button") //选取所有的按钮
$(":file") //选取所有的上传域
$(":hidden") //选取所有不可见元素
2. 创建节点
例：创建三个<span>标签
var span1 = $("<span></span>");
var span2 = $("<span>具有文本内容的节点</span>");
var span3 = $("<span title='属性节点'></span>");
3.插入节点
// $A.append(B) 将B追加到A的末尾处，作为它的最后一个子元素
// $A.appendTo(B) 将A追加到B的末尾，作为它的最后一个子元素
// prepend()
$A.prependTo(B)
//将A追加到B的前面，作为它的第一个子元素
$A.after(B)
//在A之后追加B，作为它的兄弟元素
$A.insertAfter(B)
//在B之后追加A，作为它的兄弟元素
$A.before(B)
//在A之前追加B，作为它的兄弟元素
$A.insertBefore(B)
//在B之前追加A，作为它的兄弟元素
4.删除节点
remove([selector])
//从DOM中删除所有匹配的元素，返回值是一个指向已经被删除的节点的引用，可以在以后再使用这些元素。
//该方法会移除元素，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
detach([selector])
//与remove()类似，但是detach()保存所有jQuery数据和被移走的元素的相关联事件。
empty()
//无参数。从DOM中清空集合中匹配元素的所有的子节点。
5.复制节点
$("#id").clone(false);
//该方法返回的是一个节点的引用，参数默认为false，为浅复制；
//参数是true,为深复制，含义是：复制元素的同时复制元素中所绑定的事件。
6.替换节点
replaceWith(newContent);
//用新内容替换集合中所有匹配的元素，并且返回被删除的元素的集合。
//该方法会删除与节点相关联的所有数据和事件处理程序。
replaceAll(target);
//用集合的匹配元素替换每个目标元素。颠倒了replaceWith()操作效果。
