jQuery选择器

最新推荐文章于 2024-01-14 11:54:30 发布
最新推荐文章于 2024-01-14 11:54:30 发布
阅读量68 收藏
点赞数
分类专栏： jQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xia_zai_ya/article/details/103911845
版权

jQuery初学

选择器 （三）

基本过滤选择器

  1. " :first" /* 选取到第一个元素*/
    $("div:first ") /*选取到第一个div元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div>111</div>
		<div>222</div>
		<div>333</div>
		
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("div:first").css("color","red") //选取到了第一个div元素
			})
		</script>
	</body>
</html>
  1. " :last" /* 选取到最后一个元素*/
    $("div:last ") /*选取到最后一个div元素 */
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div>111</div>
		<div>222</div>
		<div>333</div>
		
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("div:last").css("color","red") //选取到了最后一个div元素
			})
		</script>
	</body>
</html>
  1. " :not（）" /* 选取到除了此元素*/
    $(“li:not(:first)”) /* 选取到所有的li，除了第一个*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("li:not(:first)").css("color","red") //选取到了所有li元素，除了第一个li元素
			})
		</script>
	</body>
</html>
  1. " :even" /* 选取到偶数元素*/
    $(" li:even") /* 选取到偶数行的li元素，（注意，所有奇偶数计算都是从0下标开始）*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("li:even").css("color","red")//选取到了所有偶数行li元素
			})
		</script>
	</body>
</html>
  1. " :odd" /* 选取到奇数元素*/
    $(" li:odd") /* 选取到奇数行的li元素，（注意，所有奇偶数计算都是从0下标开始）*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("li:odd").css("color","red") //选取到了所有的奇数行li元素
			})
		</script>
	</body>
</html>
  1. ":eq(index)" /* 选择index个元素*/
    $(“ul li:eq(2)”) /选择第索引为2的li元素，注意，索引计算是从0开始的/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("ul li:eq(2)").css("color","red") //选取到了索引为2的li元素
			})
		</script>
	</body>
</html>
  1. "gt:(2)" /* 选取索引大于2的元素*/
    $(“ul li:gt(2)”) /* 获取所有索引大于2的li元素，注意，索引计算从0开始*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("ul li:gt(2)").css("color","red") //选取到了所有索引大于2的li元素
			})
		</script>
	</body>
</html>
  1. "lt:(2)" /* 选取索引小于于2的元素*/
    $(“ul li:gt(2)”) /* 获取所有索引小于于2的li元素，注意，索引计算从0开始*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("ul li:lt(2)").css("color","red") //选取到了所有索引小于2的li元素
			})
		</script>
	</body>
</html>
  1. ":header" /* 选取标题元素*/
    $(":header") /* 选取到页面中的标签元素 h1 h2…*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<h1>1</h1>
		<h2>2</h2>
		<span>33</span>
		<span>44</span>
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$(":header").css("background-color","#B2E0FF"); //选取到了所有标题元素
			})
		</script>
	</body>
</html>
  1. ":animated" /* 获取执行动画的元素*/
    $(":animated").css(“background-color”,“blue”);
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  function aniDiv(){
    $("#box").animate({width:300},"slow");
    $("#box").animate({width:100},"slow",aniDiv);
  }
  aniDiv();
  $(".btn1").click(function(){
    $(":animated").css("background-color","blue");
  });
});
</script>
<style> 
div
{
background:#98bf21;
height:40px;
width:100px;
position:relative;
margin-bottom:5px;
}
</style>
</head>
<body>
<div></div>
<div id="box"></div>
<div></div>
<button class="btn1">Mark animated element</button>
</body>
</html>

小结：
已经学习完了基本过滤选择器，这个的方法有一点多，但可以让我们对元素有了更多较复杂的情况进行元素选择，也更加的有利于我们进行程序的编写。给自己加油。

夏灿y
关注
专栏目录
JQuery选择器语法
苏木三少
03-25 1111
JQuery选择器语法：一、什么是选择器语法：1、就是DOM对象进行定位的条件，比如根据ID定位，根据标签类型名。2、jquery中只有三种选择器二、基本选择器：1、【定位条件】：可以根据ID编号，根据标签类型名，根据标签采用样式选择器2、【使用】：三、层级选择器：1、[定位条件]：可以根据标签之间父子关系定位，可以根据标签之间兄弟关系定位2、[标签之间关系]3、【使用】： 一、什么是选择器语法： 1、就是DOM对象进行定位的条件，比如根据ID定位，根据标签类型名。 2、jquery中只有三种选择器 二、基
JQuery 选择器使用详解
闲时不练功，忙时一场空
11-05 2679
文章目录1. 基本选择器2. 层级选择器3. 属性选择器4. 基本过滤器5. 内容过滤器6. 表单过滤器:7. 表单对象属性过滤器8. jQuery 元素筛选 选择器：筛选具有相似特征的元素(标签) 1. 基本选择器 1. 标签选择器（元素选择器） 语法： $("html标签名") 获得所有匹配标签名称的元素 案例： $("div") 选择元素名为<div>的所有元素 2. id选择器 语法： $("#id的属性值") 获得与指定id属性值匹配的元素 案例： $("#one") 选
JQuery选择器超级详细
林高禄
08-06 1万+
基本选择器 id选择器：$("#id的属性值") 获取与指定id属性值匹配的元素 单击按钮，将id为myid的元素背景为绿色 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>JQuery选择器</title> <script src="js/jquery-3.3.1.min...
jQuery选择器分类
weixin_45753617的博客
08-19 1194
jQuery选择器分类
jquery选择器以及案例
m0_59745705的博客
11-03 1162
jquery选择器是jquery为我们提供的一组方法，让我们更加方便的获取到页面中的元素，注意：jquery选择器返回的是jquery对象。 jquery选择器有很多，但是选择器之间可以互相替代，就是说获取到一个元素，会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。 Css()方法：获取/设置样式 1.获取样式：css（）方法设置参数为要获取值的样式名。 $('#getbtn').click(function(){ 1.1获取id为div1这个元素的样式 conso
jQuery选择器大全总结
impact_factor的博客
08-12 1万+
jQuery选择器jQuery的选择器基本选择器基本过滤选择器属性过滤选择器表单选择器子元素选择器操作元素属性操作样式操作样式类获取或设置元素高度和宽度操作HTML代码操作text代码 jQuery的选择器 基本选择器 id选择器：#id 类选择器：.class 标签名选择器： * ：匹配所有元素 基本过滤选择器 Element:first ：选取第一个元素 Element:last : 选取最后一个元素 Element:not(selector)：去除所有与给定选择器匹配的元素 Element:ev
jQuery 选择器
热门推荐
小葵坤_易安的博客
02-22 2万+
一、什么是jQuery选择器 jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素属性和行为的处理。 二、jQuery选择器的优势 代码更简单； 支持CSS1到CSS3选择器； 完善的机制处理 三、jQuery选择器 jQuery选择器分类示意...
jQuery 选择器全部详细笔记
业精于勤，荒于嬉
04-23 2042
1. jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML,css,dom...2. 提供方法、events、选择器，并且方便地为网站提供 AJAX 交互3. 其宗旨是—WRITE LESS,DO MORE,写更少的代码,做更多的事情.4. jQuery 实现了浏览器的兼容问题1. jQuery 对象就是对 DOM 对象进行包装后产生的对象比如： $("#test").html() 意思是指：获取ID为test的元素内的html代码。
jQuery选择器（一）基本选择器、层次选择器及属性选择器的详细使用
Jin_Xiang123的博客
01-14 4134
本篇文章主要介绍在jQuery中基本选择器、层次选择器及属性选择器的详细使用以及部分理论知识 在jQuery中，基本选择器是一组简单而直接的选择器，用于选择DOM元素。它们是最常用和最基础的选择器，可以根据元素的标签名、类名、id等属性来选择元素。基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器。名称语法构成描述示例标的id匹配元素。
jQuery选择器中的特殊符号处理方法
12-29
一般情况下，在jQuery选择器中，我们很少会用到诸如“.”、“#”、“(”、“[”等特殊字符，因为根据W3C规定，HTML文档中属性的值是不能包含有这些个特殊字符的，但是在实际应用中，偶尔也会遇到表达式中含有“#”和...
详解强大的jQuery选择器之基本选择器、层次选择器
12-10
jQuery选择器是jQuery库的核心特性之一，它极大地简化了JavaScript中的DOM操作，使得开发者能够更加高效地选取和操作页面上的元素。本文将详细介绍jQuery的基本选择器和层次选择器。 首先，我们来看基本选择器，这...
jQuery 选择器用法实例分析【prev + next】
10-15
jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。在JavaScript中，选取DOM元素通常需要编写复杂的代码，而jQuery提供了一套简洁、强大的选择器系统，使得选取元素变得简单直观。本文将深入探讨jQuery...
jquery选择器简述
11-24
jQuery选择器是jQuery库的核心功能之一，它极大地简化了对网页DOM元素的选取，使得JavaScript开发者能够更加高效地操作页面内容。jQuery选择器基于CSS选择器，并在其基础上扩展了一些更强大的功能，使得开发者能以...
大学生职业生涯规划书Word模板范文就业求职简历应聘工作PPT医疗康复专业
最新发布
10-12
大学生职业生涯规划书Word模板范文就业求职简历应聘工作PPT医疗康复专业
基于Java的学生信息管理系统的实现与操作
10-12
本文介绍了一个Java实现的小型系统 -- 学生信息管理系统，包括学生数据的增删查改四个主要操作的功能演示，并具体讲解了涉及三个核心类（Student.java、StudentManager.java、StudentFrame.java）的设计思想以及代码逻辑。适合Java初学者用来了解面向对象的概念应用以及Swing工具包进行GUI创建的基础方法和步骤。系统通过提供文本框用于输入学生ID和其他必要信息，并提供按钮来执行对应指令，显示栏展示查询结果显示，使操作变得更为简洁直观有效。 适用于初步掌握Java基础的开发者，特别是想要加强自己对面向对象编码思维理解和运用的同学。 使用此管理系统可以在本地电脑环境上进行学生的数据维护工作（如增删改查），提高学校教务工作者处理信息的效率。 除了基本的数据录入和搜索之外，该项目也帮助理解如何设计合理的模型类并使用集合存储大量数据元素，另外还介绍了如何通过事件监听的方式绑定用户行为和应用程序之间的交互流程。
基于单片机控制的填块切割装置的设计_孟紫腾.pdf
10-12
基于单片机控制的填块切割装置的设计_孟紫腾
ImageNet-1K数据集索引和对应的中英文表单
10-12
ImageNet-1K数据集索引和对应的中英文表单
jQuery选择器全面解析
本教程将深入讲解jQuery选择器的使用。 1. 在HTML页面中添加jQuery 在HTML页面中引入jQuery库，通常有两种方式：一是通过谷歌的CDN(Content Delivery Network)来链接官方提供的最新或特定版本；二是直接下载jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值