jQuery中的DOM操作

一、DOM操作

1、DOM操作的分类：

DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()

HTML-DOM：用于处理HTML文档，如document.forms

CSS-DOM：用于操作CSS，如element.style.color="green"

jQuery对js中的DOM操作进行l了封装。

jQuery中的DOM操作:

• 样式操作
• 内容及Value值操作
• 节点操作
• 节点属性操作
• 节点遍历操作
• CSS-DOM操作

2、样式操作

使用css()为指定的元素设置样式值或获取样式值。

代码如下：

$(this).css("border","5px solid #f5f5f5");        //对单个属性设置

或者

$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});
//对多个属性进行设置，可以使用{}形式

追加样式

$(selector).addClass(“red”);    //追加单个样式名

或者：

$(selector).addClass(class1 class2 … classN)；//追加多个样式，中间用空格隔开

移除样式

$(selector).removeClass("red") ;

或者

 $(selector).removeClass("class1 class2 … classN ") ;//移除多个样式

切换样式

toggleClass()；

相当于addClass()与removeClass()实现样式切。

判断样式是否存在

hasClass( )：方法来判断是否包含指定的样式

如下：

$(“top”). hasClass(“blue”);

//判断元素top中是否存在样式blue

3、内容操作

jQuery中的内容操作有：HTML代码操作，标签内容操作，属性值操作。

HTML代码操作：

html()可以对HTML代码进行操作，类似于JS中的innerHTML。

代码如下：

$("div.left").html();        //获取元素中的html代码

或者

$("div.left").html("<div class='content'>…</div>")//设置元素中的html代码

标签内容操作

$("div.left").text();//获取元素中的文本内容

或者

$("div.left").text("<div class='content'>…</div>");//设置元素中的文本内容

html()和text()方法的区别

语法格式	参数说明	功能描述
html( )	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html(content)	content为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text( )	无参数	用于获取所有匹配元素的文本内容
text (content)	content为元素的文本内容	用于设置所有匹配元素的文本内容

 属性值操作

val()可以获取或设置元素的value属性值。

代码如下：

$(this).val();//获取元素中的val属性值

或者   

 $(this).val(value)//设置元素中的val属性值

4、节点操作

jQuery中的节点操作

•  查找节点

• 创建节点

• 插入节点

• 删除节点

• 替换节点

• 复制节点

查找节点：

jQuery.parent()           //找父元素

jQuery.parents()          //找到所有祖先元素，不限于父元素

jQuery.children()         //查找所有子元素，只会找到直接的子节点，不会返回子级的子节点

jQuery.contents()         //查找下面的所有内容，包括节点和文本。

jQuery.prev()                //查找上一个兄弟节点，不是所有的兄弟节点

jQuery.prevAll()             //查找所有之前的兄弟节点

jQuery.next()                //查找下一个兄弟节点，不是所有的兄弟节点

jQuery.nextAll()             //查找所有之后的兄弟节点

jQuery.siblings()            //查找兄弟节点，不分前后

jQuery.find(“p”)            //查找所有的p元素，也就是找后代，返回的是所有的子级元素

创建节点元素

工厂函数$()：用于获取或创建节点

$(selector)：通过选择器获取节点

$(element)：把DOM节点转化成jQuery节点

$(html)：使用HTML字符串创建jQuery节点

插入子节点（父级与子级）

append(content)	$(A).append(B)表示将B追加到A中 如：$("ul").append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中 如：$newNode1.appendTo("ul");
prepend(content)	$(A). prepend (B)表示将B前置插入到A中 如：$("ul"). prepend ($newNode1);
prependTo(content)	$(A). prependTo (B)表示将A前置插入到B中 如：$newNode1. prependTo ("ul");

插入同级节点（子级与子级）

语法	功能
after(content)	$(A).after (B)表示将B插入到A之后 如：$("ul").after($newNode1);
insertAfter(content)	$(A). insertAfter (B)表示将A插入到B之后 如：$newNode1.insertAfter("ul");
before(content)	$(A). before (B)表示将B插入至A之前 如：$("ul").before($newNode1);
insertBefore(content)	$(A). insertBefore (B)表示将A插入到B之前 如：$newNode1.insertBefore("ul");

删除节点

remove()：删除整个节点，整个节点全部删除点

empty()：清空节点内容，还会有原来的空白

detach()：删除整个节点，保留元素的绑定事件

替换节点

replaceWith()和replaceAll()用于替换某个节点

复制节点

clone()用于复制某个节点

$(“p”).clone([includeEvents]) ;

//复制p元素,[]是可选可不选，可以设置true或者false,true为复制，false为不复制，默认是不复制，
如果是true,就代表将前面所有的文本，事件都复制过来

5、属性操作

获取与设置元素属性使用attr()

$(selector).attr([name]) ;        //获取属性值

或者

$(selector).attr({[name1:value1]…[nameN:valueN]}) //设置多个属性值

删除元素属性

//语法
$(selector).removeAttr(name) ;


如下：
$("img").removeAttr("alt");//删除img里面的alt属性

6、节点遍历

• 遍历子元素
• 遍历同辈元素
• 遍历前辈元素
• 其他遍历方法

遍历子元素

children()方法可以用来获取元素的所有子元素

$("li").children("p");

//选取li下面的的子元素p,但不包括p的子元素

遍历同级元素

next([expr])	用于获取紧邻匹配元素之后的元素 $("li:eq(1)").next().addClass("orange");
prev([expr])	用于获取紧邻匹配元素之前的元素 $("li:eq(1)").prev().addClass("orange");
slibings([expr])	用于获取位于匹配元素前面和后面的所有同辈元素 $("li:eq(1)").siblings().addClass("orange");

遍历父级，祖先级元素

parent()：获取元素的父级元素

parents()：元素元素的祖先元素

代码如下：

//将下标为1的li元素的父级，添加样式orange
$("li:eq(1)").parent().addClass("orange");    


//将下标为1的li元素的组先级，添加样式orangge
 $("li:eq(1)").parents().addClass("orange");

其他遍历方法

each( ) ：规定为每个匹配元素规定运行的函数，相当于循环

$(selector).each(function(index,element)) ;

//index为当前元素的下标，element为当前的元素

7、CSS-DOM操作

    除css()外，还有获取和设置元素高度、宽度等的样式操作方法

语法	功能
css()	设置或返回匹配元素的样式属性
height([value])	设置或返回匹配元素的高度
width([value])	设置或返回匹配元素的宽度
offset([value])	返回以像素为单位的top和left坐标。仅对可见元素有效
offsetParent( )	返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
position( )	返回第一个匹配元素相对于父元素的位置
scrollLeft([position])	参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([position])	参数可选。设置或返回匹配元素相对滚动条顶