使用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操作

使用jQuery快速高效制作网页交互特效---使用jQuery操作DOM_第1张图片

样式操作

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()方法的区别

使用jQuery快速高效制作网页交互特效---使用jQuery操作DOM_第2张图片

3、属性值操作

vall()方法

语法:

val({value})

节点与属性操作

节点操作

jQuery中节点操作

查找节点

创建节点

插入节点

删除节点

替换节点

复制节点

1、查找节点

2、创建节点元素

语法:

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

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

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

3、插入节点

      插入节点方法

使用jQuery快速高效制作网页交互特效---使用jQuery操作DOM_第3张图片

使用jQuery快速高效制作网页交互特效---使用jQuery操作DOM_第4张图片

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])  参数可选。设置或返回匹配元素相对滚动条顶

你可能感兴趣的:(使用jQuery快速高效制作网页交互特效---使用jQuery操作DOM)