JQ DOM操作

		<ul>
			<li><a>首页1</a></li>
			<li><a >首页2</a></li>
			<li><a >首页3</a></li>
			<li><a >首页4</a></li>
		</ul>
		<p>我是p标签</p>
		<div class="test">我是div</div>
		<div class="one">
			<div class="two">我是one-div里面的元素</div>
		</div>
		<h2>
			<span>我是第一个</span>
			<span>我是第二个</span>
		</h2>

clone(bool,deepbool):克隆

bool:(默认为false)表示是否会复制元素上面的事件处理函数

deepbool:(默认和第一个参数相同)，是否克隆元素上的动态数据
相当于
因此：clone(true) => clone(true,true)

clone(false) => clone(false,false)=>clone()

clone(true,false) =>可以复制事件，但是不能复制动态数据

			$("li:first a").on("click",function(){
				$("li:first a").data("id","1");
				console.log($("li:first a").data("id"));
			})
			var first_clone = $("li:first").clone();
			$("ul").append(first_clone);
			//console.log(first_clone.find("a").data("id"));
			var first_clone1 = $("li:first").clone(true);
		//	console.log(first_clone1.find("a").data("index"));
			$("ul").append(first_clone1);

oldEle.warp(newEle)

用newEle元素包裹oldEle元素

wrapAll(newEle)获取到jq对象集合用一个newEle元素包裹起来

oldEle.wrapInner(newEle)

newEle元素插入oldEle元素里面

oldEle原来的子元素成为newEle的子元素

			$("p").wrap($("<div>"));
			
			/*$("li").wrapAll(function(index){
				console.log(index);
				return $("<div>")
			})*/
			$("li").wrapAll($("<div>"));
			$("li").wrapInner($("<span>"));

oldE.append(newE)

将newE元素插入到oldE元素里面的最后面

newE.appendTo(oldE)

将newE元素插入到oldE元素里面的最后面

prepend()，将内容插入到元素的最前面

prependTo()，将内容插入到元素的最前面

			$("p").append($("<span>"));
			$("<i>").appendTo($("p"));
			$("p").prepend($("<em>"));
			$("<strong>").prependTo($("p"));

html(),获取或者设置元素的内容

识别标签

text()，获取或者设置元素的内容

不识别标签

			console.log($("p").html());
			$("i").html("我是<strong>i</strong>标签")
			console.log($("i").text());
			$("i").text("我是重新设置的内容");

after()，将元素插入到目标元素的后面

before(),将元素插到目标元素前面

insertAfter()和after功能相同，语法不同

insertBefore()和before功能相同，语法不同

			$("p").after($("<p>"));
			$("p:nth-child(1)").before($("<p>"));
			$("<div>我插入到了p标签后面</div>").insertAfter($("p"));
			$("<div>我插入到了p标签前面</div>").insertBefore($("p"));

		 detach():移除目标元素，并返回该元素

			var test = $(".test").detach();
			console.log(test);
			//删除匹配到的第一个li元素
			$("li").detach("li:nth-child(1)");

empty()删除目标元素的所有子节点，返回该元素

remove()移除目标元素，数据和事件都会删除掉(detach不会)

			var ali = $("ul").empty();
			console.log(ali);
			
			$("p:nth-of-type(1)").remove();

unwrap()删除父级元素，保留自身和兄弟

			$(".two").unwrap();

replaceAll()替换所有目标元素

			$("<h1>123</h1>").replaceAll($(".two"));
			
			$("h1").replaceWith($("<div class='two'>我又回来了</div>"));

事件代理

on(type,target,func)

type:事件类型

target:点击目标

func:回调函数

			$("h2").on("click","span",function(){
				console.log(this);
			});