1.jQuery中的DOM操作
Query对JavaScript中的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.插入节点
元素内部插入子节点:append(content)、appendTo(content)、prepend(content)、prependTo(content)
元素外部插入同辈节点: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) ;