body
<p class="a">哈喽</p>
<p class="b">刚好</p>
<p class="c"><a class="q">as</a><a>as</a>地方</p>
<p class="d">a新地址</p>
<p class="e">水电费</p>
3.1.1类过滤
根据元素的雷属性进行过滤
if($("p:eq(0)").hasClass("a")){
alert("有class=a");
} //选中第一个p标签通过hasClass函数判断是否用。class=a,如果是的,就返回true,就行对话框提示
3.1.2 下表过滤
//下表过滤
$("p:eq(1)").css("background","red"); //选中第二个p标签并将背景设置为红色
3.1.3 表达式过滤
根据需要自定义表达式来过滤
$("p").filter(".e").css("background","blue"); //选中p标签并且p标签使用class=e ,进北京设置Wie蓝色
注意filter参数前面加点
2.
$("p").filter(function(index) {
return $("a",this).length==2
}).css("background","yellow") 选中所有p元素,p标签中含有2个a标签的话,返回true,并设置为背景黄色
3.1.4has方法过滤
专门负责保留包含特定后代的元素,去掉那些不包含特定厚底阿德元素。
$("p").has("a.q").css("background","#09f"); //匹配所有的p元素 过滤出p标签包含的a变迁并且a标签使用了class=q
3.1.4 判断
返回值为true
if($("p").is(".a")){
alert("有d元素");
} //单个条件
f($("p").is(".a,.b")){//多个
alert("有d元素");
} //多个条件
3.1.5 映射
<!DOCTYPE html>
<html>
<head>
<style>p { color:red; }</style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<form method="post" action="">
<fieldset>
<div>
<label for="two">2</label>
<input type="checkbox" value="2" id="我去v" name="number[]">
</div>
<div>
<label for="four">4</label>
<input type="checkbox" value="4" id="sad" name="number[]">
</div>
<div>
<label for="six">6</label>
<input type="checkbox" value="6" id="啊的是v" name="number[]">
</div>
<div>
<label for="eight">8</label>
<input type="checkbox" value="8" id="的v" name="number[]">
</div>
</fieldset>
</form>
<p><b>Values: </b></p>
<script>
$("p").append($(':checkbox').map(function() {
return this.id;
}).get().join(','));
</script>
</body>
</html> //this 引用每次迭代的当前 DOM 元素。该函数可返回单独的数据项
结果
我们能够获得复选框 ID 组成的逗号分隔的列表:
Values: 我去v,sad,啊的是v,的v
3.1.6清洗
body
<ul id="meny">
<li class="home">水电费</li>
<li>
<li>山东</li><li>地方</li><li>地方</li>
</li>
<li>水电费</li>
</ul>
$("#meny li").not(".home").css("color","red"); //通过not排除ul中的li使用了class=home的元素,为其他元素设置字体颜色红色
3.1.7截取
$("#meny li").slice(1,2).css("color","red");//通过slice方法截取第二个li元素,并为第二个元素设置字体颜色红色
注意
slice 先输入国为负数,说明是从后面起
3.2查找
3.2.1向下查找后代元素
children仅能查找子元素
1
.$("#meny").children().css("text-decoration","underline");//查找ul下的li元素
1.
$("#meny").children(".home").css("color","red");//可以适当在children中加过滤元素
2.
$("#meny").contents().css("color","red");//不仅可以获取子元素,还可以获取文本节点,注释节点等,返回jquery对象
3.alert($("body>ul").find("li").length)
3.2.2向上查找祖先元素
1.parents函数
$("li").parents().css("background","#0F0");//找li元素的所有父元素
alert($("li").parents().length);//结果是4 分别是 html body div ul
2.parent函数:
可以匹配一个包含所有匹配元素的唯一父元素的 元素集合
$("li").parent().css("background","#CCC");//查找所有匹配的父元素
$("li").parent().each(function() {
alert(this.nodeName); //获取元素 div和ul两个父元素
});
3。parentsUntil()方法
对于匹配到的父元素划定范围
$("li").parentsUntil("div").css("background","#CCC");//选中div下一级的li的父元素
$("li").parentsUntil("div").each(function() {
alert(this.nodeName);
}); //结果 ul为li的父元素
4.offsetParent()方法
能够查找到当前元素的第一个定位祖先元素
5.closest(expr,[context])
参数一:可以使字符串也可以是数组,用以过滤元素的表达式
参数二:是一个可选择参数 表示一个元素,用来设置带查找的DOM元素集
3.2.3向上查找兄弟元素
<h1>回乡偶书</h1>
<h2>贺知章</h2>
<p class="blue">少小离家老大回</p>
<p>乡音无该笔冒水</p>
<p class="red">儿童相见不相识</p>
<p>笑问客从何处来</p>
1.prev
仅能匹配上一个相邻的元素
$(".red").prev().css("background","red");
2.prevAll
不仅能匹配上一个相零的元素,也可匹配与上一个元素同级的相同的元素
$(".red").prevAll("p").css("background","red");
3.prevUntil
能匹配指定范围的同级元素,同级的任何元
$(".red").prevUntil("h1").css("background","red");
3.2.4向下查找兄弟元素
1.next方法
$(".blue").next("p").css("color","red");//匹配到使用class=blue的元素的相邻下一个p元素
【 //nextSibling 匹配下一个任意元素】
2.nextall方法
$(".red").nextAll("p").css("color","blue");//匹配 使用class=red的元素的下面的同级的p元素,如果参数为空则匹配下面所有同级元素
4. //nextUntil方法
$(".blue").nextUntil(".red").css("color","red");//查找类名尾blue的p元素,然后使用.nextUntil(".red")方法查找类名为red的元素前面的所有元素
3.2.5 查找兄弟元素
1.siblings方法
//找所有兄弟元素,并将查找到的兄弟元素字体变为黄色,但并不包括自己
$(".blue").siblings("p").css("color","yellow");
2.添加查找对象 (add(方法))
$(".blue").siblings("p").add("h1,h2").css("color","yellow");//不仅查找使用类blue元素的同级p元素,还查找同级的h1,h2元素
3.3串联
<body style="padding:100px;">
<h1>回乡偶书</h1>
<h2>贺知章</h2>
<p class="blue">少小离家老大回</p>
<p>乡音无该笔冒水</p>
<p class="red">儿童相见不相识</p>
<p>笑问客从何处来</p>
</body>
$("body").find("p").css("background","red");
如果想讲body的背景也变为红色,
$("body").find("p").andSelf().css("background","red");
还有一个方法(+end)
$("body").find("p").css("background","red").end().css("background","red");//也可以将body背景变为红色