jQuery中的DOM操作

一、

1、DOM是Document Object Model的缩写，即为文档对象模型。一般分为三个方面：DOM Core（核心)、HTML-DOM和CSS-DOM。

 

DOM Core :其不专属于JavaScript，任何一个Dom的程序设计语言都可以使用它，也并不是仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，eg：XML；其中的getElmentById（）；getElementByTagName（）；getAttribute（）和setAttribute（）等方法都是DOMCore的组成部分。

 

HTML_DOM在使用JavaScript和Dom为HTML文件编写脚本时，有许多专属於HTML-DOM的属性，例如document。Forms element.src等；

 

CSS_DOM是针对CSS的操作，在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性，通过改变style对象的各种属性，改变页面效果

 

2、查询和添加属性：var $para = $("p"); var p_txt =$para.attr("title")；这样就获得了此节点了title值。

而是用para.attr("title","hello");则对对象添加title属性。

 

3、创建元素节点：可以使用$("<li></li>")的的方式将字符串转换成DOM对象，可以使用$("ul").append($("<li></li>"))方式将其添加到元素中。

联想：使用js要添加节点需要使用appendChild（）的方式；

 

创建文本节点：将创建的文本节点的同标签一起创建，并append进一个父节点就可以了。

 

创建属性节点：和创建元素节点一样都是和标签一起创建并append（）到父节点下。

 

4、插入节点：

append（）：父节点.append(子节点）向父节点内部添加一个子节点。

appendTo（）：子节点.appendTo(父节点），向父节点添加一个子节点。

prepend（）:同append（），但是是插入到元素的最前面。

prependTo（）：插入到最前面，用法同appendTo（）；

after（），兄弟节点.after(要插入的兄弟节点），向该元素下插入兄弟节点；

insertAfter（）：功能同after（），颠倒了插入和要插入的顺序。

 

before（）：用法同after，但是是向兄弟节点的前面插入内容；

insertBefore（）：用法同insertAfter,功能同before；

 

 

5、在获取到一个页面中节点的时候再将其插入到另一个地方，不是复制这个节点，而是移动这个节点；

 

6、删除节点：

remove（）：要删除的元素.remove();该删除的节点的所有子元素也同时将被删除。该函数的返回值是一个指向已被删除节点的应用，说明在该删除的元素被删除后还是可以再次被使用的。例如：Var $li = $("ul li :eq(1)").remove(); $li.appendTo("ul");此过程也就是直接获取到该元素并插入到另一过程的移动该元素的过程。

empty（）方法：次方法并不是删除节点，而是清空节点，他能清空元素中的后代节点。

 

7、复制节点：

.clone()方法复制节点：将复制一个节点的整体内容，而并不是获取到该节点。

 

8、替换节点：

replaceWith()方法：将匹配的元素都替换成方法体中的HTML或者是DOM元素。

replaceAll()方法：颠倒了replaceWith的顺序，使用replaceAll的对象替换掉方法体内的内容；

 

9、包裹节点

wrap（）方法：例如：$("strong").wrap("<b></b>");是使用<b>标签将strong标签包裹起来。

wrapAll（）:不同于wrap（）方法，wrapAll是将调用方法的对象只包裹一次，而wrap是对每个对象都进行包裹；

 

wrapInner（）方法：包裹调用该方法对象的子元素；

 

10、属性操作：

1）attr（）获取和设置属性。

2）删除属性：，removeAttr（）删除属性

 

11、样式操作

 

1）获取样式和设置样式

可以使用attr方法获取某个元素的属性例如获取class,$("p").attr("class");可以获取元素的clas属性同时可以使用此方法设置其class属性，例如：$("p").attr("class","high");将原来的class替换掉而不是追加，

2）追加样式

使用addClass（）方法追加样式，添加一个class属性，而不是替换。

3）删除样式

使用removeClass（）方法可以删除clas的某个值；使用removeClass（）不传递参数则删除所有的classs属性，也可以以空格将多个属性隔开删除class属性；

4）切换样式

$(selector).toggle(speed,callback,switch)

规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。可能的值：

• 毫秒 （比如 1500）
• "slow"
• "normal"
• "fast"
• 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。如果设置此参数，则无法使用 switch参数。

•  
• $(selector).toggle（function（）{

//例如显示元素

 

},function(){

 

//例如隐藏元素

 

}）；

toggle会交替执行显示和隐藏两个函数，如果元素显示则隐藏反之，隐藏则显示。

 

另外jquery还提供了一个toggleClass（）方法，控制样式上的重复切换，如果雷鸣存在则删除它，如果类名不存在则添加它。

例如：$("p").toggleClass("another");用与交替删除和添加anther样式。

 

12、判断是否含有某个样式

hasClass（“another”）；

如果有则返回true，如果没有则返回false；此方法为了增强可读性，等同于$("p").is("anther");

 

 

二、设置和获取HTML、文本的值

1、html()方法

此方法类似于JavaScript方法，可以读取或者设置某个元素中的HTML内容。

例如：$("p").html();可以获取<p>元素的HTML代码，同时使用$("p").html("<div>hello</div>");设置<p>元素的HTML代码。

ps：html（）方法可以用于XHML文档但是不能用于XML文档。

 

2、text（）方法

此方法类似于JavaScript中的innerText（）方法。用来获取元中的文本内容。用法同html（）方法，获取和设置元素内的文本内容。

ps：innerText（）属性并不可以再Firefox上运行，但是jQuery的text（）方法支持所有的浏览器。text方法对HTML文档和XML文档都有效。

 

3、val（）犯法

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

使用$(selecter).val()；获取所选择内容的值，使用$(selector).val("请正确输入内容“）；设置选择器选中元素的值。

 

联想focus（）方法类似于JavaScript中的onfocus（）用来处理获取焦点的事件blur（）方法相当于JavaScript中的onblur（）方法，作用是处理失去焦点时的事件。

例如：$("#password").blur(function(){
};

 

可以通过val（）方法设置下拉列表和checkbox和radio相应的项被选中。通过val（）赋值时候，如果给多个赋值需要采用val（【“1”，“2”】）数组的方式。

联想：达到选中效果的情况还可以使用attr（）方法。$("[value=radio2]:radio").attr("checked,true);

 

 

三、遍历节点

1、children（）方法，用来获取匹配元素的子元素集合使用此方法获取当前元素的子元素而不考虑其他的后代元素。

2、next（）方法用于获取所得匹配元素后面相邻的同辈元素。

3、prev（）方法，该元素获取匹配元素前面紧邻的同辈元素

4、siblings（）方法用于取得匹配元素的前后所有的同辈元素；

5、closest（）方法，匹配获得最近的匹配元素，首先检查当前元素是否匹配，如果匹配则直接返回元素本身如果不匹配则向上匹配父元素，一直找下去如果没有则返回一个空的jQuery对象。

还有很多jQuery遍历节点的方法，例如find（）、filter（）、nextAll（）、prevAll（）、parent（）和parents（）等，便利DOM元素方法有一个共同点就是使用jQuery表达式作为他们的参数筛选元素。

 

四、CSS-DOM操作

1、通过css（）方法获取元素样式和设定元素样式；

例如：$("p").css("css","red");设置<p>元素的样式颜色为红色。

$("p").css("color")用来获取<p>元素的颜色。

css（）方法设置多个样式的属性：$("p").css({"fontSize":30px,"backgroundColor":"#8888"}其中样式需要用大括号各个样式包裹起来。

px：使用此方法如果值是数字将自动转化为像素值。

在css方法中，如果属性中带有“-”符号例如font-size和background-color属性的使用如果不适用引号需要用驼峰式写法携程fontSize和backgroundColor；

2、透明度：可以直接使用opacity属性，$("p").css("opacity","0.5");

3、高度:使用height（）,可以使用height（“100”）设置元素高度

宽度：weith（），用法同height（）；

4、offset（）方法，获取当前视窗的相对偏移，返回top和left，只对可见的元素有效。例如：

var offset=$("p").offset(); var left=offset.left; var top = offset.top;

 

5、position（）方法

获取元素相对于最简单额一个position样式属性设为relative或者absolute的祖父节点的相对偏移，和offset（）方法一样返回left和top；用法同offset（）；

6、scrollTop（）方法和scrollLeft（）方法，获取元素滚动条局等段的距离和距离左侧的距离，括号内传递值可以指定滚动条的位置。