jQuery学习笔记-----jQuery中的DOM操作

jQuery选择器
1、层次选择器

$("div span">——选取<div>里的所有的<span>元素，返回集合元素$("div>span">——选取<div>元素下元素名为<span>的子元素，返回集合元素$(".one+div">——选取class为one的下一个<div>同辈元素，返回单个元素,等价于$(".one").next("div")方法$("#two~div">——选取id为two的元素后面的所有<div>同辈元素，返回集合元素，等价于$("#two").nextALL("div")方法

注意：$("#two").siblings("div")方法与$("#two~div")区别
$("#two~div")只选择”#two”元素后面的同辈<div>元素
siblings()方法与前后位置无关，选取"#two"所有的同辈<div>元素，无论前后位置。

2、过滤选择器
（一）基本过滤选择器

$("div:first")选取所有<div>元素中第一个<div>元素，返回单个元素$("div:last")选取所有<div>元素中最后一个<div>元素，返回单个元素$("input:not(.myClass)")选取class不是myClass的<input>元素，返回集合元素$("input:even")选取索引是偶数的<input>元素，返回集合元素$("input:odd")选取索引是奇数的<input>元素，返回集合元素$("input:eq(1)")选取索引等于1的<input>元素，返回单个元素(索引从0开始算）$("input:gt(1)")选取索引大于1的<input>元素，返回集合元素$("input:lt(1)")选取索引小于1的<input>元素，返回集合元素$(":header")选取网页中所有的<h1>,<h2>,<h3>.....，返回集合元素$("div:animated")选取正在执行动画的<div>元素，返回集合元素$(":focus")选取当前获取焦点的元素，返回集合元素

（二）内容过滤选择器

$("div:contains('我')")选取含有文本“我”的<div>元素，返回集合元素$("div:empty")选取不包含子元素（包括文本元素）的<div>空元素，返回集合元素$("div:has('p')")选取含有<p>元素的<div>空元素，返回集合元素$("div:parent")选取拥有子元素（包括文本元素）的<div>元素，返回集合元素

（三）可见性过滤选择器

$(":hidden")选取所有不可见元素。包括<input type="hidden">,<div style="display:none">和<div style="visibility:hidden;">等元素。如果只想选取<input>元素，可以使用$("input:hidden"),返回集合元素$("div:visible")选取所有可见的<div>元素,返回集合元素

（四）属性过滤选择器

$("div[id]")选取拥有属性id的<div>元素，返回集合元素$("div[title=test]")选取拥有属性title为"test"的<div>元素，返回集合元素$("div[title!=test]")选取拥有属性title不等于"test"的<div>元素，返回集合元素（注意：没有属性title的<div>元素也会被选取）$("div[title^=test]")选取属性title以"test"开始的<div>元素，返回集合元素$("div[title$=test]")选取属性title以"test"结束的<div>元素，返回集合元素$("div[title*=test]")选取属性title含有"test"的<div>元素，返回集合元素$('div[title|="en"]')选取属性title等于en或以en为前缀（该字符串后跟一个连字符‘-')的元素，返回集合元素$('div[title~="uk"]')选取属性title用空格分隔的值中包含字符uk的元素，返回集合元素$("div[id][title$='test']")选取拥有属性id,并且属性title以"test"结束的<div>元素，返回集合元素。

（五）子元素过滤选择器

:nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素(索引从1开始算），返回集合元素。$("ul li:first-child")选取每个<ul>中的第1个<li>元素，返回集合元素。$("ul li:last-child")选取每个<ul>中的最后一个<li>元素，返回集合元素。$("ul li:only-child")在<ul>中选取是惟一子元素的<li>元素，返回集合元素。

（六）表单对象属性过滤选择器

:enabled选取所有可用元素，返回集合元素。:disabled选取所有不可用元素，返回集合元素。:checked选取所有被选中的元素（单选框，复选框），返回集合元素。:selected选取所有被选中的选项元素（下拉列表），返回集合元素。

（七）表单选择器

:input选取所有的<input>、<textarea>、<select>和<button>元素，返回集合元素。:text选取所有的单行文本框，返回集合元素。:password选取所有的密码框，返回集合元素。:radio选取所有的单选框，返回集合元素。:checkbox选取所有的多选框，返回集合元素。:submit选取所有的提交按钮，返回集合元素。:image选取所有的图像按钮，返回集合元素。:reset选取所有的重置按钮，返回集合元素。:button选取所有的按钮，返回集合元素。:file选取所有的上传域，返回集合元素。:hidden选取所有不可见元素，返回集合元素。

DOM操作
1、查找节点
（一）查找元素节点

var Oli=$("ul li:eq(1)");     //获取<ul>里第2个<li>节点var li_txt=Oli.text();           //获取第2个<li>元素节点的文本内容

（二）查找属性节点

var Op=$("p");                   //获取<p>节点var Otit=Op.attr("attr");     //获取<p>元素节点属性title

2、创建节点
（一）创建元素节点

var Oli=$("<li></li>");   //创建1个<li>元素$("ul").append(Oli);    //添加到<ul>节点中，使之能在网页中显示创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。jQuery 代码:// 在 IE 中无效:$("<input>").attr("type", "checkbox");// 在 IE 中有效:$("<input type='checkbox'>");创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。jQuery 代码:$("<input>", {  type: "text",  val: "Test",  focusin: function() {    $(this).addClass("active");  },  focusout: function() {    $(this).removeClass("active");  }}).appendTo("form");

（二）创建文本节点

var Oli=$("<li>香蕉</li>");   //创建一个<li>元素，包括元素节点和文本节点$("ul").append(Oli);    //添加到<ul>节点中，使之能在网页中显示

(三）创建属性节点

var Oli=$("<li title="香蕉">香蕉</li>");   //创建一个<li>元素，包括元素节点、文本节点和属性节点$("ul").append(Oli);    //添加到<ul>节点中，使之能在网页中显示

3、插入节点

append()    向每个匹配的元素内部追加内容appendTo()  将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中prepend()   向每个匹配的元素内部前置内容prependTo()  将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中after() 在每个匹配的元素之后插入内容insertAfter() 将所有匹配的元素插入到指定的元素后。实际上，使用该方法是颠倒了常规的$(A).after(B)的操作，即不是将B插入到A后面，而是将A插入到B后面before() 在每个匹配的元素之前插入内容insertBefore()  将所有匹配的元素插入到指定的元素前面。实际上，使用该方法是颠倒了常规的$(A).before(B)的操作，即不是将B插入到A前面，而   是将A插入到B前面

4、删除节点

（一）remove()方法(当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时删除）var Oli=$("ul li:eq(1)").remove();    //获取第2个<li>元素节点后，将它从网页中删除Oli.appendTo("ul");            //把刚才删除的节点又重新添加到<ul>元素里（二）detach()方法（所有绑定的事件、附加的数据等都会保留下来）var Oli=$("ul li:eq(1)").detach();   //删除元素Oli.appendTo("ul");      //重新追加此元素，发现它之前绑定的事件还在，如果使用remove()方法删除元素的话，那么它之前绑定的事件将失效（三）empty()方法（该方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点）$("ul li:eq(1)").empty();   //获取第2个<li>元素节点后，清空此元素里的内容，注意是元素里。

5、复制节点

（一）clone()方法$("ul li").click(function(){        $(this).clone().appendTo("ul");      //复制当前单击的节点，并将它追加到<ul>元素})

6、替换节点
(一）replaceWith()方法

$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>");     //将<p>替换成<strong>

（二）replaceAll()方法

$("<strong>你最不喜欢的水果是？</strong>").replaceAll("p");    //将<p>替换成<strong>

7、包裹节点
（一）wrap()方法，将所有的元素进行单独包裹

$("strong").wrap("<b></b>");     //用<b>标签把<strong>元素包裹起来

（二）wrapAll()方法，用一个元素来包裹

$("strong").wrapAll("<b></b>"); 

（三）wrapInner()方法，将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

$("strong").wrapInner("<b></b>"); <strong>          <b></b></strong>

8、属性操作
（一）获取属性和设置属性

$("p").attr({"title":"your title","name":"test"})    //将一个“名/值"形式的对象设置为匹配元素的属性同类：html()、text()、height()、width()、val()、css()等方法

（二）删除属性

$("p").remove("title");    //删除<p>元素的属性title

$("img").removeAttr("src");     //将文档中图像的src属性删除从每一个匹配的元素中删除一个属性1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);1.7版本在IE6下已支持删除disabled。

9、样式操作
（一）获取样式和设置样式

var p_class=$("p").attr("class");      //获取<p>元素的class$("p").attr("class","high");     //设置<p>元素的class为"high"

（二）追加样式addClass()方法

$("p").addClass("another");     //给<p>元素追加"another"类

(三）移除样式removeClass()方法

$("p").removeClass("another");             //移除<p>元素中值为"high"的class $("p").removeClass("another high");          //可以以空格的方式删除多个class名

(四）切换样式toggleClass()方法

$("p").toggleClass("another")      //重复切换类名"another“当单击"切换样式“按钮后，<p>元素的HTML代码由<p class="myClass">水果</p>变为<p class="myClass another">水果</p>当再次单击"切换样式“按钮后，<p>元素的HTML代码又返回原来的状态<p class="myClass">水果</p>

(五）判断是否含有某个样式hasClass()

hasClass()可以用来判断元素是否含有某个class,如果有，则返回true,否则返回false$("p").hasClass("another");    //判断<p>元素中是否含有"another“的class，$("p").is(".another");    //二者等价

10、设置和获取HTML、文本和值
（一）html()方法（用于XHTML文档，不能用于XML文档）

var p_html=$("p").html();        //获取<p>元素的HTML代码$("p").html("<b>水果</b>");      //设置<p>元素的HTML代码

（二）text()方法（用于读取或者设置某个元素的文本内容）

var p_text=$("p").text();         //获取<p>元素的文本内容$("p").text("水果");              //设置<p>元素的文本内容

（三）val()方法（类似于js的value属性，可以用来设置和获取元素的值，无论元素是文本框，下拉列表还是单选框，都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组）

$("input").value();       //获取文本框的值$("input").value("请输入姓名");     //设置内容$("input").value("");       //清空文本框内容

11、遍历节点

（一）children()方法，用于取得匹配元素的子元素集合，只考虑子元素而不考虑其他后代元素

var $body=$("body").children();     //$body.length为2var $p=$("p").children();        //$p.length为0var $ul=$("ul").children();      // $ul.length为3

（二）next()方法，用于取得匹配元素后面紧邻的同辈元素

var $p=$("p").next();      //取得紧邻<p>元素下一个同辈元素节点是<ul>

（三）prev()方法，用于取得匹配元素前面紧邻的同辈元素

var $ul=$("ul").prev();       //取得紧邻<ul>元素 的上一个同辈节点是<p>

（四）siblings()方法用于取得匹配元素前后所有的同辈元素

$(".level>a").click(function(){         $(this).addClass("current")       //给当前元素添加"current"样式                   .next().show()         //下一个元素显示                   .parent().siblings().children("a").removeClass("current")                                                  //父元素的兄弟元素的子元素<a>移除"current"样式                   .next().hide();                   return false;});

（五）closest()用于取得最近的匹配元素，首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

$(document).bind("click",function(e){  $(e.target).closest("li").css("color","red");})       //给点击的目标元素的最近的li元素添加颜色

（六）parent()，parents()，closest()的区别
1、parent()方法从指定类型的直接父节点开始查找。parent()返回一个元素节点

$('.item').parent().css('background-color','red');

2、parents()方法查找方式同parent()方法类似，不同点在于，当它找到第一个父节点时并没有停止查找而是继续查找，最后返回多个父节点

$('.item').parents('ul').css('background-color','red');

3、closest()方法查找是从包含自身的节点找起，它同parents()方法类似，不同点就在于它只返回匹配的第一个元素节点

$('.item').closest('ul').css('background-color','red');

（七）is()方法
is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。
.is(selector) //selector是字符串值，包含匹配元素的选择器表达式

12、index()方法
index() 方法返回指定元素相对于其他指定元素的 index 位置，注释：如果未找到元素，index() 将返回 -1。
（1）第一个匹配元素的 index，相对于同胞元素，获得第一个匹配元素相对于其同胞元素的 index 位置。
语法：$(selector).index()

（2）元素的 index，相对于选择器，获得元素相对于选择器的 index 位置。该元素可以通过 DOM 元素或 jQuery 选择器来指定。
语法：$(selector).index(element)

13、CSS-DOM操作
（一）css()方法获取和设置元素样式

$("p").css("color");      //获取<p>元素的样式颜色$("p").css({"fontSize":"30px","backgroundColor":"#888888"})     //设置<p>元素的字体大小和背景颜色

（二）height()方法用来设置元素的高度和获取高度,width()同理

$("p").height();     //获取<p>元素的高度值$("p").height(100);    //设置<p>元素的高度值为100px$("p").height("10em");  //设置<p>元素的高度值为10em

注意：css()方法获取的高度值与样式的设置有关，可能会得到”auto”,也可能得到”10px”之类的字符串；而height()方法获取的高度值则是元素在页面中的实际高度，与样式设置无关，并且不带单位

（三）innerHeight()方法
获取第一个匹配元素内部区域高度（包括补白、不包括边框）。
此方法对可见和隐藏元素均有效。

（四）outerWidth()方法
获取第一个匹配元素外部宽度（默认包括补白和边框）。
此方法对可见和隐藏元素均有效。

（五）offset()方法用于获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left,它只对可见元素有效

var offset=$("p").offset();         //获取<p>元素的offset()var left=offset.left();     //获取左偏移var top=offset.top();   //获取上偏移

（六）position()方法获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包含两个属性，即top和left

var position=$("p").position();         //获取<p>元素的offset()var left=position.left();     //获取左偏移var top=position.top();   //获取上偏移

（七）scrollTop()方法与scrollLeft()分别是获取元素的滚动条距顶端的距离和距左侧的距离。

var $p=$("p");var  scrollTop=$p.scrollTop()     //获取元素的滚动条距顶端的距离var scrollLeft=$p.scrollLeft()        //获取元素的滚动条距左侧的距离

14、each()方法
each(callback)方法以每一个匹配的元素作为上下文来执行一个函数。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。

callback：function 对于每个匹配的元素所要执行的函数
如果你想得到 jQuery对象，可以使用 $(this) 函数。

15、size()方法
size()、length指的是jQuery 对象中元素的个数

16、get(index)方法
get(index)取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。(this).get(0)与(this)[0]等价。

[index]取得第 index 个位置上的元素
get()取得所有匹配的 DOM 元素集合。

17、filter(expr)和find()
filter(expr):筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。
find():会在元素内寻找匹配元素，而filter()则是筛选元素。一个是对它的子集操作，一个是对自身集合元素进行筛选。

18、map()
.map()的语法与.each()方法类似，它接收两个参数，第一个参数是一个数组对象或者类似于数组的对象，第二个参数是一个回调函数，根据Jquery的文档，该回调函数是“对每一个元素项进行处理的函数”，该回调函数接收两个参数，第一个参数是当前元素的值，第二个参数是当前元素在数组中的索引。

19、trim()
.trim()方法用于移除字符串首尾的空格字符

var phrase1="     1.Either this wallpaper goes      ";var phrase2="    or I go.           "var quote=$.trim(phrase1)+" "+$.trim(phrase2);