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教程