jquery表示html文档对象,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=$("

在这里还能加文本"); //创建第一个元素

var $li_2=$("

在这里还能加文本"); //创建第二个元素

$("ul").append($li_1); //添加到

• 节点中

$("ul").append($li_2); //这两个连续添加，还可以采用链式写法如下：

$("ul").append($li_1).appen($li_2);

可以用同样的方法创建属性节点：

var $li_3=$("

香蕉");//元素节点，文本节点，属性节点都创建了。

(三)插入节点

(四)删除节点

1. remove方法

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

另外，remove方法也可以通过传递参数来选择性的删除。

2.detach()方法

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

3.empty()方法

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

(五)复制节点

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

(六)替换节点

replaceWith():

将所有匹配的元素都替换成指定的HTML或者DOM元素。

replaceAll():

其用法跟replaceWith一样，只是颠倒了。例如：

$("p").replaceWith("要插入的东西"); //把p中的东西替换成 要插入的东西。

$("要插入的东西").replaceAll("p"); //把 要插入的东西 换到P里边去。

(七)包裹节点

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

$("strong").warp(""); //每个元素都用标签包裹起来

$("strong").warpAll(""); //用一个标签把所有元素包裹起来

$("strong").warpInner(""); //用标签把元素里边的所有内容包裹起来

属性操作

在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()方法：这两个方法分别用于取得元素的滚动条距顶端的距离和左侧的距离。