JavaQuery選擇器

本文轉載自查看原文 2017-11-04 18:57 2040 Read the manual and source code

1、基本選擇器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>基本選擇器</title>
	<style type="text/css">
	#box {
	background-color: #FFF;
	border: 2px solid #000;
	padding: 5px;
	}
	</style>

	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	$(function() {
	$("#btn1").click(function() {//觸發不同的效果按鈕點擊事件
	//標簽選擇器，獲取<h3>元素並為其添加背景顏色
	//$("h3").css({"background":"red"});
	//類選擇器，獲取並設置所有class為title的元素的背景顏色
	//$(".title").css({"background":"red"});
	//ID選擇器，獲取並設置id為box的元素的背景顏色
	//$("#box").css({"background":"red"});
	//並集選擇器，獲取並設置所有<h2>、<dt>、class為title的元素的背景顏色
	//$("h2,dt,.title").css({"background":"red"});
	//交集選擇器，獲取並設置所有class為title的<h2>元素的背景顏色
	//$("h2.title").css({"background":"red"});
	//全局選擇器，改變所有元素的字體顏色
	$("*").css({"background":"red"});
	})
	});
	</script>
	<body>
	<input type="button" id="btn1" value="顯示效果" />
	<div id="box">
	id為box的div
	<h2 class="title">class為title的h2</h2>
	<h3 class="title">class為title的h3</h3>
	<h3>熱門排行</h3>
	<dl>
	<dt>
	<img src="images/case_1.gif" width="93" height="99" alt="斗地主" />
	</dt>
	<dd class="title">斗地主</dd>
	<dd>休閑游戲</dd>
	<dd>QQ斗地主是國內同時在線人數最多的棋牌游戲......</dd>
	</dl>
	</div>
	</body>
	</html>

2、層次選擇器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>層次選擇器</title>
	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
	line-height: 30px;
	}

	body {
	margin: 10px;
	}

	#menu {
	border: 2px solid #03C;
	padding: 10px;
	}

	a {
	text-decoration: none;
	margin-right: 5px;
	}

	span {
	font-weight: bold;
	padding: 3px;
	}

	h2 {
	margin: 10px 0;
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<div id="menu">
	<h2 title="點擊看效果">全部旅游產品分類</h2>
	<dl>
	<dt>
	北京周邊旅游<span>特價</span>
	</dt>
	<dd>
	<a href="#">按天數</a> <a href="#">海邊旅游</a> <a href="#">草原</a>
	</dd>
	</dl>

	<dl>
	<dt>景點門票</dt>
	<dd>
	<a href="#">名勝</a> <a href="#">暑期</a> <a href="#">樂園</a>
	</dd>
	<dd>
	<a href="#">山水</a> <a href="#">雙休</a>
	</dd>
	</dl>
	<span>更多分類</span>
	</div>



	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">

	$(document).ready(function() {
	$("h2").click(function() {//點擊h2標題時觸發的事件
	//后代選擇器，獲取並設置#menu下的<span>元素的背景顏色
	//$("#menu span").css({"background":"red"});
	//子選擇器，獲取並設置#menu下的子元素<span>的背景顏色
	//$("#menu>span").css({"background":"red"});
	//相鄰選擇器，獲取並設置緊接在<h2>元素后的<dl>元素的背景顏色
	//$("h2+dl").css({"background":"red"});
	//同輩選擇器，獲取並設置<h2>元素之后的所有同輩元素<dl>的背景顏色
	$("h2~dl").css({"background":"red"});
	});
	});
	</script>






	</body>
	</html>

3、屬性選擇器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>屬性選擇器</title>
	<style type="text/css">
	#box {
	background-color: #FFF;
	border: 2px solid #000;
	padding: 5px;
	}

	h2 {
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<div id="box">
	<h2 class="odds" title="cartoonlist">動畫列表</h2>
	<ul>
	<li class="odds" title="kn_jp">名偵探柯南</li>
	<li class="evens" title="hy_jp">火影忍者</li>
	<li class="odds" title="ss_jp">死神</li>
	<li class="evens" title="yj_jp">妖精的尾巴</li>
	<li class="odds" title="yh_jp">銀魂</li>
	<li class="evens" title="hm_da">黑貓警長</li>
	<li class="odds" title="xl_ds">仙履奇緣</li>
	</ul>
	</div>

	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	$(function() {
	$("h2").click(function() {
	//改變含有title屬性的<h2>元素的背景顏色
	//$("h2[title]").css({"background":"red"});
	//改變class屬性的值為odds的元素的背景顏色
	// $("[class='odds']").css({"background":"red"});
	//改變id屬性的值不為box的元素的背景顏色
	//$("[id!='box']").css({"background":"red"});
	//改變title屬性的值中以h開頭的元素的背景顏色
	//$("[title^='h']").css({"background":"red"});
	//改變title屬性的值中以jp結尾的元素的背景顏色
	//$("[title$='jp']").css({"background":"red"});
	//改變title屬性的值中含有s的元素的背景顏色
	//$("[title*='s']").css({"background":"red"});
	//改變包含class屬性，且title屬性的值中含有y的<li>元素的背景顏色
	$("li[class][title*='y']").css({"background":"red"});
	});
	});
	</script>
	</body>
	</html>

4、基本過濾選擇器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>基本過濾選擇器</title>
	</head>
	<body>
	獲取焦點：<input type="text">
	<h1>h1網絡小說</h1>
	<h2>h2網絡小說</h2>
	<h3>h3網絡小說</h3>
	<h4>h4網絡小說</h4>
	<ul>
	<li>王妃不好當</li>
	<li>致命交易</li>
	<li class="three">迦蘭寺</li>
	<li>逆天之寵</li>
	<li>交錯時光的愛戀</li>
	<li>張震鬼故事</li>
	<li>第一次親密接觸</li>
	</ul>


	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	$(function() {
	$("h2").click(function(){
	//改變第1個<li>元素的背景顏色
	//$("li:first").css({"color":"red"});
	//改變最后一個<li>元素的背景顏色
	//$("li:last").css({"color":"red"});
	//改變class不為three的<li>元素的背景顏色
	//$("li:not(.three)").css({"color":"red"});
	//改變索引值為偶數的<li>元素的背景顏色
	//$("li:even").css({"color":"red"});
	//改變索引值為奇數的<li>元素的背景顏色
	//$("li:odd").css({"color":"red"});
	//改變索引值等於1的<li>元素的背景顏色
	//$("li:eq(1)").css({"color":"red"});
	//改變索引值大於1的<li>元素的背景顏色
	// $("li:gt(1)").css({"color":"red"});
	//改變索引值小於1的<li>元素的背景顏色
	//$("li:lt(1)").css({"color":"red"});
	//改變所有標題元素，例如<h1>,<h2>,<h3>……這些元素的背景顏色
	//$(":header").css({"color":"red"});
	});
	//改變當前獲取焦點的元素的背景顏色
	$("input").click(function(){
	//讓獲取焦點的元素改變背景色
	alert("是否獲取焦點："+$(this).is(":focus"));
	$(":focus").css({"background":"red"});
	})
	});
	</script>
	</body>
	</html>

5、可見性過濾器

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>可見性過濾器</title>
	</head>
	<body>
	<button id="show">show</button>
	<button id="hide">hide</button>
	<div>顯示1</div>
	<div>顯示2</div>
	<div style="display:none">顯示3</div>

	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	$(function() {
	//點擊show按鈕觸發的事件
	$("#show").click(function(){
	$(":hidden").show();
	});
	//點擊hide觸發的事件
	$("#hide").click(function(){
	$("div:visible").hide();
	});



	});
	</script>

	</body>
	</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Select 選擇器 CSS選擇器 < ~ + jquery的選擇器 jquery的基本選擇器奇偶選擇器 picker 選擇器 jQuery 選擇器 html選擇器 jQuery 選擇器：元素選擇器、#id 選擇器、.class 選擇器 ExtJs選擇器