博客列表 >jQuery常用选择器20180403

jQuery常用选择器20180403

jobing的博客
jobing的博客原创
2018年04月04日 06:35:59715浏览

今天学习了jQuery常用的选择器,选择器选择元素的方式多种多样,要选择到一个元素或几个元素有不止一种的方法,以下是其中的一些方法,与大家分享。

代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery常用选择器</title>
	<style type="text/css">
		.blue{
			background-color: blue;
			color: white;
		}
		.red{
			background-color: red;
			color:yellow;
		}
		.green{
			background-color: green;
			color: cyan;
		}
	</style>
</head>
<body>
	<h2 id="1">我是jobing的标题</h2>
	<ul>
		<li >jobing的测试框01</li>
		<li class="test">jobing的测试框02</li>
		<li>jobing的测试框03</li>
		<li>jobing的测试框04</li>
		<li>jobing的测试框05<a href="">点我</a></li>
		<li>jobing的测试框06</li>
		<li class="test">jobing的测试框07</li>
		<li>jobing的测试框08</li>
		<li>jobing的测试框09</li>
		<li>jobing的测试框10</li>
	</ul>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	// id选择器
	$('#1').addClass('red')
	// 类选择器
	$('.test').addClass('blue')
	// 通配符选择器
	$('li:nth-child(7) ~ *').css('background-color','lightgreen')
	//直接命中选择器
	$('li:eq(5)').css('background-color','pink')
	// 选择包含直接文本内容的
	$('li:contains(04)').addClass('green')
	// 选择包含某个标签的
	$('li:has("a")').css('background-color','yellow')
	// 清除样式
	$('*').removeAttr('style')
	$('*').removeClass()
	//find():返回所有的后代元素,包括子,孙...
	$('ul').find('li').addClass('red')
	$('*').removeClass()
	$('ul').find('a').addClass('red')
	$('*').removeClass()
	//选取页面的偶数项
	$('li:odd').addClass('green')
	$('*').removeClass()
	//选取页面的基数项
	$('li:even').addClass('blue')
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结:

  1. jQuery常用选择器有很多,选择的方法月CSS选择元素的方法类似

  2. 选择到同一个元素的方法不止一种,多种多样

  3. 上文列举了id选择器、类选择器、通配符选择器、直接命中选择器、选择包含直接文本内容的、选择包含某个标签的、选择所有的后代元素,包括子,孙的、选取对应的偶数项与奇数项等等


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议