jq03
Posted kuai-man
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq03相关的知识，希望对你有一定的参考价值。
我们继续学习jq的一些函数，包括向jq对象添加、删除CSS属性以及遍历DOM树。
1.获取、设置CSS类
addClass()--向被选元素添加1个或多个类属性
.importance{font-weight:bold;font-size:xx-large;}
.blue{color:blue;}
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("importance");
});
$("button").click(function(){
$("div").addClass("importance blue");
});
removeClass()--从被选元素删除1个或多个类属性
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
toggleClass()--对被选元素进行添加、删除类属性的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
css()--返回、设置被选元素1个或多个样式属性
$("p").css("background-color"); --首个匹配的元素的背景色
$("p").css("background-color","red"); --为所有匹配元素设置背景色
$("p").css({"background-color":"red","font-size":"150%"}); --设置多个属性值
2.尺寸
width() --返回、设置元素的宽度(不包括内边距、边框、外边距)
height() --返回、设置元素的高度(不包括内边距、边框、外边距)
innerWidth() --返回元素的宽度(包括内边距)
innerHeight() --返回元素的高度(包括内边距)
outerWidth() --返回元素的宽度(包括内边距、边框)
outerHeight() --返回元素的高度(包括内边距、边框)
outerWidth(true) --返回元素的宽度(包括内边距、边框、外边距)
outerHeight(true) --返回元素的高度(包括内边距、边框、外边距)
$("#div1").width() $("#div1").height() $("#div1").width(500).height(500);
文档(html文档)尺寸：
$(document).width() $(document).height()
窗口(浏览器视口)尺寸：
$(window).width() $(window).height()
3.JQ遍历 DOM树
向上遍历：
parent() parents() parentsUntil()
$("span").parent().css({"color":"red","border":"2px solid green"});
--遍历父元素
$("span").parents().css({"color":"red","border":"2px solid green"});
--遍历所有祖先元素，一路向上直到文档根元素(<html>)
$("span").parentsUntil("div").css({"color":"red","border":"2px solid green"});
--遍历2个给定元素之间的所有祖先元素，不包括给定元素
向下遍历：
children() find()
$("div").children().css({"color":"green","border":"2px solid red"});
--返回直接子元素
$("div").children("p.pclass").css({...});
--添加参数对子元素进行过滤
$("div").find("span").css({"color":"green","border":"2px solid red"});
--返回被选元素的后代元素
水平遍历(遍历兄弟节点)：
$("h2").siblings().css({"color":"red","border":"2px solid red"}); --返回所有兄弟节点
$("h2").siblings("p").css({"color":"red","border":"2px solid red"}); --参数过滤兄弟节点
$("h2").next().css({"color":"red","border":"2px solid red"}); --返回下一个兄弟节点
$("h2").nextAll().css({"color":"red","border":"2px solid red"}); --返回所有的next兄弟节点
$("h2").nextUntil("h6").css({...}); --2节点间的所有兄弟节点
$("h2").prev().css({...}); --返回前一个兄弟节点
prev prevAll() prevUntil()与 next()相反
过滤：
$("div p").first().css("background-color","red"); --首个div元素内部的第一个<p>
$("div p").last().css("background-color","red"); --最后div元素内部的最后一个<p>
$("p").eq(1).css("background-color","red"); --返回被选元素中带有指定索引号的元素，索引从0开始
$("p").filter(".intro").css("background-color","red"); --过滤
$("p").not(".intro").css("background-color","red"); --与filter()相反
以上是关于jq03的主要内容，如果未能解决你的问题，请参考以下文章