1.jQuery中的DOM操作

QueryJavaScript中的DOM操作进行了封装

DOM操作分类:操作样式、内容及Value值操作、节点操作、节点属性操作、节点遍历、CSS-DOM操作

 

2.设置和获取样式值

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

语法:css(name,value) ;设置单个属性 css({name:value, name:value,name:value…}) ;同时设置多个属性

css(name) ;获取属性值

 

 

3.追加和移除样式

追加样式  语法:$(selector).addClass(class);   或   $(selector).addClass(class1 class2...classN);

移除样式   语法:$(selector).removeClass("class") ;  或   $(selector).removeClass("class1 class2 … classN ") ;

 

 

4.切换样式

oggleClass()

模拟addClass()removeClass()实现样式切换过程

语法:$(selector).toggleClass(class) ;

 

5.判断是否含指定的样式

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

语法:$(selector). hasClass(class);

 

6.HTML代码操作

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

语法:$("div.left").html();

 $("div.left").html("<div class='content'>…</div>");

 

7.标签内容操作

text()可以获取或设置元素的文本内容

语法:$("div.left").text();

 $("div.left").text("<div class='content'>…</div>");

 

8.html( ) text( )方法的区别

html( )  参数说明:无参数   功能描述:用于获取第一个匹配元素的HTML内容或文本内容

html(content)   参数说明:content为元素的HTML内容   功能描述:用于设置所有匹配元素的HTML内容或文本内容

text( ) 参数说明:无参数  功能描述:用于获取所有匹配元素的文本内容

text (content)  参数说明:content为元素的文本内容  功能描述:用于设置所有匹配元素的文本内容

 

9.属性值操作

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

语法:$(this).val();  或     $(this).val(value);

 

10.创建节点元素

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

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

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

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

 

 

11.插入节点

元素内部插入子节点:appendcontent)、appendTocontent)、prependcontent)、prependTocontent

元素外部插入同辈节点:after(content)insertAfter(content)before(content)insertBefore(content)

 

12.删除节点

jQuery提供了两种删除节点的方法

语法: remove():删除整个节点

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

empty():清空节点内容

$(selector).empty();

 

 

13.替换节点

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

示例:var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>");

  $(".gameList li:eq(2)").replaceWith($newNode1);

 

$($newNode1).replaceAll(".gameList li:eq(2)");

 

 

 

14.复制节点

clone()用于复制某个节点

语法:$(selector).clone([includeEvents]) ;

示例:

$(".gameList li:eq(1)").click(function(){

     $(this).clone(true).appendTo(".gameList");

})

$(".gameList li:eq(2)").click(function(){

     $(this).clone(false).appendTo(".gameList");

})

 

 

15.属性操作

获取与设置元素属性

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

语法:$(selector).attr([name]) ;

   $(selector).attr({[name1:value1]…[nameN:valueN]}) ;

 

删除元素属性

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

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

 

16:节点遍历:

遍历子元素:children()

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

语法:

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

 

遍历同辈元素:jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

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()

jQuery中可以遍历前辈元素 parent():获取元素的父级元素 parents():获取元素的祖先元素

eg:

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

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

其他遍历方法

each(),

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

语法:

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

end()

end( ):结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态

 

posted on 2020-07-01 18:34  吅^O^  阅读(98)  评论(0编辑  收藏  举报