Jquery（一）选择器

已于 2022-07-29 01:39:17 修改
阅读量858 收藏 2
点赞数
分类专栏： 前端开发 文章标签： jquery javascript 前端
于 2022-07-29 01:20:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51760209/article/details/126025430
版权

Jquery（一）选择器

一、Jquery语法

语法：$(“选择器”).action()
$:核心函数
选择器:JQuery 查找网页元素的表达式,返回的是 jquery 对象
action:jquery 内置函数,实现特定的功能
核心函数功能：获取dom对象、创建dom对象、克隆dom对象

二、Jquery对象

概念：使用jquery封装的Dom对象叫做jquery对象。

1.优缺点：

•优点：jQuery 的扩展属性和函数在底层判断了浏览器以及版本实现了浏览器的兼容。
•缺点：jQuery 扩展的函数只能实现基本的 dom 操作，但是对于元素独有的 htmldom 接口 封装很少(例如 input、select())，对于 html5 新增的 DOM 方法也不支持，如果想实现类似功 能，只能使用 dom 接口。
结论：为保证兼容性尽量使用 jQuery 对象的 API，但特殊功能也需要使用原生 dom 接口。

2.编码习惯

如果获取的是 jQuery对象，那么要在变量前面加上$。
•var $variable=jQuery对象
•var variable=DOM对象

3、DOM 转 Jquery 对象

1.语法
var $jquery 变量=$(dom 对象);
2.案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 使用 js 给 div 赋值 
			/* function dian(){ 
				//1.得到 div 的 dom 对象 
				var div1=document.getElementById("div1"); 
				//2.赋值 
				div1.innerHTML="我是 div 的内容"; 
				} */ 
			//使用 jquery 给 div 赋值 
			/* function dian(){ 
				//1.得到 div 的 jquery 对象 
				var $div=$("#div1"); 
				//2.赋值 
				$div.html("我是 Jquery 的 div 的内容"); 
				} */ 
				//Dom 对象转换为 jquery 对象 
				function dian(){ 
					//1.得到 div 的 dom 对象 
					var div1=document.getElementById("div1"); 
					//1.使用$(dom 对象)得到 div 的 jquery 对象 
					var $div=$(div1); 
					//2.赋值 
					$div.html("我是 Jquery 的 div 的内容"); 
				} 
		</script>
	</head>
	<body>
		<div id="div1"> </div> 
		<button type="button" onclick="dian()">点我</button> 
	</body> 
</html>

4、JQuery 转 Dom 对象

1、语法
1. jquery 对象[index]
2. jquery 对象.get(index)
2、案例

//Jquery 对象转为 dom 对象 
function dian(){ 
	//1.得到 div 的 jquery 对象 
	var $div=$("#div1"); 
	//2.1.使用 jquery 对象[index] // 
	var div=$div[0]; 
	//2.2.使用 jquery 对象.get(index) 
	var div=$div.get(0); 
	//3.赋值 
	div.innerHTML="我是 div 的内容"; 
} 
<body>
	<div id="div1"> </div> <button type="button" onclick="dian()">点我</button>
</body>

三、Jquery选择器

概念：用于获取 jQuery 对象的表达式
语法：$(“选择器表达式”)

1、基本选择器（※）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
	<script type="text/javascript">
		
		//获取元素     
		//根据id 获取只能是一个
		//根据其他属性 基本上都是多个元素。
		//css  id 能重复吗 ？
		// id 理论上不能重复，但是在css id 可以重复（规范不可以）
		// id重复不影响css的效果，因为其他前端语法，认为id是不可重复
		// 所以当js通过id获取元素的时候，认定根据id获取，只能是唯一的。所以即使你重复了，它也只获取其中的第一个。
		function change_color () {
			document.getElementsByClassName("d")[1].style.backgroundColor="red";
		}
		$(function(){
			// $("标签名称")就可以直接获得元素 ==多个 
			//也不需要遍历直接就可以给这些元素进行赋值。
			// text  == innerText  
			// html  == innerHtml
			// text 和  html 有什么区别吗？
			// text 直接将你写的字符串赋值到指定标签中间。
			// html 如果字符串当中有html标签，在赋值的时候会让html标签生效。
			// css 是给属性进行样式的赋值
			$("#cd").html("<h1>1</h1>");
			$("#cd").css("background-color","#000000");
			//标签选择器：$("标签名称")
			//类选择器：$(".类名")
			//id选择器：$("#id")
			//统配   $("*")
		})
	</script>
	<style type="text/css">
		.d{
			width: 50px;
			height: 50px;
			border: 1px black solid;
		}
	</style>
	</head>
	<body>
		<div class="d"></div>
		<div class="d"></div>
		<div class="d"></div>
		<div class="d"></div>
		<div id="cd"></div>
		<div class="d"></div>
		<div class="d"></div>
		<div class="d"></div>
		<div class="d"></div>
		<div class="d"></div>
		<div class="d"></div>
		<input type="button" value="改颜色" onclick="change_color()" />
			
			 
	</body>
</html>

效果展示：
在这里插入图片描述
组合(合并)选择器 语法: $(选择器 1,选择器 2,选择器 3,…) 或的关系(合并)
将每一个选择器匹配到的元素合并后一 起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function dian() {
				$("div,span,p.myClass").css("background", "red");
			}
		</script>
	</head>
	<body>
		<div>div</div>
		<p class="myClass">p class="myClass"</p> 
		<span>span</span>
		<p class="notMyClass">p class="notMyClass"</p> 
		<button type="button" onclick="dian()">点我</button>
	</body>
</html>

$(“div,span,p.myClass”).css(“background”, “red”);注意此处 p 和 .myClass 之间没有逗号，类名选择器前不加逗号。

2、属性选择器（掌握）

概念：通过元素的属性获取相应的元素
在这里插入图片描述
$("input[id][name$='man']")是复合属性选择器，需要同时满足多个条件时使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--属性选择器-->
		<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
		<script type="text/javascript">
		$(function(){
			$("[name='1']").css("background-color","aqua");
			//   获得含有name属性并且值等于username的标签
			$("input[name='2']").css("background-color","red");
			//  获得 input 标签 中 得含有name属性并且值等于username的标签
			$("[value]").css("background-color","yellow")
			// 获得含有name属性的标签
           $("input[class]").css("background-color","gray")
           //获得input标签中含有name属性
            $("input[id][name='hello']").css("background-color","pink")
			// 属性选择器可以使用多个属性搭配进行检索。
			// ！不等于    ^开头   $ 结尾    *通配 
			$("[name^='child']").css("background-color","cornflowerblue")
			$("[name$='age']").css("background-color","blue");
			// $("input[name!='username']").css("background-color","currentcolor")
			$("[name*='u']").css("background-color","green");
		})
		</script>
	</head>
	<body>
		<input type="text" name="1" />
		<input type="text" name="2" />
		<input type="password" name="name" value="3"/>
		<input type="text" name="password" class="4"/>
		<input type="text" name="childname" />
		<input type="text" name="oldage" />
		<input id="uname" type="text" name="hello"/>
		<input type="text" name="username" />
		<input type="text" name="username" />
		<input type="text" name="username" />
	</body>
</html>

效果展示：
在这里插入图片描述

3、层次选择器（不常用）

通过 DOM 元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
	<script type="text/javascript">
		$(function(){
			// 获取 table 下th标签
			$("table th").css("background-color","pink");
			//注意此处如果写$("table>tr")会无效，因为tr不是table的直接子元素        
			$("table> tbody").css("background-color","yellow");
			$("table+div").css("border","2px solid #666");
			$("#e~p").css("color","red");
		})
	</script>
	</head>
	<body>
		<table border="1">
			<thead>
				<th>123</th>
				<th>123</th>
				<th>123</th>
			</thead>
			<tbody>
					<tr id="he">
				<td><h1>1</h1></td>
				<td><h1 class="co">1</h1></td>
				<td><h1>1</h1></td>
			</tr>
			<tr>
				<td><h1>2</h1></td>
				<td><h1 class="co">2</h1></td>
				<td><h1>2</h1></td>
			</tr>
			<tr>
				<td><h1>3</h1></td>
				<td><h1 class="co">3</h1></td>
				<td><h1>3</h1></td>
			</tr>
			</tbody>
		
		</table>
		<div style="width: 100px;height: 100px;"></div>
		<div>
			<p id="e">hello world</p>
			<p>锦瑟无端五十弦</p>
			<p>一弦一柱思华年</p>
		</div>
	</body>
</html>

效果展示：
在这里插入图片描述

4、基础过滤选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h2>Happiness</h2>
		<ul>
			<li>list item 1</li>
			<li>list item 2</li>
			<li>list item 3</li>
			<li>list item 4</li>
			<li>list item 5</li>
		</ul>
		<script type="text/javascript">
			// $("li:not(:last)").css("background", "red");//在返回集合清除不匹配的指定元素
			$("li:first").css("color","orange");//匹配找到的第一个元素
			$("li:last").css("color","pink");//匹配找到的最后一个元素
			$("li:odd").css("background","lightblue");//匹配返回结果集合中索引值为奇数的元素
			$("li:eq(2)").css("color","green");//匹配返回结果集合中索引值第index位置的元素
			$(":header").css("background","pink");//匹配h1-h6的标题元素
		</script>
	</body>
</html>

效果展示：
在这里插入图片描述

5、子元素过滤器

在这里插入图片描述

6、内容过滤器（不常用）

在这里插入图片描述

7.可见性过滤选择器

在这里插入图片描述

8、表单类型过滤器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<form> 
		<input type="hidden" /><br /> 
		<input type="image"/><br />
		<input type="password" /><br /> 
		<input type="radio" /><br />
		<input type="submit" /><br />
		<input type="text" />
		<button type="button" onclick="test()">点我</button>
		</form> 
		<script type="text/javascript">
			function test(){
				// $(":input").css("background","gray");
				$(":text").css("background","red");
				$(":password").css("background","yellow");
				$(":radio").prop("checked",true);
				$(":checkbox").css("background","blue");
				$(":submit").css("background","lightblue");
				$(":image").css("background","orange");
			}
		</script>
	</body>
</html>

效果展示：
在这里插入图片描述

9.表单状态过滤器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function test() {
				//查找所有可用的 input 元素 
				$("input:enabled").css("background","red");
				// 查找所有不可用的 input 元素 
				$("input:disabled").css("background","yellow");
				$("input:checked").each(function(){
					//this 代表当前被访问的 dom 对象 
					console.log(this.value);
				});
			}
		</script>
	</head>
	<body>
		<form>
			<input name="email" disabled="disabled" /><br />
			<input name="id"/><br />
			<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
			<input type="checkbox" name="newsletter" value="Weekly" />
			<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
		</form>
		<select>
			<option value="1">Flowers</option>
			<option value="2" selected="selected">Gardens</option>
			<option value="3">Trees</option>
		</select>
		<button type="button" onclick="test()">点我</button>
	</body>
</html>

效果展示：
在这里插入图片描述

总结

以下内容需要掌握，本文提供知识点并不够详尽，后续会继续补充，祝看到最后的你天天开心，如果有帮助到你的话就点赞收藏吧！

1.语法:$(“选择器”).action() 
2.互转1.dom->jquery:$(dom 对象) 2.jquery->dom: 1.jquery 对象[index] 2.jquery 对象.get(index) 
3.选择器1.语法:$(“选择器表达式”) 2.基本选择器 1.id:$("#id") 2.类:$(".类名") 3.元素:$("元素名") 
4.组合选择器:$(“选择器 1,选择器 2,选择器 3,...”) 
5.属性选择器 1.[id] 2.[属性=值] 3.[属性!=值] 4.[属性^=值] 3.[属性$=值] 3.[属性*=值] 3.[属性=值][属性=值][属性=值] 
6.层次选择器 1.后代:$("parent child") 2.子:$("parent>child") 3.相邻的下一个:$("prev+next") 4.prev ~ siblings:匹配 prev 元素之后的所有 siblings 元素
君知燕云归
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery选择器
m0_57774967的博客
06-16 4641
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jquery周历选择器
07-26
本项目“jquery周历选择器”利用jQuery的灵活性和易用性，构建了一个适用于混合应用程序（Hybrid App）的周历选择器组件。 1. **周历选择器设计**： - 周历选择器通常用于日程管理或时间规划应用，显示一周的日期...
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_44106237的博客
08-15 3545
jQuery的四种选择器，基本选择器，层级选择器，过滤选择器，筛选选择器（方法）
jQuery 常用选择器
qq_27480007的博客
08-01 6299
jQuery 常用选择器
jQuery子元素选择器
weixin_45747278的博客
10-20 3327
7.jQuery子元素选择器 7.1:first-child 匹配所给选择器( :之前的选择器)的第一个子元素类似的:first匹配第一个元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1) <ul> <li>John</li> <li>Karl</li> ...
jquery 选择器及循环
baobao__的博客
09-23 1891
文章目录1. 基本选择器2. 层次选择器3.基本过滤选择器4. 内容过滤选择器5.属性选择器6.表单相关选择器7.循环1.map2.each 1. 基本选择器 //标签 $("div").css("background","red"); //id $("#active").css("background","orange"); //类 $(".box").css("background","g...
jQuery的选择器大全
Chenftli的博客
08-11 6998
jQuery的选择器 一、基本选择器 1. ID选择器 ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素，并以iQuery包装集的形式返回给对象。 使用公式:$("#id") 示例：$("#box") //获取id属性值为box的元素 2. 元素选择器 ...
JQuery属性选择器
T623048540的博客
03-13 9572
$('input'); //所有input元素 $('input[id]'); //input元素中，设置了id属性的所有元素。 $('input[id=btn1]'); //input元素中，id=btn1的元素。 $('input[id*=btn]'); //input元素中，id包含btn的所有元素。 $('input[id^=btn]'); //input元素中，id以btn开头的所有元素。 $('input[id$=btn]'); //input元素中，id以btn结尾的所有元素。 $('inp
JQuery中属性选择器
you4580的专栏
03-21 1854
语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器。语法：$("A[属性名='值'][]...")包含多个属性条件的选择器。语法： $("A[属性名]")包含指定属性的选择器。
jQuery选择器分类
weixin_45753617的博客
08-19 1138
jQuery选择器分类
jQuery颜色选择器ColorPicker
04-26
**jQuery颜色选择器ColorPicker详解** 在Web开发中，用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中，颜色选择器是一个常见的组件，它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...
jquery日历选择器
06-06
本篇文章将深入探讨jQuery日历选择器的实现原理、功能特点以及实际应用，帮助开发者更好地理解和使用这一工具。 一、jQuery日历选择器简介 jQuery日历选择器是基于JavaScript库jQuery的一款插件，主要用于日期选择...
jQuery国籍选择器
06-01
【jQuery国籍选择器】是一个基于JavaScript库jQuery的插件，主要功能是为用户提供一个完整的、已排序的国家选择界面。这个插件适用于那些需要用户输入国籍的网页表单，能够提供方便、友好的用户体验。 首先，jQuery...
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
最新发布
m0_74283290的博客
08-03 668
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 308
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 246
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 919
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
jQuery选择器全面解析
本教程将深入讲解jQuery选择器的使用。 1. 在HTML页面中添加jQuery 在HTML页面中引入jQuery库，通常有两种方式：一是通过谷歌的CDN(Content Delivery Network)来链接官方提供的最新或特定版本；二是直接下载jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

君知燕云归

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值