var $li = $("ul li:eq(1)"); //获取<ul>里的第2个<li>节点
var $p = $("p");
var p_txt = $p.attr("title"); //获取<p>元素节点属性title
2、创建节点
创建元素节点：先使用$(html)方法创建新的元素，再使用append()方法将新元素插入到文档中。
创建文本节点：在创建元素节点时直接把文本内容写出来，然后使用append()等方法将它们添加到文档中。
创建属性节点：与创建文本节点类似。
//创建元素节点
var $li_1 = $("<li></li>");
$("ul".append($li_1); //添加到<ul>节点中
//创建文本节点
var $li_2 = $("<li>足球</li>");
$("ul".append($li_2);
//创建属性节点
var $li_3 = $("<li title='篮球'>篮球</li>");
$("ul".append($li_3);
【使用原生JS方法的创建过程】
创建节点（元素/文本/属性） → 添加节点的一些属性 → 加入到文档中去
该过程涉及的方法：
创建元素：document.createElement 设置属性：setAttribute 添加文本：innerHtML 加入文档：appendChild 3、插入节点 append()：向每个匹配的元素内部追加内容。appendTo()：将所有匹配的元素追加到指定的元素。
prepend()：向每个匹配的元素内部前置内容。
prependTo()：将所有匹配的元素前置到指定的元素中。
after()：在每个匹配的元素之后插入内容。
insertAfter()：将所有匹配的元素插入到指定元素的后面。
before()：在每个匹配的元素之前插入内容。
insertBefore()：将所有匹配的元素插入到指定的元素的前面。【注】上面的方法每两个为一组，其中，$(A).append(B)的操作是将B追加到A中，prepend()、after()、before()与之类似；而appendTo()、prependTo()、insertAfter()、insertBefore()刚好与之相反。
这么来说，当看见上面的方法中带有“To”或“insert”时，可以这么理解，前面的“指向”（或是“插入”）到后面中去，即将方法前的内容添加到方法括号内的内容中去；否则相反。
再举个例子说明：
HTML代码如下：
<p id="p1"> hello </p> <p id="p2"> hi </p>
jQuery代码如下：
$("#p1").append("<b>world</b>");
$("<b>world</b>").appendTo("#p2");
不传参数时，直接删除该节点及其包含的所有后代节点。 传入参数（即一个选择器表达式）时，可以选择性地删除元素。 返回一个指向已被删除的节点的引用。 empty()：清空元素中的所有后代节点。 detach()：从DOM中去掉所有匹配的元素，但不会把匹配的元素从jQuery对象中删除。（jQuery特有） 【empty()和remove()区别】 empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点；empty不能删除自己本身这个节点。 remove()方法提供传递一个筛选的表达式，删除指定合集中的元素；该节点与该节点所包含的所有后代节点将同时被删除。
举个例子。
HTML代码如下：
<ul>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
<li title="葡萄">葡萄</li>
</ul>
jQuery代码如下：
$("ul li:eq(1)").empty(); //第二个<li>元素内容被清空，但是默认符号“·”还存在
$("ul li:eq(2)").remove();
$("ul li").remove("li[title=葡萄]");
还是用之前的例子来说明，HTML代码不变，jQuery代码如下：
$("ul li").click(function(){
alert( $(this).html() );
});
var $li1 = $("ul li:eq(1)").detach(); // 删除第二个元素，即“橘子”
$li1.appendTo("ul");//重新添加“橘子”在最后，之前绑定的事件仍然存在
var $li2 = $("ul li:eq(0)").remove(); // 删除第一个元素，即“苹果”
$li2.appendTo("ul");//重新添加“苹果”在最后，之前绑定的事件失效
继续用之前的例子。
未传入参数时，如下：
$("ul li").click(function() {
$(this).clone().appendTo('ul');//复制当前单击的节点，并把它追加到<ul>元素中
$(this).clone(true).appendTo('body');//传入参数true
});
传入参数时，如下：
$("ul li").click(function() {
$(this).clone(true).appendTo('body');//传入参数true
});
$(A).replaceWith(B)的操作是：用B替换A；而replaceAll()方法刚好相反。
我们可以这样理解，“with”理解为“用”的意思，即A是用B来替换；而“replaceAll”可以理解为A替换掉了全部的B。
【注】
replaceWith()与replaceAll()方法会删除与节点相关联的所有数据和事件处理程序。
给个例子：
<strong>这是一句简单的话。</strong> <strong>这是一句简单的话。</strong>
使用wrap()方法，代码如下：
$("strong").wrap("<b></b>"); //用<b>标签把<strong>元素包裹起来
会出现如下结果：
<b><strong>这是一句简单的话。</strong></b> <b><strong>这是一句简单的话。</strong></b>
而使用wrapAll()方法：
$("strong").wrapAll('<b></b>');
结果如下：
<b>
<strong>这是一句简单的话。</strong>
<strong>这是一句简单的话。</strong>
</b>
使用wrapInner()：
$("strong").wrapInner('<b></b>');
结果如下：
<strong><b>这是一句简单的话。</b></strong> <strong><b>这是一句简单的话。</b></strong>8、属性操作 attr()：获取和设置元素属性。
获取属性时，传递一个参数，即属性名称。 设置属性时，传递两个参数，即属性名称和对应的值。 removeAttr()：删除元素属性。
var $para = $("p"); //获取<p>节点
var p_txt = $para.attr("title"); //获取<p>元素节点属性title
$("p").attr("title", "your title"); //设置单个属性值
$("p").attr({"title": "your title", "name": "test"}); //设置多个属性
$("p").removeAttr("title"); //删除<p>元素的属性title
9、样式操作
attr()：获取和设置样式。
addClass()：追加样式。
removeClass()：移除样式。
toggleClass()：切换样式。如果类名存在则删除它，如果类名不存在则添加它。
hasClass()：判断元素中是否含有某个class。如果有，返回true，否则返回false。
10、设置和获取HTML、文本和值
html()：读取或设置某个元素中的HTML内容。可以用于XHTML文档，但不能用于XML文档。
text()：读取或设置某个元素中的文本内容。
val()：设置和获取元素的值。
11、遍历节点
children()：用于取得匹配元素的子元素集合。
next()：用于取得匹配元素后面紧邻的同辈元素。
prev()：用于取得匹配元素前面紧邻的同辈元素。
siblings()：用于取得匹配元素前后的所有同辈元素。
closest()：用于取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身，否则向上查找父元素，直到找到匹配元素，如果找不到，返回一个空对象。
parent()：用于获得集合中每个匹配元素的父级元素。
parents()：用于获得集合中每个匹配元素的祖先元素。
12、CSS-DOM操作
css()：获取元素的样式属性。
height()：获取和设置元素的高度（px）。
width()：获取和设置元素的宽度（px）。
元素定位 offset()：获取元素在当前视窗的相对偏移。返回的对象包括两个属性，即top和left。 position()：获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移。返回的对象包括两个属性，即top和left。 scrollTop()和scrollLeft()：获取元素的滚动条距顶端的距离和距左侧的距离。