jQuery——入门（三）JQuery DOM操作（核心处理和文档处理）
一、核心处理（JQuery对象访问）
1、页面加载检测函数：$(document).ready(function(){}); —— $(function(){});
2、JQuery选择器函数：$(selector) —— $(“#box”);
3、动态创建JQuery包装的DOM元素：$(html)
4、JQuery对象遍历函数：each()
$(selector).each(function(index){});
$.each(selector,function(index){});
5、获取JQuery选中元素的数量：$(selector).size(); //size()是实例方法，定义在JQuery中，只能在JQuery下使用
6、获取JQuery选中元素的数量/长度：$(selector).length; //length是实例属性，定义在dom和JavaScript中，不使用JQuery也可以使用
7、获取选中元素中指定下标的DOM对象：$(selector).get(index); //也可以使用$(selector)[index]方式获取DOM对象
8、获取指定下标的元素的JQuery对象：$(selector).eq(index);
9、搜索匹配的元素，获取指定元素的位置，从0开始计数：index()
二、文档处理
1、在指定元素内部插入HTML内容或文本 —— 内部插入
(1)、append()方法 //$(A).append(B) 把B追加到A中
语法：$(selector).append(content/fn) 向每个匹配的元素内部追加内容
content：要追加的内容，直接向指定的所有元素追加
fn：函数，参数有两个
index：正在遍历的JQuery选中元素列表的下标
html：要追加的内容
案例1：$(".box").append("<p>hello world</p>");
HTML代码：<div class="box"></div>
输出结果：<div class="box"><p>hello world</p></div>
案例2：$(".box").append(function(index,html){
if(index == 1) {
html = "<p>hello world</p>";
}
return html;
})
注：index：匹配选中元素集合的下标
html：赋值，并返回，追加到指定元素的内部
$(".box").append("hello world"); //父元素.append(内容) 内容可以是纯文本
$(".box").append("<p>hello world</p>"); //父元素.append(内容) 内容里可以含有html标签
$(".box").append(function(i) {
return i;
})
(2)、appendTo()方法 //$(A).appendTo(B); 把A追加到B中
语法:$(content).appendTo(selector) 将所有匹配的元素添加到另一个指定的元素中。被追加的元素原来的位置数据被移除。
content可以是现有的，也可以是新增的
与append()方法区别：执行效果相同，语法上内容和目标的位置不同
案例1：把所有段落追加到id值为foo的元素中去
HTML代码：<p>hello world</p>
<div></div>
<div></div>
JQuery代码：$("p").appendTo("div);
输出结果：<div><p>hello world</p></div>
<div><p>hello world</p></div>
案例2：新建段落追加div中并加上一个class
HTML代码：
<div></div>
<div></div>
JQuery代码：
$("p").appendTo("div").addClass("test").end().addClass("test2");
输出结果：
<div><p class="test test2"></p></div>
<div><p class="test"></p></div>
注： $("<p>hello world</p>").appendTo(".box"); //$(内容).appendTo(父元素) 把内容追加到父元素里 作为最小孩子出现
内容不能是纯文本，可以是新内容也可以是现有内容，如果是现有内容的话，会把现有的元素直接剪切到父元素里
(3)、prepend()方法
语法：$(selector).prepend(content | fn); 向每个匹配的元素内部最前面添加指定的内容
content：要添加的内容
fn：函数，有两个参数，遍历添加指定的内容
index：当前正在遍历元素的下标
html：要添加的内容
案例：向所有段落中前置一些HTML标记代码
HTML代码：<p>hello world</p>
JQuery代码：$("p").prepend("<i>HELLO</i>");
输出结果：<p><i>HELLO</i>hello world</p>
(4)、prependTo()方法
语法：$(selector1).prependTo(selector2);
在selector2中内容的最前面，添加匹配的selector1的元素（把selector1前置到selector2中）
案例：把所有段落追加到id值为foo的元素中去
HTML代码：<p>hello world</p>
<div id="foo"></div>
JQuery代码：$("p").prependTo("#foo");
输出结果：<div id="foo"><p>hello world</p></div>
2、在指定元素的相邻位置（之前或之后）插入内容 —— 外部插入
(1)、after()方法
语法：$(selector1).after(selector2);
向指定的元素selector1之后，添加selector2元素，元素可以是DOM对象，也可以是JQuery对象，也可以是文本！
案例：把div插入p标签之后
HTML代码：<div id="foo"></div>
<p>hello world</p>
JQuery代码：$("p").after($("#foo"));
$("p").after($("#foo")[0]);
$("p").after("<div id="foo"></div> ");
输出结果：<p>hello world</p><div id="foo"></div>
(2)、before()方法
语法：$(selector1).after(selector2);
向指定的元素selector1之前，添加selector2元素，元素可以是DOM对象，也可以是JQuery对象，也可以是文本！
案例：把div插入p标签之前
HTML代码：<p>hello world</p>
<div id="foo"></div>
JQuery代码： $("p").before($("#foo"));
$("p").before($("#foo")[0]);
$("p").before("<div id="foo"></div> ");
输出结果：<div id="foo"></div> <p>hello world</p>
(3)、insertAfter()方法
语法：$(selector1).insertAfter(selector2)
和after()方法相对，A.after(B)方法是在A之后添加B === A-B
A.insertAfter(B)方法是将A放到B的后面 === B-A
(4)、insertBefore()方法
语法：$(selector1).insertBefore(selector2)
和before()方法相对，A.before(B)是在A之前添加B === B-A
A.insertBefore(B)方法是将A添加到B的前面 === A-B
3、包裹元素
(1)、wrap()
语法：$(selector).wrap(content);
将选中的元素，使用content结构化标记包裹起来
案例：所有的input被div包裹起来
HTML代码：<input type="text" />
<input type="password" value="" />
JQuery代码：$("input").wrap("<div></div>");
输出结果：<div><input type="text" /></div>
<div><input type="password" value="" /></div>
(2)、unwrap()
语法：$(selector).unwrap(); 删除被选元素的父元素，可以快速消除wrap效果
案例：移除span
HTML代码： <span>
<input type="password" value="" />
</span>
JQuery代码：$("input[type=password]").unwrap();
输出结果： <input type="password" value="" />
(3)、wrapAll()
语法：$(selector).wrapAll(wrapper)
将所有匹配的元素用单个元素包裹起来
案例：
HTML代码：<span><input type="text" /></span>
JQuery代码：$("span").wrapAll("<b></b>");
输出结果：<b><span><input type="text" /></span></b>
(4)、wrapInner()
语法：$(selector).wrapInner(wrapper)
使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)
案例：
HTML代码：<span>
<input type="password" value="" />
</span>
JQuery代码：$("span").wrapInner("<b></b>");
输出结果：<span>
<b>
<input type="password" value="" />
</b>
</span>
4、替换
(1)、replaceWith() 用指定的HTML内容或元素替换被选元素
语法：$(selector).replaceWith(content) 【维护使用较多】
content：html代码，新元素，已存在的元素（不会被移动，只会被复制）或者是函数返回值
将所有选中匹配的元素，使用content进行替换（或者使用fn函数返回的内容进行替换）
案例：
HTML代码：<div>
<span>hello,我是div里的span元素</span>
</div>
JQuery代码： $("div").replaceWidth("你好世界！")； //JQuery对象.replaceWidth(内容)
$("div").replaceWith("<a href=''>超链接</a>");
$("div").replaceWith($("span")); //jquery对象.replaceWidth(内容)
内容可以是纯文本，可以识别标签，还可以是本来就存在的元素
输出结果：你好世界！
超链接
hello,我是div里的span元素
(2)、replaceAll()
语法：$(content).replaceAll(selector) 【维护使用较多】
将所有匹配到的selector的内容，使用content进行替换
注意：和replaceWith的替换和被替换内容刚好相反
案例：
HTML代码：<div>
<span>hello,我是div里的span元素</span>
</div>
JQuery代码：$("<a href=''>hello</a>").replaceAll("div");
//$(内容).replaceAll(选择器) 用内容把后面jquery对象替换掉
输出结果：hello
5、复制 —— clone()
案例：
HTML代码：<div>
<span>hello,我是div里的span元素</span>
</div>
JQuery代码：var n = $("div").clone();
$("span").append(n);
输出结果：hello,我是div里的span元素
hello,我是div里的span元素
7、删除
(1)、empty()
语法：$(selector).empty(); 移除被选元素，包括所有文本和子节点
案例：
HTML代码： <ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
<div>我是div</div>
</ul>
JQuery代码：$("ul").empty(); //jquery对象.empty()清空里面的内容 自身还在
输出结果：（内容被清空，html还在）HTML代码：<ul></ul>
(2)、remove()
语法：$(selector).remove()； 从DOM中删除所有selector匹配的元素
案例：
HTML代码： <ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
<div>我是div</div>
</ul>
JQuery代码：$("ul").remove();输出结果：（所有jquery对象里的东西，包含自身都被删除完毕，无HTML代码）
(3)、detach()
语法：$(selector).detach()； 移除被选元素，包括所有文本和子节点
案例：同remove()