对DOM的操作包插：增、删、改、查。
使用jQuery查找节点非常容易，通过jQuery选择器完成。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jQuery/jquery-3.1.0.js"></script>
</head>
<body>
<p title="选择你最喜欢的水果.">你最喜欢的水果是？</p>
<ul>
<li title='苹果'>苹果</li>
<li title='桔子'>桔子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
</html>
var $li = $("ul li:eq(1)");
var li_txt = $li.text();
使用以上2条语句就能查找ul里第2个li元素，然后获取这个li元素的文本内容。
var $para = $("p");
var p_txt = $para.attr("title");
使用以上2条语句就能查找p元素，然后获取这个元素里的title属性内容。
创建节点也很简单：$(html），使用这条语句就能创建节点。比如
$("<li></li>")，
这样就创建了li元素节点。只是在DOM操作中创建节点还不够，如果想要在网页中显示了来，还需要将创建的节点插入到网页DOM中。
- append()，向每个匹配的元素内部追加内容
- appendTo()，将所有匹配的元不追加到指定的元素中
- prepend()，向每个匹配的元素内部前置内容
- prependTp()，将所有匹配的元素前置到指定的元素中
- after(), 在每个构配的元素之后插入内容
- insertAfter(), 将所有匹配的元素插入到指定元素的后面
- before()，在每个匹配的元素之前插入内容
- insertBefore()，将所有匹配的元素插入到指定的元素之前
jQuery提供了3种删除元素的方法，分别是remove,detach,empty。
- remove()， 作用是从DOM中删除所匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。
$("ul li:eq(1)").remove()//获取第2个li元素后，将它从网页中删除
当某个节点用remove方法删除后，该节点所包含的后代节点将同时删除。这个方法返回值是一个指向已被删除的节点的引用，因此还可以在以后再使用这些元素。
remove方法还可以接收参数来选择性地删除元素
$("ul li").remove("li[title!=菠萝]");//将li元素中属性title不等于i波萝的li元素删除
-
detach（）,用法和remove一样，但是区别就是所有邦定的事件、附加的数据等都保留下来，而remove方法之前绑定的事件会失效。
-
empty()， 这个方法只是清空节点，能清空节点元素的所有后代节点。
$("ul li:eq(1)").empty();//获取第2个li元素节点后，清空此元素的内容。
用上面的语句清空节点之后，元素里的内容清除了，但是li元素还是在文档中的。
jQuery中还可以使用chone方法复制节点。
$("ul li").click(function(){
$(this).clone(true).appendTo("ul");
});
clone方法接收一个bool类型参数，如果为false或为空表示不复制所绑定的事件，如果为true则表示复印事件。
jQuery提供了2个替换节点的方法：replaceWith()和replaceAll()。
$("p").replaceWith("<strong>你最不喜欢的水果是</strong>");
replaceAll和replaceWith作用相同，只是颠倒了操作后者的操作。替换后，原节点的事件会消失。
jQuery提供3个包裹节点的方未能。所谓的包裹节点意思是原来的html是这样：<p>测试</p>，现在想在p元素之外加上div变成这样:<div><p>测试</p></div>，这就是把p节点用div元素包裹了。
这3个方法分别为:wrap(), wrapAll(),wrapInner()。
像上面这个例子就可以这么写：
$("p").wrap("<div></div>");
wrapAll会把所有匹配的节点用一个标签包裹起来，而wrap会把所在匹配的节点单独包裹一个标签。
wrapInner会把匹配的节点里的的子元素用包裹起来
$("p").wrapInner("<div></div>")
产生的结果就是
<p><div>测试</div></p>
对DOM节点的增删改查差不多就以上这些。接下来讲讲对具体的节点的操作。
- 获取属性和设置属性
var $para = $("p);
var p_txt = $para.attr("title");
以上代码获取属性,如果要设置性性也用这个方法只是需要传入多个参数。
$("p").attr("title", "your title");
如果要一次性设置多个属性，则传入一个对象。
$("p").attr({"title" : "your title", "name" : "your name" });
删除属性使用removeAttr方法
$("p").removeAttr("title");
如果我们另外定义了一个class样式，那么也可以用attr方法来设置节点的class，间接设置了样式。但是attr方法只能替换样式，如果要追加样式那就需要用jQuery另外给我们提供的方法：addClass()
$("p").addClass("another")
如果p元素原来有一个样式，那么就会再添加一个，而不会替换。
同样也可以移除样式
$("p").removeClass("another")
如果要移除多个样式，那么每个class名移增加空格就可以
$("p").removeClass("one another")
同时移除了one 和 another两个样式。
jQuery还提供了切换样式的方法：toggleClass();如果这个方法里传递的class已经存在则删除它，如果不存在则添加它.
$("p").toggleClass("another")
如果another样式不存在，则和addClass效果一样；如果已经存在，则和removeClass效果一样。
如果要判断一个样式是不是存在就要调用hasClass()方法，返回值为true或false
$("p").hasClass("another");
接下来介绍jQuery中的如果获取html，文本的方法，比如网页上有如下的节点：
<p title="选择你最喜欢的水果"><strong>选择你最喜欢的水果是？</strong></p>
然后用html()方法进行操作
var p_html = $("p").html();
alert(p_html);
那么会显示<strong>选择你最喜欢的水果是？</strong>这一段话。
如果把html方法替换成text方法，则会显示选择你最喜欢的水果是？这一段话。
html和text方法如果传递进参数，则表示把元素设置成参数里的字符串。
如查要获取各种表单元素的值，可以使用jQuery的val()方法。
$("this").val();//其中this表示一个文本框或者密码框
$("this").val("设置元素");
跟html(),text()方法一样也可以设置或者获取文本框或密码框的值。
val方法还可以获取下拉列表，单选框的值，如果元素为多选，则返回一个包含所有选择的值的数组。
要设置下拉列表的选项：
$("#single").val("选择值");
设置多选框的值：
$("#multiple").val(["choise1","choise2"]);//以数组的形式赋值
同样，设置多选框和单选框：
$(":checkbox").val(["check1","check2"]);
$(":radio").val(["radio2"]);
选择一个节点，如果要获取这个节点的子元素的集合，可以使用jQuery的children()方法。
var $ul = $("ul").children();
这个方法只考滤子元素而不考虑子元素下面的元素，返回的是一个jQuery对象的数组。
获取某个节点相邻的下一个节点使用next()方法。
获取某个节点相邻的前一个节点使用prev()方法。
获取前后所有的同辈节点使用siblings()方法
closest()方法用于获取最近的匹配元素。首先查找自身是否匹配，如果匹配直接返回自身，如果不匹配则向上查找父元素，逐级向上查找直到匹配为止，如果都不匹配则返回空。
parent()方法返回每个匹配元素的父级元素
parents()方法返回匹配元素的所有祖先元素
css()方法可以直接读取和设置节点中的样式。
$("p").css("color");//获取p元素的颜色。
$("p").css("color", "red");//设置p元素的颜色为红色。
如果设置css样式时的值为数字，则会直接转化为像素值。css中的一些属性带有-符号，比如background-color，设置时可以写成background-color或者backgroundColor。
获取元素的高度或者宽度可以使用以下两种方法：
$("element").css("height");
$("element").height();
两者的区别是第1种方法设置的高度与样式设置有关，可能会得到auto或者15px之类的字符串，而height()方未能获取的高度是元素在页面中的实际高度。
与height()方法相对应的是width()方法。这2个方法获取到的是数字且不带单位，单位都是像素也就是px。
jQuery还提供获取元素所在位置的功能：offset()和position()方法
var offset = $("p").offset();//当前元素在当前窗口的偏移量
var left = offset.left;//获取左偏移量
var top = offset.top;//获取上偏移量
var position = $("p").position();//当前元素在最近一个position样式属性设置为relative或者absolute父节点的相对偏移
var left = position.left;
var top = position,top;
scrollTop()和scrollLeft()方法获取元素的滚动条距顶端和距左端的距离，如果指定一个参数，可以控制元素的滚动条滚动到指定位置。
网友评论