使用jQuery快速高效制作网页交互特效---使用jQuery操作DOM

DOM操作分类

1、DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() 
2：HTML-DOM：用于处理HTML文档，如document.forms

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

jQuery中的DOM操作

样式操作

1、设置和获取样式值

语法：

$(selector).css(name,value)

或者

$(selector).css({name:value,name:value,name:value...})

CSS属性值的方法

语法：

$(selector).css(name)

2、追加样式和移除样式

追加样式：

语法：
$(selector).addClass(class);

或
$(selector).addClass(class1 class2 … classN);

移除样式：

语法：
$(selector).removeClass(“class”) ;

或
$(selector).removeClass(“class1 class2 … classN “) ;
3、切换样式

toggleClass()

语法：

$(selector).toggleClass(class) 

4、判断是否含指定的样式

hasClass( )方法

语法：

$(selector). hasClass(class);

内容操作con

1、HTML代码操作

html()方法

语法：

html({content})

2、标签内容操作

语法：

text({content})

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

3、属性值操作

vall()方法

语法：

val({value})

节点与属性操作

节点操作

jQuery中节点操作

查找节点

创建节点

插入节点

删除节点

替换节点

复制节点

1、查找节点

2、创建节点元素

语法：

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

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

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

3、插入节点

　　　　　　插入节点方法

4、删除节点

$(selector).remove({expr})

empty()

 语法：

$(selector).empty()

5、替换节点

6、复制节点

语法：

$(selector).clone([includeEvents])

属性操作

1、获取与设置元素属性

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

语法：

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

或

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

2、删除元素属性

removeAttr()用来删除元素的属性

语法：

$(selector).removeAttr(name) ;

节点遍历

1、遍历子元素

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

语法：

$(selector).children([expr]);

2、遍历同辈元素

语法　　　　　　　　功能

next([expr])　　　　用于获取紧邻匹配元素之后的元素

　　　　　　　　　$("li:eq(1)").next().addClass("orange");

prev([expr])　　　　用于获取紧邻匹配元素之前的元素

　　　　　　　　　$("li:eq(1)").prev().addClass("orange");

slibings([expr])　　用于获取位于匹配元素前面和后面的所有同辈元素

　　　　　　　　　$("li:eq(1)").siblings().addClass("orange");
3、遍历前辈元素

jQuery中可以遍历前辈元素

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

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

4、其他遍历方法

a. each( ) ：规定为每个匹配元素规定运行的函数

语法：$(selector).each(function(index,element)) ;

Index：选择器的位置

Element：当前的元素

CSS-DOM操作

语法　　　　　　　　　　　　功能

css()　　　　　　　　设置或返回匹配元素的样式属性

height([value])　　　　设置或返回匹配元素的高度

width([value])　　　　设置或返回匹配元素的宽度

offset([value])　　　　返回以像素为单位的top和left坐标。仅对可见元素有效

offsetParent( )　　　　返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素

position( )　　　　　　返回第一个匹配元素相对于父元素的位置

scrollLeft([position])　　参数可选。设置或返回匹配元素相对滚动条左侧的偏移

scrollTop([position])　　参数可选。设置或返回匹配元素相对滚动条顶