jQuery对象+选择器+DOM操作

一、jQuery对象和DOM对象

---

(一)DOM对象

DOM(Document Object Model)，即文档对象模型，DOM可以表示成一棵树。DOM对象就是原生JavaScript中通过getElementById或者getElementByTagName来获取DOM树节点  得到的对象。DOM对象可以使用JavaScript中的方法，如innerHTML。  

（二）jQuery对象

jQuery对象是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery中独有的，他可以 使用  jQuery中的方法，如html()。 

（三）jQuery对象和DOM对象 相互转换
1..jquery对象转为DOM对象

jquery对象不能使用DOM中的方法，如果不得不使用DOM中的方法时，就需要将jquery对象转换成DOM对象。jquery提供了两种方法，即：[index]和get(index)

• jquery对象是一个类似数组的对象，可以通过[index]的方法得到对应的DOM对象

var $obj = $("#chk");//jquery对象var obj = $obj[0];//DOM对象alert(obj.checked);//检测是否选中

• 另一种方法是jquery本身提供的，通过get(index)方法得到对应的DOM对象

var $obj = $("#chk");//jquery对象var obj = $obj.get(0);//DOM对象alert(obj.checked);//检测是否选中

2.DOM对象转成jquery对象

只需要用()把DOM对象包装起来，就可以获得一个jquery对象了，方式为$()把DOM对象包装起来，就可以获得一个jquery对象了，方式为$(DOM对象)

var obj = document.getElementById("chk");//DOM对象var $obj = $(obj);//jquery对象

注意：DOM对象才能使用DOM中的方法，jquery对象不可以使用DOM中的方法。

二、jQuery选择器

---

（一）基本选择器

（二）层次选择器

后代元素和子元素的区分 后代元素指之后的所有元素  子元素是之后的元素   

eg:张三和父亲、爷爷的关系
爷爷的后代元素是张三和父亲
爷爷的子元素是父亲

（三）过滤选择器

基本过滤选择器   

内容过滤   

    可见性过滤   

    属性过滤   

    子元素过滤

表单对象属性过滤选择器   

三、jQuery的DOM操作

---

DOM操作的分类：一般来说DOM操作分为3个方面：DOM Core，DOM-THML和DOM-CSS.

• DOM Core
  DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。
  JavaScript中的：getElementById(), getElementByName(),getAttribute和setAttribute()等方法都是DOM Core的组成部分。

• HTML_DOM：
  使用JavaScript为HTML编写脚本的时候，有许多专属于HTML-DOM的属性。

• CSS_DOM：
  CSS-DOM是针对CSS的操作。在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出不同的效果。

jQuery的DOM操作

节点操作

（一）查找节点

• 查找元素节点

var $li = $("ul li:eq(1)");    //获取ul里的第二个li节点

• 查找属性节点

  使用attr()方法 ，参数可以是一个，也可以是两个  

var $para = $("p");var p_txt = $para.attr("title");   //获取p元素节点属性title

(二)创建节点

$()的作用是创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回

• 创建元素节点
• 创建文本节点
• 创建属性节点

使用$(html)来创建元素节点，并使用append()来插入，在元素中可以加入文本，例如：var $li_1=$("<li>在这里还能加文本</li>");  //创建第一个元素var $li_2=$("<li>在这里还能加文本</li>"); //创建第二个元素$("ul").append($li_1);  //添加到<ul>节点中$("ul").append($li_2);  //这两个连续添加，还可以采用链式写法如下：$("ul").append($li_1).appen($li_2); 可以用同样的方法创建属性节点：var $li_3=$("<li title="香蕉">香蕉</li>");//元素节点，文本节点，属性节点都创建了。

（三）插入节点

（四）删除节点

1. remove方法

从DOM中删除所有匹配的元素，出入的参数根据jQuery选择器来筛选。当某个节点用remove()方法删除后，该节点所包含的的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后使用这些元素，这样可以先删除再插入，实现元素移动。
另外，remove方法也可以通过传递参数来选择性的删除。

2.detach()方法   

从DOM中去掉所有匹配的元素，这个方法不会把元素从jQuery对象中删除，所有绑定的事件、附加的数据都会保留下来

3.empty()方法  

严格来讲，empty方法并不是删除节点而是清空节点。他能清空选定元素中所有的内容，把该元素变成一个空元素。

（五）复制节点

使用clone()方法来复制元素，需要注意的是，默认复制出来的元素不具有任何行为。可以通过传入参数clone(true)，使得复制出来的新元素也有事件行为。

（六）替换节点

• replaceWith():
  将所有匹配的元素都替换成指定的HTML或者DOM元素。
• replaceAll():
  其用法跟replaceWith一样，只是颠倒了。例如：

$("p").replaceWith("要插入的东西</br>");     //把p中的东西替换成   要插入的东西</br>。$("要插入的东西</br>").replaceAll("p");   //把  要插入的东西</br>   换到P里边去。

（七）包裹节点

若要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap()和warpAll()还有warpInner(）。该方法对于需要在文档中插入额外的结构化标记非常有用，而且它不会破坏原始文档的语义。例如：

$("strong").warp("<b></b>");   //每个<strong>元素都用<b>标签包裹起来$("strong").warpAll("<b></b>");   //用一个<b>标签把所有<strong>元素包裹起来$("strong").warpInner("<b></b>");   //用<b>标签把<strong>元素里边的所有内容包裹起来

属性操作

在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。

var p_txt = $("p").attr("属性名")$("p").attr("属性名","属性值");   //设置p元素属性值$("p").attr({"属性1名":"属性1值","属性2名":"属性2值","属性3名":"属性3值"}); //当有多个需要设置时$("p").removeAttr("属性名");  //删除p元素的属性 

样式操作

（一）获取样式和设置样式

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

(二)追加样式

addClass()来给对象追加一个class，而不替换原有的。

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

若p元素同时拥有两个class值
（1）给一个元素添加了多个class值，那么相当于合并了他们的样式
（2）若前后两个class设置同一属性，则后者覆盖前者。

（三）移除样式

$("p").removeClass("high");    //移除值为"high"的class

(四)切换样式

jQuery提供了toggleClass()方法控制样式的重复切换。如果类名存在就删除它，如果不存在就添加它。在两个类名之间切换

$("p").toggleClass("another");    //重复切换类名"another"

当不断单击按钮时，p元素的class值就会在"myClass"和"myClass another"之间重复切换   

（五）判断是否含有某个样式

hasClass()方法用来判断是否含有某个样式，若有返回true，否则放回false。  

设置和获取HTML，文本和值

1.html()方法：此方法类似于innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。当无参数时获取内容，有参数时修改内容。
注意：html()方法可以用于XHTML文档，但不能用于XML文档。

2.text()方法：此方法类似于innerText属性，可以用来读取或者设置某个元素中的文本内容。无参数时获取，有参数时修改。text()方法对XHTML文档和XML文档都有效。

3.val()方法：用来获取或者修改input元素中的value属性。
该方法配合焦点事件，可以实现输入框中获得焦点之后提示消失，失去焦点之后提示出现的效果。

$(this).val();   //得到value值   $(this).val("请输入");    //设置value值

遍历节点（重点掌握）

（一）childern()方法

该方法用于取得匹配的子元素的集合。注意这里只是儿子辈的，不包括再往下的元素。 

（二）next()方法

取该元素的后一个同级元素。 

(三)prev()方法

取该元素的前一个同级元素。 

（四）sibling()方法

取该元素前后所有的同级元素，相当于反选。 

（五）closest()方法

向上取得最近的匹配元素。首先检查当前元素是否匹配，匹配则返回它本身。若不匹配则向上查找 其父元素，逐级向上直到找到匹配的元素。若什么都没找到则返回一个空的jQuery对象。 

CSS-DOM

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。style属性很有用，但最大的不足是无法通过它来提取到通过外部CSS设置的样式信息，而在jQuery中这些都非常简单，可以直接用css()方法来获取元素的样式属性。

$("p").css("color");     //获取元素的样式颜色$("p").css("color"，"red");     //将元素的样式颜色设置为红色$("p").css({"backgroundColor":"red","font-size":"30px"});     //设置元素的多个样式

下面说几个CSS-DOM中常用的方法： 

1.offset()方法：用于获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。
2.position()方法：用于获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回对象包含两个属性，即top和left。
3.scrollTop()方法和scrollLeft()方法：这两个方法分别用于取得元素的滚动条距顶端的距离和左侧的距离。