jQuery笔记之过滤选择器

过滤选择器

过滤选择器通过特定的过滤规则来筛选元素语法特点是使用“:” , 如使用$(“li:first”)选取第一个li元素

主要分类如下:

基本过滤选择器
可见性过滤选择器
表单对象过滤选择器
内容过滤选择器、 子元素过滤选择器……








验证以上理论的演示

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>过滤选择器</title>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

		<script>
			/**
			 * 	过滤选择器通过特定的过滤规则来筛选元素;<br>
			 *语法特点是使用“:” , 如使用$(“li:first”)来选取第一个li元素
			 * 主要分类如下:
			 *  基本过滤选择器<br>
			 *  可见性过滤选择器<br>
			 *  表单对象过滤选择器<br>
			 *内容过滤选择器、 子元素过滤选择器……<br>
			 **/

			$(function() {
				/*
				 * 语法: :first<br>
				 * 描述:选取第一个元素<br>
				 * 实例:$(" li:first" )选取所有<li>元素中的第一个<li>元素<br>
				 * 
				 */
				//取出第一个元素
				$("li:first").css("background-color", "red");
				/**
				 * 语法:  :last<br>
				 * 描述:选取最后一个元素<br>
				 * 实例:$(" li:last" )选取所有<li>元素中的最后一个<li>元素<br>
				 * 
				 */
				//取出最后一个元素
				$("li:last").css("background-color", "#09F");
				/**
				 * 语法: :even<br>
				 * 描述:选取索引是偶数的所有元素(index从0开始)<br>
				 * 实例:$(" li:even" )选取索引是偶数的所有<li>元素<br>
				 */
				//取出偶数
				$("li:even").css("background-color", "chartreuse");
				/**
				 * 语法: :odd<br>
				 * 描述:选取索引是偶数的所有元素(index从0开始)<br>
				 * 实例:$(" li:even" )选取索引是偶数的所有<li>元素<br>
				 * 
				 */
				//取出奇数
				$("li:odd").css("background-color", "coral");
				/**
				 * 语法:  :eq(index)<br>
				 * 描述:选取索引等于index的元素(index从0开始)<br>
				 * 实例:$("li:eq(1 )" )选取索引等于1的<li>元素
				 */
				/**
				 * 语法: :eq(index)<br>
				 * 描述:选取索引等于index的元素(index从0开始)<br>
				 * 实例:$("li:eq(1 )" )选取索引等于1的<li>元素<br>
				 * 
				 */
				//选取索引值等于1的元素
				$("li:eq(1)").css("background-color", "red");
				/**
				 * 语法: :gt(index)<br>
				 * 描述:选取索引大于index的元素(index从0开始)<br>
				 * 案例:$(" li:gt(1 )" )选取索引大于1的<li>元素(注: 大于1, 不包括1)<br>
				 * 
				 */
				//选取索引值大于1的元素
				$("li:gt(1)").css("background-color", "royalblue");
				/**
				 * 语法: :lt(index);<br>
				 * 描述:选取索引小于index的元素(index从0开始)
				 * 案例:$(“li:lt(1 )” )选取索引小于1的<li>元素(注: 小于1, 不包括1)
				 */
				//选取索引值小于1的元素
				$("li:lt(1)").css("background-color", "brown");
				/**
				 * 语法: :not(selector)<br>
				 * 描述:选取去除所有与给定选择器匹配的元素<br>
				 * 案例:$(" li:not(.three)" )选取class不是three的元素<br>
				 */
				//根据选择器反向选择元素
				$("li:not(.three)").css("background-color", "brown");
				/**
				 * 语法: :header
				 * 描述:选取所有标题元素,如h1 ~h6
				 * 案例:$(":header" )选取网页中所有标题元素
				 */
				//选取所有标题元素
				$(":header").css("background-color", "coral");
				/**
				 * 语法: :focus
				 * 描述:选取当前获取焦点的元素<br>
				 * 案例:$(":focus" )选取当前获取焦点的元素
				 */
				//选取获得焦点的元素
				$(":focus").css("background-color", "red");
				//特殊符号的转义
				//选择器中的特殊符号需要转义, 在如下html代码中
				//获取这两个元素的选择器
				/**
				 * $("#id#a");$("#id[2]");这两种写法是错误的
				 */
				$("#id\\#a").css("background-color", "red");
				$("#id\\[2\\]").css("background-color","yellow");
				//选择器中的空格
				//选择器的注意事项
				//选择器的书写规范很严格, 多一个空格或少一个空格,都会影响选择器的效果
				//显示
				$("p:visible").css("background-color","red");
				//隐藏
				$("p:hidden").css("background-color","yellow");
			})
		</script>
	</head>

	<body>
		<h2>网络小说</h2>
		<ul>
			<li>王妃不好当</li>
			<li>致命交易</li>
			<li class="three">迦兰寺</li>
			<li>逆天之宠</li>
			<li>交错时光的爱恋</li>
			<li>张震鬼故事</li>
			<li>第一次亲密接触</li>
		</ul>
		<div id="id#a">aa</div>
		<div id="id[2]">cc</div>
		<p>我是内容。。</p>
	</body>

</html>




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
该资源内项目源码是个人的课程设计、毕业设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值