jQuery選擇器

時間  2020-01-05
標籤 jquery 選擇器 欄目 JQuery 简体版
原文   原文鏈接

一、jQuery選擇器能夠很是便捷的和快速的找出特定的DOM元素，而後爲它們添加相應的行爲，；javascript

二、jQuery選擇器的優點：（1）簡潔的寫法，css

$("#ID")等價於document.getElementById();函數

（2）支持CSS1到CSS3選擇器：支持CSS1和CSS2的所有和CSS3的部分選擇器；（3）完善的處理機制：使用jQuery選擇器不只比使用傳統的getElementById()和getElementsByTagName()函數簡潔的多，還能避免某些錯誤：java

<div>test</div>
<script type="text/javascript">
if (document.getElementById("tt")) {
document.getElementById("tt").style.color="red";
}
</script>

不能使用這些代碼：ide

一、if ($("#tt")) {
     //do something
  }

二、if($("#tt").length > 0) {
    //do something
  }

三、if ($("#tt")[0]) {
    //do something
   }

三、給全部<p>元素添加onclick事件：函數

<body>
	<p>測試1</p>
	<p>測試2</p>
</body>
<script type="text/javascript">
var items = document.getElementsByTagName("p");
for(var i = 0; i < items.length; i ++) {
	items[i].onclick = function() {
		//doing something
	}
}
</script>

四、使一個特定的表格隔行變色：測試

<body>
	<table id="tb">
		<tbody>
			<tr><td>第一行</td><td>第一行</td></tr>
			<tr><td>第二行</td><td>第二行</td></tr>
			<tr><td>第三行</td><td>第三行</td></tr>
			<tr><td>第四行</td><td>第四行</td></tr>
			<tr><td>第五行</td><td>第五行</td></tr>
			<tr><td>第六行</td><td>第六行</td></tr>
		</tbody>
	</table>
</body>
<script type="text/javascript">
var item = document.getElementById('tb');
var tbody = document.getElementsByTagName('tbody')[0];
var trs = tbody.getElementsByTagName('tr');
for(var i = 0; i < trs.length; i ++) {
	if(i % 2 == 0) {
		trs[i].style.backgroundColor = "#888";
	}
}
</script>

五、輸出選中的多選框個數：動畫

<body>
	<input type="checkbox" value="1" name="check" checked="checked" />
	<input type="checkbox" value="2" name="check" />
	<input type="checkbox" value="3" name="check" checked="checked" />
	<input type="button" value="你選中的個數" id="btn" />
</body>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function() {
	var arrays = new Array();
	var items = document.getElementsByName("check");

	for(var i = 0; i < items.length; i ++) {
		if (items[i].checked) {
			arrays.push(items[i].value);
		}
	}
	alert("選中的個數爲："+arrays.length)
}
</script>

六、使用jQuery選擇器來調整<div>元素和<span>元素的樣式：spa

<body>
	<div class="one" id="one">
		id爲one，class爲one的div
		<div class="mini">class爲mini</div>
	</div>
	<div class="one" id="two" title="test">
		id爲two，class爲one，title爲test的div
		<div class="mini" title="other">class爲mini，title爲other</div>
		<div class="mini" title="test">class爲mini，title爲test</div>
	</div>
	<div class="one">
		<div class="mini">class爲mini</div>
		<div class="mini">class爲mini</div>
		<div class="mini">class爲mini</div>
		<div class="mini"></div>
	</div>
	<div class="one">
		<div class="mini">class爲mini</div>
		<div class="mini">class爲mini</div>
		<div class="mini">class爲mini</div>
		<div class="mini" title="tesst">class爲mini，title爲tesst</div>
	</div>
	<div style="display:none;" class="none">
		style的display爲"none"的div
	</div>
	<div class="hide">class爲"hide"的div</div>
	<div>
		包含input的type爲"hidden"的div<input type="hidden" size="8"/>
	</div>
	<span id="mover">正在執行動畫的span元素</span>
</body>
<style type="text/css">
	div,span,p {
		width: 140px;
		height: 140px;
		margin: 5px;
		background: #aaa;
		border: 1px solid #000;
		float: left;
		font-size: 17px;
		font-family: Verdana;
	}

	div.mini {
		width: 55px;
		height: 55px;
		background-color: #aaa;
		font-size: 12px;
	}

	div.hide {
		display: none;
	}
</style>

<script type="text/javascript">
// $("#one").css("background","#bbffaa");
// $(".mini").css("background","#bbffaa");
// $("div").css("background","#bbffaa");\
// $("*").css("background","#bbffaa");
// $("span, #two").css("background","#bbffaa");
// $("body div").css("background","#bbffaa");
// $("body> div").css("background","#bbffaa");
// $(".one + div").css("background","#bbffaa");
// $("#two ~ div").css("background","#bbffaa");
// $("div:first").css("background","#bbffaa");
// $("div:last").css("background","#bbffaa");
// $("div:not(.one)").css("background","#bbffaa");
// $("div:even").css("background","#bbffaa");
// $("div:odd").css("background","#bbffaa");
// $("div:eq(3)").css("background","#bbffaa");
// $("div:gt(3)").css("background","#bbffaa");
// $("div:lt(3)").css("background","#bbffaa");
// $(":animated").css("background","#bbffaa");
// $("div:contains(di)").css("background","#bbffaa");
// $("div:empty").css("background","#bbffaa");
// $("div:has('.mini')").css("background","#bbffaa");
// $("div:parent").css("background","#bbffaa");
// $("div:visible").css("background","#ff6500");
// $("div:hidden").show(3000);
// $("div[title]").css("background","#bbffaa");
// $("div[title = test]").css("background","#bbffaa");
// $("div[title != test]").css("background","#bbffaa");
// $("div[title ^= te]").css("background","#bbffaa");
// $("div[title $= est]").css("background","#bbffaa");
// $("div[title *= es]").css("background","#bbffaa");
// $("div[id][title *= es]").css("background","#bbffaa");
// $("div.one :nth-child(2)").css("background","#bbffaa");
// $("div.one :first-child").css("background","#bbffaa");
// $("div.one :last-child").css("background","#bbffaa");
// $("div.one :only-child").css("background","#bbffaa");

</script>

七、jQuery提供的選擇器擴展：（1）MoreSelectors for jQuery,用於增長更多的選擇器；（2）Basic XPath：最開始支持，後因使用人數很少，改成經過插件來實現；插件

八、改變文本框內的內容：code

<body>
	<form id="forml" action="#">
		可用元素: <input name="add" value="可用文本框" /> <br>
		不可用元素: <input name="email" disabled="disabled" value="不可用文本框" /> <br>
		可用元素: <input name="che" value="可用文本框" /> <br>
		不可用元素: <input name="name" disabled="disabled" value="不可用文本框" /> <br>
<br>
		多選框: <br>
		<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
		<input type="checkbox" name="newsletter" value="test2" />test2
		<input type="checkbox" name="newsletter" value="test3" />test3
		<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
		<input type="checkbox" name="newsletter" value="test5" />test5
		<div></div>
		<br/><br/>
		下拉列表1: <br/>
		<select name="test" multiple="multiple" style="height:100px;">
			<option>浙江</option>
			<option selected="selected">湖南</option>
			<option>北京</option>
			<option selected="selected">天津</option>
			<option>廣州</option>
			<option>湖北</option>
		</select>
		<br/><br/>
		下拉列表2: <br/>
		<select name="test2">
			<option>浙江</option>
			<option>湖南</option>
			<option selected="selected">北京</option>
			<option>天津</option>
			<option>廣州</option>
			<option>湖北</option>
		</select>
		<div></div>
	</form>
</body>
	<script type="text/javascript">
		// $("#forml input:enabled").val("這裏變化了!");改變表單內可用的<input>元素的值
		// $("#forml input:disabled").val("這裏變化了！");改變表單內不可用的<input>元素的值
		// $("input:checked").length;獲取多選框選中的內容
		// $("select:selected").text();獲取下拉框選中的內容
	</script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程