把博客园图标替换成自己的图标
把博客园图标替换成自己的图标end

选择器与过滤器(全)————JQ

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>

posted @ 2019-09-21 21:06  陈嗯嗯  阅读(212)  评论(0编辑  收藏  举报
Live2D