jQuery选择器

风起携月归

于 2024-08-12 12:57:58 发布

阅读量183

点赞数 1

分类专栏： java JavaEE 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/yjp1240201821/article/details/141128580

版权

JavaEE 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

java

49 篇文章 0 订阅

订阅专栏

jQuery选择器

文章目录

jQuery选择器

一、定义

jQuery选择器是jQuery库中用于查找和操作HTML元素的功能。它们与CSS选择器非常相似，可以根据元素的标签名、类名、ID等属性进行选择。

了解JQuery：jQuery是由美国人John Resig于2006年创建的一个开源项目，如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的强大框架体系，它的主旨是：以更少的代码，实现更多的功能（Write less，do more）。

2.0版本以后，就不考虑兼容浏览器的问题

二、jQuery的基本功能

1.访问和操作DOM元素

2.控制页面样式

3.对页面事件的处理

4.与Ajax技术的完美结合

5.大量插件在页面中的运用

三、jQuery选择器

在页面中为某个元素添加样式或事件时，必须先准确地找到该元素——在jQuery库中，可以通过选择器实现这一重要的核心功能。

分类：基本选择器、属性选择器、层次选择器、过滤选择器、表单选择器、内容选择器

1. 基本选择器

选择所有元素：

$("*")

选择文档中的所有元素。

按标签名选择：

$("p")

选择所有

标签。

按类名选择：

$(".classname")

选择所有带有指定类名的元素。

按ID选择：

$("#idname")

选择具有特定ID的元素。

2. 属性选择器

按属性值选择：

$("input[name='username']")

选择所有name属性等于"username"的<input>元素。

选择包含某个属性的元素：

$("a[target]")

选择所有包含target属性的<a>标签。

按属性值开始选择：

$("input[name^='user']")

选择所有name属性以"user"开头的<input>元素。

按属性值结束选择：

$("input[name$='name']")

选择所有name属性以"name"结尾的<input>元素。

按属性值包含选择：

$("input[name*='ser']")

选择所有name属性包含"ser"的``元素。

3. 层次选择器

选择直接子元素：
```
$("ul > li")
```
选择所有作为<ul>标签直接子元素的<li>标签。
选择后代元素：
```
$("div p")
```
选择所有<div>标签的后代<p>标签，不限层级。
选择相邻元素：
```
$("h1 + p")
```
选择紧接在<h1>标签后的第一个<p>标签。
选择同级元素：
```
$("h1 ~ p")
```
选择与<h1>标签在同一级别的所有<p>标签。

4.过滤选择器

选择第一个元素：
```
$("p:first")
```
选择第一个<p>元素。
选择最后一个元素：
```
$("p:last")
```
选择最后一个<p>元素。
选择奇数位置的元素：
```
$("tr:odd")
```
选择所有奇数位置的行（索引从0开始，即第2、4、6…行）。
选择偶数位置的元素：
```
$("tr:even")
```
选择所有偶数位置的行（即第1、3、5…行）。
选择具有特定索引的元素：
```
$("li:eq(2)")
```
选择第三个<li>元素（索引从0开始）。
选择包含特定文本的元素：
```
$("p:contains('Hello')")
```
选择包含文本"Hello"的<p>标签。

5. 表单选择器

选择所有文本框：
```
$(":text")
```
选择所有类型为text的<input>元素。
选择所有复选框：
```
$(":checkbox")
```
选择所有类型为checkbox的<input>元素。
选择所有被选中的元素：
```
$(":checked")
```
选择所有已被选中的<input>元素，如复选框或单选框。
选择所有禁用的元素：
```
$(":disabled")
```
选择所有已禁用的表单元素。

6. 内容选择器

选择包含特定子元素的元素：
```
$("div:has(p)")
```
选择包含<p>子元素的所有<div>元素。
选择空元素：
```
$("p:empty")
```
选择所有不包含子元素或文本的<p>标签。

这些选择器可以组合使用，帮助你更高效地操作DOM元素。例如，选择所有<div>标签中的第一个<p>元素可以这样写：

$("div p:first")

通过这些jQuery选择器，你可以灵活地操作网页中的元素，实现丰富的动态效果。

四、选择器综合案例

点击简化将部分学科进行隐藏，简化变为更多，右上角图标改变（需自己导入图片）

直接上源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择</title>
		<style type="text/css">
			body{font-size:13px}
         	#all{border:solid 1px #666;width:320px;overflow:hidden}
         	#all #head{background-color:#eee;padding:8px;height:18px;cursor:hand}
         	#all #head h3{padding:0px;margin:0px;float:left}
         	#all #head span{float:right;margin-top:3px}
         	#all #content{padding:8px}
         	#all #content ul {list-style-type:none;margin:0px;padding:0px}
         	#all #content ul li{ float:left;width:95px;height:23px;line-height:23px}
         	#all #btn{float:right;padding-top:5px;padding-bottom:5px}       	
		</style>
		<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
		<script type="text/javascript">
			$(function(){
				
				$("img").click(function(){
					if($(this).attr("src") == "img/up.bmp"){
						
						$(this).attr("src","img/down.bmp");
						$("#content").css("display","none");
						
					}else if($(this).attr("src") == "img/down.bmp"){
						
						$(this).attr("src","img/up.bmp");
						$("#content").css("display","block");
					}
				})
				
				$("#btn>a").click(function(){
					if($(this).text() == "简化"){
						
						$(this).text("更多");
						$("ul>li:gt(5):not(:last)").css("display","none");
						
					}else if($(this).text() == "更多"){
						
						$(this).text("简化");
						$("ul>li:gt(5):not(:last)").css("display","block");
						
					}
				})
				
			})
		</script>
	</head>
	<body>
		<div id="all">
			<div id="head">
				<h3>学科分类</h3>
				<span><img src="img/up.bmp"/></span>
			</div>
			<div id="content">
				<ul>
					<li>
						<a href="#">JavaEE</a><i> (1110) </i></li>
					<li>
						<a href="#">PHP</a><i> (230) </i></li>
					<li>
						<a href="#">BIG</a><i> (1430) </i></li>
					<li>
						<a href="#">Android</a><i> (1560) </i></li>
					<li>
						<a href="#">IOS</a><i> (870) </i></li>
					<li>
						<a href="#">H5</a><i> (1460) </i></li>
					<li>
						<a href="#">VR</a><i> (1450) </i></li>
					<li>
						<a href="#">小程序</a><i> (1780) </i></li>
					<li>
						<a href="#">演讲</a><i> (930) </i></li>
					<li>
						<a href="#">PPT</a><i> (3450) </i></li>
					<li>
						<a href="#">Word</a><i> (980) </i></li>
					<li>
						<a href="#">其他</a><i> (3230) </i></li>
				</ul>
				<div id="btn">
					<a href="#">简化</a>
				</div>
			</div>
		</div>
	</body>
</html>