第一篇：jQuery选择器（jQuery）

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

jQuery选择器01

本文例子源于W3School

选择器

实例

选取

*

$("*)

所有元素

#id

$("lastname")

id="lastname"的元素

.class

$(".intro")

所有class="intro"的元素

element

$("p")

所有<p>元素

.class.class

$(".intro.demo")

所有class="intro"且class="demo"的元素

【1】*

例子

<!DOCTYPE html>
<html>
	<head>
	<script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
	<script type="text/javascript"> 
	$(document).ready(function(){
    $("body *").css("background-color","#B2E0FF");
	});
 
	</script>	
	</head>
	<body>
		<h1>Welcome to My Homepage</h1>
		<p class="intro">My name is Donald</p>
		<p>I live in Duckburg</p>
		<p>My best friend is Mickey</p>
	<div id="choose">
		Who is your favourite:
	<ul>
		<li>Goofy</li>
		<li>Mickey</li>
		<li>Pluto</li>
	</ul>
	</div>
	</body>
</html>

 

【2】#id

例子

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
<script type="text/javascript"> 
	$(document).ready(function(){
    $("#choose").css("background-color","#B2E0FF");
});
</script>	
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>

【3】.class

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
<script type="text/javascript"> 
	$(document).ready(function(){
    $(".intro").css("background-color","#B2E0FF");
}); 
</script>	 
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>

 

【4】element

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
<script type="text/javascript"> 
	$(document).ready(function(){
    $("p").css("background-color","#B2E0FF");
}); 
</script>	
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</div>
</body>
</html>

【5】.class.class

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
<script type="text/javascript"> 
	$(document).ready(function(){
    $(".intro").css("background-color","#B2E0FF");
    $(".demo").css("background-color","brown");
});
</script>	
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p class="demo">I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</div>
</body>
</html>

HaanLen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery入门（二）--jQuery选择器
weixin_44122710的博客
06-25 277
jQuery 中 的选择器完全继承了 CSS 的风格，通过使用 jQuery 选择器，我们可以快速的找到目标 DOM 元素，然后对它们进行一系列操作，学会使用选择器是学习 jQuery 的基础，jQuery 的行为规则都必须在获取到元素后才能生效。 jQuery 中所有选择器都以美元符号开头：$()。 jQuery 选择器的写法和 CSS 选择器的写法十分相似，只不过两者的作用效果不同，CSS 选择器找到元素后是添加样式，而 jQuery 选择器找到元素后是添加行为， DOM 对象方法 document.
学习jQuery第一天：演示jQuery层次选择器
fangcaixia498602700的专栏
10-10 650
body{ font: 0.8em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif; color: #4F4A4A background: #F4FFDF;
jquery-chosen选择框插件零基础学习
热门推荐
陈袁的博客
03-27 1万+
jquery-chosen 选择框插件 jquery-chosen 选择框插件 第一、前言 第二、需要入库文件 第三、一个简单的例子。 第四、初始化方法chosen配置 第五、select组件属性 第六、class样式 第七、事件及抛事件 第八、取值，初始化选中项，数据渲染 第九、分组显示 第十、多选项 总结 第一、前言 Chosen是jquery下的一个下拉框插件。它...
jQuery选择器
m0_67901663的博客
04-13 5951
jQuery选择器
jQuery的选择器
weixin_44106237的博客
08-15 3538
jQuery的四种选择器，基本选择器，层级选择器，过滤选择器，筛选选择器（方法）
jQuery-选择器
weixin_45042311的博客
12-04 6840
jQuery
jQuery系列之选择器
老__L的博客
08-27 2713
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。根据给定的ID匹配一个元素。使用任何的元字符作为名称的文本部分， 它必须被两个反斜杠转义：。 1.1.2.1、参数 id：String 用于搜索的，通过元素的 id 属性中给定的值 1.1.3、示例 查找含有特殊字符的元素 1.2、全选选择器 1.2.1、概述 匹配所有元素多用于结合上下文来搜索。 1.2.3、示例 找到每一个元素 1.3、类选择器 1.3.1、概述 根据给定的 css
jQuery :first选择器使用介绍
10-27
`:first`选择器是jQuery选择器家族的一员，它的主要作用是选取指定类型的第一个元素。在jQuery中，你可以使用这个选择器来操作DOM（文档对象模型）中的第一个特定元素，而无需知道它的具体位置或ID。这在处理大量同...
jQuery中:checkbox选择器用法实例
10-24
`:checkbox`选择器的语法非常简洁，正如其名，只需在jQuery的选择器表达式中加上`:checkbox`即可。例如： ```javascript $(":checkbox") ``` 这行代码会选取页面上所有的复选框元素。 下面是一个关于`:checkbox`...
jQuery中:lt选择器用法实例
12-09
`:lt(index)`选择器的基本语法是通过在jQuery选择器后添加`:lt(index)`，其中`index`参数是一个整数值，表示要选取的元素的索引位置。需要注意的是，索引是从0开始计算的，所以`:lt(3)`将选取索引为0、1和2的元素。 ...
jQuery过滤选择器:not()方法使用介绍
10-26
在jQuery库中，`:not()`过滤选择器是一个非常有用的功能，它允许开发者排除掉符合特定条件的元素，从而更精确地定位和操作DOM中的目标元素。`:not()`方法的使用非常直观，它接受一个选择器作为参数，这个选择器描述...
jQuery中:header选择器用法实例
12-02
第一个实例仅改变特定类别的标题，而第二个实例则影响所有标题元素。 总的来说，`:header`选择器在jQuery中是一个非常实用的工具，尤其当你需要对整个页面或特定区域的标题进行统一操作时。通过结合其他CSS选择器，...
jquery的9大选择器
qq_60504665的博客
01-31 1739
是JQuery最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名来查找DOM元素（在网页中id只能使用一次，class允许重复使用）。如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器。按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器。属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。（5）子元素过滤选择器。
jQuery选择器（一）基本选择器、层次选择器及属性选择器的详细使用
Jin_Xiang123的博客
01-14 3548
本篇文章主要介绍在jQuery中基本选择器、层次选择器及属性选择器的详细使用以及部分理论知识 在jQuery中，基本选择器是一组简单而直接的选择器，用于选择DOM元素。它们是最常用和最基础的选择器，可以根据元素的标签名、类名、id等属性来选择元素。基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器。名称语法构成描述示例标的id匹配元素。
jquery的选择器（选择器的分类和作用）
weixin_67138897的博客
10-19 3589
基本选择器是jQuery中最常用也是最简单的选择器，它通过元素的id、class和标签名等来查找DOM元素。
jQuery 选择器全部详细笔记
业精于勤，荒于嬉
04-23 2007
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基础----常用的选择器
u011863822的博客
07-20 1341
本篇就是列举了一些常用的jQuery选择器而匹配元素，当然如果学习过css会更好理解的。
b050闲置图书分享-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
最新发布
07-23
本次开发的闲置图书分享平台实现了收货地址管理、字典管理、公告管理、留言板管理、图书管理、图书收藏管理、图书评价管理、图书订单管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让闲置图书分享平台更能从理念走到现实，确确实实的让人们提升信息处理效率。 管理图书的数据，此页面主要实现图书的增加、修改、删除、查看的功能。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。
前端面试必备：jQuery选择器与插件实现详解
1. **jQuery选择器**：面试时可能会询问常见的jQuery选择器。包括但不限于： - `#`号选择器：用于选取具有特定ID的元素，如`$("#myId")`。 - 分组选择器：`(selector1, selector2)`，选取同时满足两个条件的元素。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值