JQ基础——选择器与过滤器（全）
JQ选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<style>
.w{width: 100px;height: 100px;}
.a{width:220px;height: 120px;}
</style>
</head>
<body>
1.单选择，全选择
<div>dsdasda</div>
<p>dasdasda</p>
<div class="w">这是class类的</div>
<script>
$(function(){
$(".w").css("border","3px solid red");
$("*").css("border","4px solid black");
})
</script>
2.多选择
<div class="w"></div>
<span class="a">asdasdasd</span>
<script>
$(function(){
$(".a,.w").css("border","3px solid red")
$("div,span").css("border","3px solid red")
})
</script>
3.后代选择
<div class="w">
<span>sdasda</span>
<p>dasdad</p>
<div>dadad</div>
</div>
<script>
$(function(){
$("div span").css({"border":"3px solid black","color":"red"})
$("div").css("border","3px solid red")
$("div>*").css({"background-color":"blue","border":"3px solid red"})
})
</script>
</body>
</html>
JQ过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<style>
.a{color:}
</style>
<body>
<h1>标题</h1>
<div>
<p>:first 可以匹配找到的第一个元素</p>
<div>中间的</div>
<h2>标题</h2>
<div>:last 可以匹配找到的最后一个元素</div>
</div>
<table>
<tr id="tr1">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
<table>
<tr id="tr2">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
<div>lalalala 11</div>
<div>lalalala 22</div>
<div id="div3"></div>
<div id="div4">
<input type="hidden" /><input type="hidden" /><input type="hidden" />
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
$(function(){
$("div:first").css({"color":"blue"})
$("div:last").css({"color":"red"})
$(":header").css({"color":"green"})
// $(":not").css({"color":"white"})
$("#tr1 td:even").css({"color":"purple","font-size":"30px"})
$("#tr1 td:odd").css({"color":"yellow","font-size":"10px"})
$("#tr2 td:eq(2)").css({"color":"darkorange","font-size":"30px"})
//计数是重0开始的。。所以是第3个数显示。
$("#tr2 td:gt(3)").css({"color":"cadetblue","font-size":"40px"})
//比它大的数，不包括本身
$("#tr2 td:lt(1)").css({"color":"cadetblue","font-size":"20px"})
$("div:contains('lalala')").css({"color":"darkslategray","font-size":"34px"})
//匹配文本的，文本为lalala的挑选器
$("div:empty").css({"width":"100px","height":"50px","border":"3px solid black"})
$("div:has(h2)").css({"border":"3px solid black"})
//有指定元素的元素，就是那个div。
$("#div3").html("一共有"+$("input:hidden").length+"个隐藏元素的input元素")
//指定input元素才可以
$("#div4").html("一共有"+$("tr:visible").length+"个显示元素的input元素")
//属性过滤器
$("div[id='div3']").css({"border":"2px dotted green"})
//可以用id!='div3'id不是div3的元素
//name~='news' 匹配指定属性以指定值开始的元素
//name$='news' 匹配指定属性值以指定值结尾的元素。
//name*='news' 指定属性值包含指定值的元素。
//input[id][name*="news"] 这个就厉害了，复合选择器，要有id，还要name中有new的才可以。
})
</script>
</body>
</html>