04- jQuery 选择器大全教程收藏备用

企业开发 2020-09-21 10:25:47 阅读次数: 0

jQuery 基本选择器&层次选择器

作者：曾庆林

jQuery选择器的优势

  • 写法简单
  • 支持CSS1至CSS3选择器
  • 完善的处理机制

CSS选择器回顾

选择器 语法
ID选择器 #ID{CSS规则}
类选择器 .className{CSS规则}
分组选择器 E1,E2,E3{CSS规则}
包含选择器 E F{CSS规则}
通配符选择器 *{CSS规则}

jQuery选择器的分类

  1. 基本选择器
  2. 层次选择器
  3. 过滤选择器
    • 基本过滤选择器
    • 内容过滤选择器
    • 可见性过滤选择器
    • 属性过滤选择器
    • 子元素过滤选择器
    • 表单对象属性过滤选择器
  4. 表单选择器

jQuery基本选择器

选择器 1 描述 返回 示例
#id 根据指定的id匹配元素 单个元素 $(“#hel”)选择id=hel的元素
.class 根据类匹配元素 集合元素 $(“.hel”)选择class=hel的元素
Element 根据元素名匹配元素 集合元素 $(“div”)选择所有的div元素
* 匹配所有元素 集合元素 $(“*”)选择所有元素
E1,E2,E3 分组匹配元素 集合元素 $(“div,span,.hotclass”)选择所有div，span,和class为hotcalss的元素

层次选中器

选择器 描述 返回值 示例
$(“E1 E2”) 选择E1下所有E2 集合元素 $“div span”)选择div下所有span
$(“E1> E2”) 选择E1下的子E2,不包含E2下满足的元素 集合元素 $("div > span”)选择div下的span元素，不包含span下的span元素
$(“E1+ E2”) 选择E1后紧相邻的E2 集合元素 $(".one + div")选择class=one的下一个div元素
$(“E1~ E2”) 选择E1之后的所有E2 集合元素 $("#one ~ div")选择id为one后的所有div元素

补充说明：
( " E 1 + E 2 " ) 可 以 用 ("E1 + E2")可以用 ("E1+E2")可以用(E1).next(E2)代替
( " E 1   E 2 " ) 可 以 用 ("E1 ~ E2")可以用 ("E1 E2")可以用(E1).nextAll(E2)代替

jQuery 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即过滤选择器都是以冒号:开头。

过滤选择器分类：

  • 基本过滤选择器
  • 内容过滤选择器
  • 可见性过滤选择器
  • 属性过滤选择器
  • 子元素过滤选择器
  • 表单对象属性过滤选择器

基本过滤选择器

选择器 描述 返回 示例
:first 选择第1个元素 单个元素 $(“div:first”)选择第1个div元素
:last 选择最后1个元素 单个元素 $(“div:last”)选择最后1个div元素
:not(E1) 去除所有E1选择器匹配的元素 集合元素 $(“input:not(.my)”)选择class不是.my的所有input元素
:even 选择索引是偶数的所有元素，索引从0开始 集合元素 $(“tr:even”)选择表格中所有偶数的行
:odd 选择索引是奇数的所有元素，索引从0开始 集合元素 $(“tr:odd”)选择表格中所有奇数的行
:eq(index) 选择索引值是index的元素，index从0开始 单个元素 $(“tr:eq(1)”)选择表格行索引等于1的行
:gt(index) 选择索引值大于index的元素,index从0开始 集合元素 $(“tr:gt(1) ”)选择表格行索引大于1的行
:lt(index) 选择索引值小于index的元素,index从0开始 集合元素 $(“tr:lt(1)”)选择表格行索引小于1的行
:header 所取所有的标题元素,h1~h6 集合元素 $(“:header”)选择网页中所有的

,

…
:animated 选择当前正在执行动画的所有元素 集合元素 $(“div:animated”)选择正在执行动画的div元素

内容过滤选择器

选择器 描述 返回值 示例
:contains(text) 选择含有text文本内容的元素 集合元素 $(“div:contains(‘我’)”)选择内容里包含我的所有div
:empty 选择不包含子元素或文本的空元素 集合元素 $(“div:empty”)选择不包含子元素（含文本）的所有div元素
:has(E1) 选择包含有(E1选择器匹配的元素)的所有元素 集合元素 $(“div:has§”)选择含有p元素的所有div元素
:parent 选择含有子元素或文本的元素 集合元素 $(“div:parent”)选择拥有子元素（包含文本）的所有div元素

可见性过滤选择器

选择器 描述 返回值 示例
:hidden 选择所有不可见元素 集合元素 $(“:hidden”)选择所有不可见元素，包括：,
和
等，如果只选择元素，则可以使用 $(“input:hidden”)
:visible 选择所有可见元素 集合元素 $(“div:visible”)选取所有可见的div元素

案例-tab切换 可见过滤

思路

单击第几个，显示第几个，以前显示的隐藏

html结构

<div id="tab1" class="tabs">
			<ul>
				<li class="tab-title active">li1</li>
				<li class="tab-title">li2</li>
				<li class="tab-title">li3</li>
			</ul>
			<div class="tab-content" style="display: block;">内容1</div>
			<div class="tab-content" >内容2</div>
			<div class="tab-content">内容3</div>
</div>

css 部分

* {
    
    
	margin: 0;
		padding: 0;
}
			
body {
    
    
	padding: 50px;
}

ul {
    
    
	list-style: none;
}

.tabs .tab-title {
    
    
	height: 35px;
	line-height: 35px;
	border: 1px solid #aaa;
	padding-left: 15px;
	padding-right: 15px;
	float: left;
	margin-right: 15px;
	position: relative;
	z-index: 10;
}

.tabs .active{
    
    border-bottom-color:#fff; color: #F80;}
.tabs .tab-content {
    
    
	clear: both;
	border: 1px solid #aaa;
	padding: 25px;
	width: 450px;
	height: 300px;
	display: none;
	position: relative;
	top: -1px;
	z-index: 0;
}
#tab2 .tab-content{
    
    width: 800px;}

js写法

//[1] 单击第几个，显示第几个，以前显示的隐藏
$(function(){
    
    
	$(".tab-title").click(function(){
    
    
		//以前显示的现在隐藏
		$(".tab-content:visible").hide();
		// 求出是第几个
		var num=$(".tab-title").index($(this));
		$(".tab-content:eq("+num+")").show();
		//之前有.active li 去掉active
		//当前li 添加actvie
		$(".active").removeClass("active");
		$(this).addClass("active");
	
	})
})

完整的示例


<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>jquery选择器</title>
		<style>
			* {
     
     
				margin: 0;
				padding: 0;
			}
			
			body {
     
     
				padding: 50px;
			}
			
			ul {
     
     
				list-style: none;
			}
			
			.tabs .tab-title {
     
     
				height: 35px;
				line-height: 35px;
				border: 1px solid #aaa;
				padding-left: 15px;
				padding-right: 15px;
				float: left;
				margin-right: 15px;
				position: relative;
				z-index: 10;
			}
			
			.tabs .active{
     
     border-bottom-color:#fff; color: #F80;}
			.tabs .tab-content {
     
     
				clear: both;
				border: 1px solid #aaa;
				padding: 25px;
				width: 450px;
				height: 300px;
				display: none;
				position: relative;
				top: -1px;
				z-index: 0;
			}
			#tab2 .tab-content{
     
     width: 800px;}
		</style>
	</head>

	<body>
		<div id="tab1" class="tabs">
			<ul>
				<li class="tab-title active">li1</li>
				<li class="tab-title">li2</li>
				<li class="tab-title">li3</li>
			</ul>
			<div class="tab-content" style="display: block;">内容1</div>
			<div class="tab-content" >内容2</div>
			<div class="tab-content">内容3</div>
		</div>
	<script src="js/jquery-1.4.2.min.js"></script>
	<script>
	//[1] 单击第几个，显示第几个，以前显示的隐藏
	$(function(){
     
     
		$(".tab-title").click(function(){
     
     
			//以前显示的现在隐藏
			$(".tab-content:visible").hide();
			// 求出是第几个
			var num=$(".tab-title").index($(this));
			$(".tab-content:eq("+num+")").show();
			//之前有.active li 去掉active
			//当前li 添加actvie
			$(".active").removeClass("active");
			$(this).addClass("active");
		
		})
	})
	</script>
	

	</body>

</html>

jquery过滤选择器-属性

属性过滤选择器

选择器 描述 返回 示例
[attribute] 选择拥有此属性的元素 集合元素 $(“div[id]”)选择拥有id属性的div元素
[attribute=value] 选择属性值为value的元素 集合元素 $(“div[id=test]”)选择id属性值为test的div元素
[attribute!=value] 选择属性值不为value的元素 集合元素 $(“div[id!=test]”)选择id属性值不为test的div元素,没有id属性的div也会被选择
[attribute^=value] 选择属性值以value开始的元素 集合元素 $(“div[id^=test]”)选择id属性值以test开始的所有div元素
[attribute$=value] 选择属性以value值结束的元素 集合元素 ( “ d i v [ i d (“div[id (“div[id=test]”)选择id属性值以test结束的所有div元素
[attribute*=value] 选择属性中含有value的元素 集合元素 $(“div[id*=test]”)选择id属性值中含有test的所有div元素
[A1][A2]…A[N] 用属性选 择器合并成一个复合属性选择器。满足多个条件。 集合元素

案例根据不同的 a链接添加不同的图标背景

html

<h3>jquery 属性过虑资料下载</h3>
<ul>
    <li><a href="./课件" target="_blank" > 课件</a></li>
    <li><a href="精通JavaScript.pdf"  target="_blank"> 参考书</a></li>
    <li><a href="课件/第二章jQuery选择器.pptx" target="_blank">第二章jQuery选择器</a></li>
    <li><a href="filter.txt" target="_blank" >选择器总结</a></li>
    <li><a href="filter.html" target="_blank" >案例1</a></li>
    <li><a href="taotest2.html" target="_blank">案例2</a></li>
</ul>

js

$(function(){
    
    
	$("a[href$=html]").addClass("html");
	$("a[href$=txt]").addClass("txt");
	$("a[href^=./]").addClass("fl");
	
})

css

ul,li,a{
    
     
    margin:0; padding:0; 
    list-style:none;
    text-decoration:none;
    color:#444;}
    a:visited{
    
    color:#444;
}

a:hover{
    
     color:#000;}

li{
    
     
height:30px;
line-height:30px;
border-bottom:1px dashed #444;
width:200px;
}

li a{
    
    
display:block; 
height:30px;
line-height:30px;
padding-left:25px;
background-image:url(pkg_comm_z527307bd.png); background-repeat:no-repeat;
}
.pdf{
    
     background-position:0 -2px;}
.fl{
    
     background-position:0 -255px;}
.pptx{
    
     background-position:0 -440px;}
.txt{
    
     background-position:0 -160px;}
.html{
    
    background-position:0 -347px;}

过滤选择器-子元素过滤

作者：曾庆林

选择器 描述 返回 示例
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或奇偶元素.(index从1开始） 集合元素 :eq(index)只匹配一个元素,而:nth-child(index)将为每一个父元素匹配子元素,并且:nth-child(index)的index从1开始,而:eq(index)的index从0开始.
:first-child 选择每个父元素的第1个子元素 集合元 :first只选择单个元素,而:first-child将为每个父元素匹配第1个子元素如:$(“ul li:first-child”)选择每个ul下的第一个
:last-child 选取每个父元素的最后1个子元素 集合元素 $(“ul li:last-child”)选择每个ul下的最后一个
:only-child 如果某个元素是它父元素中惟一的子元素,那么将会被匹配.如果父元素中含有其他元素,则不会被匹配 集合元素 $(“ul li:only-child”)在
  • 中选取是惟一子元素的

:nth-child()选择器详细功能描述:

:nth-child(even)    能选择每个父元素下的索引值是偶数的元素
:nth-child(odd)     选择出每个父元素下的索引值是奇数的元素
:nth-child(2)       选取每个父元素下的索引值等于2的元素
:nth-child(3n)      能选出每个父元素下的索引值是3的倍数的元素,n从0开始
:nth-child(3n+1)    能选取每个父元素下的索引值是3n+1的元素.n从0开始

表单对象属性过滤选择器

选择器 描述 返回 示例
:enabled 选择所有可用元素 集合元素 $(“#form1 :enabled”)选取id为form1的表单内的所有可用元素
:disabled 选择所有不可用元素 集合元素 $(“#form1 :disabled”)选取id为form1的表单内所有不可用元素
:checked 选择忾有被选中的元素(单选框,复选框) 集合元素 $("input:checked")选择所有被选中的<input元素>
:selected 选择所有被选中的选项元素(下拉列表) 集合元素 $("select :selected")选取所有被选中的选项元素

jquery 表单选择器

表单选择器

选择器 描述 返回 示例
:input 匹配所有 元素 集合元素 $(“:input”) 同描述
:text 选择所有单行文本框 集合元素 $(“:text”)匹配所有单行文本框
:password 选择所有密码框 集合元素 $(“:password”)
:radio 选择所有单选框 集合元素 $(“:radio”)
:checkbox 选择所有复选框 集合元素 $(“:checkbox”)
:submit 匹配所有提交按钮 集合元素 $(“:submit”)
:image 匹配所有图像按钮 集合元素 $(“:image”)
:reset 匹配所有重置按钮 集合元素 $(“:reset”)
:button 匹配所有按钮 集合元素 $(“:button”)
:file 匹配所有文件域 集合元素 $(“:file”)
:hidden 匹配所有不可见元素 集合元素 $(“:hidden”)

选择器中的一些注意事项

选择器中包含空格

选择器中的空格是不容忽视的，多一个空格或少一个空格会得到截然不同的结果.

如:
	$(“div:input”)
和
	$(“div :input”)

jQuery中的方法初探

方法 功能描述
show() 显示隐藏的匹配元素，可带整数参数表示时间，单位是毫秒
hide() 隐藏显示的匹配元素，可带整数参数表示时间，单位是毫秒
css(name,value) 给匹配的元素设置css样式
text(string) 获取或设置匹配元素的文本内容,不包含html标签
filter(expr) 筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。
addClass(class) 为匹配的元素增加一个 类样式
removeClass(class) 为匹配的元素移除一个类样式
html() 获取或设置匹配元素的内容，包含html标签
siblings() $(“.abc”).siblings()匹配得到class=abc的其它兄弟元素




IT入门 感谢关注

IT入门 感谢关注

练习地址： www.520mg.com/it

猜你喜欢

转载自blog.csdn.net/bigzql/article/details/108676591
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022