第二篇：jQuery选择器（jQuery）

最新推荐文章于 2024-09-05 16:56:18 发布
最新推荐文章于 2024-09-05 16:56:18 发布
阅读量111 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40119412/article/details/99058697
版权

jQuery选择器02

选择器实例选取
：first$("p:first")第一个<p>元素
:last$("p:last")最后一个元素
:even$("tr:even")所有偶数<tr>元素
:odd$("tr:odd")所有奇数<tr>元素
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<script type="text/javascript"> 
	$(document).ready(function(){
    $("p:first").css("background-color","#B2E0FF");
}); 
</script>	
</head>
<body>
<h1>欢迎来到音乐网站！</h1>
<p class="intro">My name is YanHSama!</p>
<p>Can you tell me ?</p>
<p>I like music very much!</p>
<div id="choose">
Which is your favourite:
<ul>
<li>music</li>
<li>book</li>
<li>sport</li>
</ul>
</div>
</div>
</body>
</html>

 

 

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<script type="text/javascript"> 
	$(document).ready(function(){
    $("p:last").css("background-color","#B2E0FF");
}); 
</script>	
</head>
<body>
<h1>欢迎来到音乐网站！</h1>
<p class="intro">My name is YanHSama!</p>
<p>Can you tell me ?</p>
<p>I like music very much!</p>
<div id="choose">
Which is your favourite:
<ul>
<li>music</li>
<li>book</li>
<li>sport</li>
</ul>
</div>
</div>
</body>
</html>

 

 

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<script type="text/javascript"> 
	$(document).ready(function(){
    $("tr:even").css("background-color","#B2E0FF");
}); 
</script>	
</head>
<body>
<p>欢迎来到音乐网站！</p>
<p class="intro">My name is YanHSama!</p>
<p>Can you tell me ?</p>
<p>I like music very much!</p>
<div id="choose">
Which is your favourite:
<ul>
<li>music</li>
<li>book</li>
<li>sport</li>
<li>climb</li>
</ul>
</div>
<div id="info">
	<table border="1">
		<tr>
			<th>1</th>
			<th>2</th>
			<th>3</th>
			<th>4</th>
			<th>5</th>
			<th>6</th>
		</tr>
		<tr>
			<td>d</td>
			<td>的</td>
			<td>发</td>
			<td>g</td>
			<td>y</td>
			<td>g</td>
		</tr>
		<tr>
			<td>d</td>
			<td>的</td>
			<td>发</td>
			<td>g</td>
			<td>y</td>
			<td>g</td>
		</tr>
		<tr>
			<td>d</td>
			<td>的</td>
			<td>发</td>
			<td>g</td>
			<td>y</td>
			<td>g</td>
		</tr>
		<tr>
			<td>d</td>
			<td>的</td>
			<td>发</td>
			<td>g</td>
			<td>y</td>
			<td>g</td>
		</tr>
		<tr>
			<td>d</td>
			<td>的</td>
			<td>发</td>
			<td>g</td>
			<td>y</td>
			<td>g</td>
		</tr>
		<tr>
			<td>d</td>
			<td>的</td>
			<td>发</td>
			<td>g</td>
			<td>y</td>
			<td>g</td>
		</tr>
	</table>
</div>
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<script type="text/javascript"> 
	$(document).ready(function(){
    $("tr:odd").css("background-color","#B2E0FF");
}); 
</script>	
</head>
<body>
<p>欢迎来到音乐网站！</p>
<p class="intro">My name is YanHSama!</p>
<p>Can you tell me ?</p>
<p>I like music very much!</p>
<div id="choose">
Which is your favourite:
<ul>
<li>music</li>
<li>book</li>
<li>sport</li>
<li>climb</li>
</ul>
</div>
<div id="info">
	<table border="1">
		<tr>
			<th>1</th>
			<th>2</th>
			<th>3</th>
			<th>4</th>
			<th>5</th>
			<th>6</th>
		</tr>
		<tr>
			<td>d</td>
			<td>的</td>
			<td>发</td>
			<td>g</td>
			<td>y</td>
			<td>g</td>
		</tr>
		<tr>
			<td>d</td>
			<td>的</td>
			<td>发</td>
			<td>g</td>
			<td>y</td>
			<td>g</td>
		</tr>
		<tr>
			<td>d</td>
			<td>的</td>
			<td>发</td>
			<td>g</td>
			<td>y</td>
			<td>g</td>
		</tr>
		<tr>
			<td>d</td>
			<td>的</td>
			<td>发</td>
			<td>g</td>
			<td>y</td>
			<td>g</td>
		</tr>
		<tr>
			<td>d</td>
			<td>的</td>
			<td>发</td>
			<td>g</td>
			<td>y</td>
			<td>g</td>
		</tr>
		<tr>
			<td>d</td>
			<td>的</td>
			<td>发</td>
			<td>g</td>
			<td>y</td>
			<td>g</td>
		</tr>
	</table>
</div>
</body>
</html>

 

HaanLen
关注
专栏目录
jquery 控制html页面表格当中奇偶行颜色不同 鼠标悬停变色
weishuxiao1的专栏
07-11 3582
jQuery一句话搞定 $(document).ready(function() { //奇偶行分色 jquery一句搞定 就是这么简单 $("tr:even").css("background-color","#B2E0FF"); //下拉树形菜单 $(".user_done").click(function() { $(".user_did"). toggle();
日期选择器：jquery datepicker的使用
stationinthemind的博客
11-06 4866
在jquery ui中，提供了一个非常实用的日期选择器：datepicker，使用它能非常方便的展现日历中的日期，灵活配置相关选项，包括日期格式、范围等。我们经常在WEB应用中用到datepicker，比如要求用户输入日期进行相关查询的。我们很早之前就应用datepicker到很多项目中，今天整理成文与大家分享。demodownload下载源码。
jQuery 学习-样式篇（三）：jQuery 选择器类型详解
杂货铺子
12-25 6248
jQuery 选择器 一、ID 选择器 ID 选择器是最基本的选择器，jQuery 内部使用了 JavaScript 函数 document.getElementByID() 来处理 ID 的获取。 ID 是唯一的，每个 ID 在每个页面中只能使用一次，如果多个元素分配了相同的 ID，将只匹配该 ID 选择集合的第一个 DOM 元素。 在 jQuery 中，ID 选择器的命令是 $('#id')： <!DOCTYPE html> <html> <head> <ti
jQuery入门（二）jQuery选择器
kong7906928的博客
07-28 854
jQuery的选择器
【学习笔记】：jQuery选择器详解
天乔巴夏丶
03-02 455
文章目录一、jQuery概述二、jQuery对象的创建方式三、JS对象和jQuery对象的转换1、JS->jQuery2、jQuery->JS四、jQuery的选择器1、基本选择器2、层级选择器3、基本过滤选择器4、内容过滤选择器5、可见性过滤选择器6、属性过滤选择器7、子元素过滤选择器8、表单对象属性过滤选择器9、表单选择器 一、jQuery概述 write less , do m...
jQuery选择器
weixin_52937170的博客
09-05 1566
jQuery选择器；jQuery选择器速查手册；快速上手jQuery选择器的学习和应用；
JQuery专题(二)-JQuery选择器
weixin_43139024的博客
10-03 1135
jQuery
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选择器
m0_72565784的博客
04-21 1138
通过CSS选择器获取元素的方式是非常灵活的，但是CSS选择器获取元素后只能操作该元素的样式，要想为元素添加行为(如处理单击事件)，还需要通过JavaScript代码来实现。为此，jQuery模仿CSS选择器实现了jQuery选择器，通过jQuery选择器来获取元素，不仅让获取元素的方式更加多样化，而且可以在获取元素后为元素添加行为。jQuery选择器的基本语法格式如下所示上诉代码中，select代表jQuery选择器，代码执行后，返回一个jQuery对象。
jquery选择器(2)
qq_45466959的博客
05-24 1008
​ 在程序开发中，无论是操作DOM还是为元素添加事件，都需要先获取到指定元素。为此，jQuery提供了选择器，通过选择器可以获取元素并对元素进行操作。​ 通过css选器获取元素的方式是非常灵活的，但是css选择器获取元素后只能操作该元素的样式，要想为元素添加行为(如处理单击事件)，还需要通过 JavaScript代码来实现。为此，jQuery模仿css选择器实现了 jQuery选择器，通过 jQuery选择器来获取元素，不仅让获取元素的方式更加多样化，而且可以在获取元素后为元素添加行为。
jQuery选择器选中最后一个元素，倒数第二个元素操作示例
12-09
本文将详细讲解如何使用jQuery选择器选取HTML文档中的最后一个元素以及倒数第二个元素，以实例的形式进行演示。 首先，我们来看HTML的基础结构。在提供的示例中，我们有一个`<div>`元素内包含五个`<p>`元素，每个`...
jQuery中:lt选择器用法实例
12-09
`:lt(index)`选择器的基本语法是通过在jQuery选择器后添加`:lt(index)`，其中`index`参数是一个整数值，表示要选取的元素的索引位置。需要注意的是，索引是从0开始计算的，所以`:lt(3)`将选取索引为0、1和2的元素。 ...
jQuery :first选择器使用介绍
10-27
`:first`选择器是jQuery选择器家族的一员，它的主要作用是选取指定类型的第一个元素。在jQuery中，你可以使用这个选择器来操作DOM（文档对象模型）中的第一个特定元素，而无需知道它的具体位置或ID。这在处理大量同...
jQuery温习篇 强大的JQuery选择器
10-29
知识点三：jQuery选择器的使用 1. 基本选择器：包括ID选择器、类选择器、元素选择器、群组选择器和通配符选择器。 2. 过滤选择器：包括:first、:last、:eq(index)、:gt(index)、:lt(index)、:even、:odd、:header、:...
jQuery 选择器、DOM操作、事件、动画
12-03
### jQuery选择器 jQuery的选择器允许开发者高效地选取DOM元素，类似于CSS选择器。 1. **基本选择器**： - `$("#test")` 选择ID为`test`的元素。 - `$(".test")` 选择所有class为`test`的元素。 - `$("p")` ...
中国移动：算网一体定义算力网络未来.pdf
最新发布
11-03
中国移动：算网一体定义算力网络未来.pdf
yolo算法-包装盒检测数据集-26张图像带标签-盒子.zip
11-03
yolo系列算法目标检测数据集，包含标签，可以直接训练模型和验证测试，数据集已经划分好，包含数据集配置文件data.yaml，适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法； 包含两种标签格:yolo格式（txt文件）和voc格式（xml文件），分别保存在两个文件夹中; yolo格式：<class> <x_center> <y_center> <width> <height>， 其中： <class> 是目标的类别索引（从0开始）。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标，这些坐标是相对于图像宽度和高度的比例值，范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度，也是相对于图像宽度和高度的比例值
VB程序实例-使用Access报表.zip
11-03
VB程序实例-使用Access报表.zip
基于MATLAB图像平滑处理系统GUI面板.zip
11-03
强网杯
全面解析：jQuery选择器的使用与分类
"该资源是关于前端开发中jQuery选择器的全面列举，旨在帮助学习者以清晰的结构记忆各种选择器，便于实际操作时快速准确地选取DOM元素。" 在前端开发中，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值