前端学习（九）--- jQuery选择器

其他 2019-02-22 11:02:12 阅读次数: 0

一、jQuery选择器分类

1、类CSS选择器

1)基本选择器

2)层次选择器

3)属性选择器

2、过滤选择器

1)基本过滤选择器

2)可见性过滤选择器

3)内容过滤选择器

4)元素过滤选择器

5)表单选择器

6)表单对象属性过滤选择器

二、选择器中的转义符号

<div id="id#a">aa</div>
<div id="id[2]">cc</div>
$("#id\\#a");
$("#id\\[2\\]");

三、基本选择器

名称 语法构成 描述 示例
标签选择器 element 根据给定的标签名匹配元素 $(“h2”)选取所有h2元素
类选择器 .class 根据给定的class匹配元素 $(" .title")选取所有class为title的元素
ID选择器 #id 根据给定的id匹配元素 $(" #title")选取id为title的元素
并集选择器 selector1,selector2,…,selectorN 将每一个选择器匹配的元素合并后一起返回 $(“div,p,.title”?)选取所有div、p和拥有class为title的元素
交集选择器 element.class或element#id 匹配指定class或id的某元素或元素集合 $(“h2.title”)选取所有拥有class为title的h2元素
全局选择器 * 匹配所有元素 $("*")选取所有元素

示例：

    <script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" language="javascript">
    $(function(){
        $("#btn1").click(function(){
    	    $("#div1").css("background-color","red");
    		//alert($("#div1").css("background-color"));
    	});
    });
    
    </script>
    <div id="div1">测试盒子</div>
    <input type="button" id="btn1" value="ok1">

## 四、层次选择器
|名称	  | 语法构成 | 描述 |示例 |
|--|--|--|--|
| 后代选择器| ancestor descendant |选取ancestor元素里的所有descendant（后代）元素 |	$("#menu span"?)选取#menu下的`<span>`元素  |
| 子选择器 | parent>child |选取parent元素下的child（子）元素|$(" #menu>span"?)选取#menu的子元素`<span>`  |
| 相邻元素选择器 |prev+next	  |	选取紧邻prev元素之后的next元素 | $(" h2+dl "?)选取紧邻`<h2>`元素之后的同辈元素`<dl>` |
| 同辈元素选择器 |prev~sibings  | 选取prev元素之后的所有siblings元素| $(" h2~dl "?)选取`<h2>`元素之后所有的同辈元素`<dl>` |



示例：
<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#btn1").click(function(){
	    $("#div1 span").css("color","red");
	});
	$("#btn2").click(function(){
	    $("#div1 > span").css("color","red");
	});
	$("#btn3").click(function(){
	    $("#div1+div").css("color","red");
	});
	$("#btn4").click(function(){
	    $("#div1~div").css("color","red");
	});
});

</script>
<div id="div1">
  <p><span>span</span></p>
</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<input type="button" id="btn1" value="后代选择器 空格">
<input type="button" id="btn2" value="子选择器 >">
<input type="button" id="btn3" value="相邻元素选择器 +">
<input type="button" id="btn4" value="同辈元素选择器 ~">

五、属性选择器

名称 语法构成 描述 示例
属性选择器 [attribute] 选取包含给定属性的元素 $(" [href]"?)选取含有href属性的元素
属性选择器 [attribute=value] 选取等于给定属性是某个特定值的元素 $(" [href =’#’]"?)选取href属性值为“#”的元素
属性选择器 [attribute?!=value] 选取不等于给定属性是某个特定值的元素 $(" [href?!=’#’]"?)选取href属性值不为“#”的元素
属性选择器 [attribute^=value] 选取给定属性是以某些特定值开始的元素 $(" [href^=‘en’]"?)选取href属性值以en开头的元素
属性选择器 [attribute$=value] 选取给定属性是以某些特定值结尾的元素 ( &quot; [ h r e f (&quot; [href =’.jpg’]"?)选取href属性值以.jpg结尾的元素
属性选择器 [attribute*=value] 选取给定属性是以包含某些值的元素 $(" [href* =‘txt’]"?)选取href属性值中含有txt的元素
属性选择器 [selector] [selector2] [selectorN] 选取满足多个条件的复合属性的元素 $(“li[id][title=新闻要点]”?)选取含有id属性和title属性为新闻要点的<li>元素

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
           $(function(){
           	  //1 input标记中含有readonly属性的就可以
           	  //$("input[readonly]").css('font-size','100px');
           	
           	  //2 input标记中含有value属性，并且value属性值=def
           	  //$("input[value='def']").css('font-size','100px');
           	  
           	  //3 input标记中含有value属性，并且value属性值以x开头的
           	  //$("input[value^='abc']").css('font-size','100px');
           	  
           	  //4 选择指定属性值等于给定字符串或该字符串为前缀（该字符串后跟一个连字符“-”）的元素。
           	  //$("input[value|='abc']").css('font-size','100px');
           	  
           	  //5 input标记中含有value属性，并且value属性值以x结尾的
           	  //$("input[value$='x']").css('font-size','100px');
           	  
           	  //6 input标记中含有value属性，并且value属性值不等于abc
           	  //$("input[value!='abc']").css('font-size','100px');
           	  
           	  //7 input标记中含有value属性，并且value属性值带有abc单词的
           	  //$("input[value~='abc']").css('font-size','100px');
           	  
           	  //8包含
           	  //$("input[value*='bc']").css('font-size','100px');
           	  
           	  //9多个条件的并且
           	  $("input[type=text][value*='bc']").css('font-size','100px');
           });
        </script>
	</head>
	<body>
		<input type="text" value="abc- x">
		<input type="text" value="abc x" readonly="readonly">
		<input type="text" value="bcd y">
		<input type="text" value="def">
		<input type="button" value="abc">
	</body>
</html>

六、过滤选择器

过滤选择器通过特定的过滤规则来筛选元素

语法特点是使用“:”，如使用$(“li:first”)来选取第一个li元素

主要分类如下：
基本过滤选择器
可见性过滤选择器
内容过滤选择器
表单选择器
表单对象属性过滤选择器
……

1、 基本过滤选择器

名称 语法构成 描述 示例
:first 选取第一个元素 $(" li:first"?)选取所有<li>元素中的第一个<li>元素
:last 选取最后一个元素 $(" li:last"?)选取所有<li>元素中的最后一个<li>元素
:even 选取索引是偶数的所有元素（index从0开始） $(" li:even"?)选取索引是偶数的所有<li>元素
:odd 选取索引是奇数的所有元素（index从0开始） $(" li:odd"?)选取索引是奇数的所有<li>元素
eq(index) 选取索引等于index的元素（index从0开始） $(“li:eq(1)”?)选取索引等于1的<li>元素
gt(index) 选取索引大于index的元素（index从0开始 $(" li:gt(1)"?)选取索引大于1的<li>元素（注：大于1，不包括1）
lt(index) 选取索引小于index的元素（index从0开始 $(“li:lt(1)”?)选取索引小于1的<li>元素（注：小于1，不包括1）
not(selector) 选取去除所有与给定选择器匹配的元素 $(" li:not(.three)"?)选取class不是three的元素
header 选取所有标题元素，如h1~h6 $(":header"?)选取网页中所有标题元素
focus 选取当前获取焦点的元素 $(":focus"?)选取当前获取焦点的元素

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#btn1").click(function(){
	    $("ul li:first").css("background-color","red");
	});
    $("#btn2").click(function(){
	    $("ul li:last").css("background-color","red");
	});

    $("#btn3").click(function(){
	    $("ul li:even").css("background-color","red");
	});
    $("#btn4").click(function(){
	    $("ul li:odd").css("background-color","red");
	});
	$("#btn5").click(function(){
	    $("ul li:eq(2)").css("background-color","red");
	});
	$("#btn6").click(function(){
	    $("ul li:gt(1)").css("background-color","red");
	});
	$("#btn7").click(function(){
	    $("ul li:lt(3)").css("background-color","red");
	});
	$("#btn8").click(function(){
	    $("ul li:not(.three)").css("background-color","red");
	});
	$("#btn9").click(function(){
	    $(":not('input')").css("background-color","red");
	});
});
</script>

<ul>
  <li>吃饭</li>
  <li class="three">睡觉</li>
  <li>听歌</li>
  <li>打豆豆</li>
</ul>
<select>
  <option>hh</option>
  <option>ii</option>
</select>
<input type="button" id="btn1" value="ul li:first">
<input type="button" id="btn2" value="ul li:last">
<input type="button" id="btn3" value="ul li:even">
<input type="button" id="btn4" value="ul li:odd">

<input type="button" id="btn5" value="ul li:eq(2)">
<input type="button" id="btn6" value="ul li:gt(1)">
<input type="button" id="btn7" value="ul li:lt(3)">
<input type="button" id="btn8" value="ul li:not(.three)">
<input type="button" id="btn9" value=":not('input')">

2、可见性过滤选择器

名称 语法构成 描述 示例
visible 选取所有可见的元素 $(":visible"?)选取所有可见的元素
hidden 选取所有隐藏的元素 $(":hidden"?) 选取所有隐藏的元素

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#btn1").click(function(){
	   $("p:hidden").show();
	});
    $("#btn2").click(function(){
	    $("p:visible").hide();
	});

    
});

</script>
<p>可见1</p>
<p>可见2</p>
<p style="display:none">不可见1</p>
<p style="display:none">不可见2</p>
<input type="button" id="btn1" value="让不可见的出来">
<input type="button" id="btn2" value="让可见的消失">

3、内容过滤选择器

名称 语法构成 描述 示例
contains(text) 选取含有文本内容为text的元素 $("div:contains(“abc.com”?)选取含有abc.com文本的div元素
empty 选取不包含子元素或者文本的空元素 $(“div:empty”?)选取不包含子元素或者文本的空div元素
has(selector) 选取含有选择器所匹配的元素的元素 $(“ul:has(.red)”?) 选取含有class是red的ul元素
parent 选取含有子元素或者文本的元素 $(“div:parent”?)选取含有子元素或者文本的div元素

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#btn1").click(function(){
	   $("p:contains('郭')").css("color","red");   
	});
    $("#btn2").click(function(){
	   $("p:empty").html("郭富城");
	});
	$("#btn3").click(function(){
	   $("p:has(.rrr)").html("郭");
	});
	$("#btn4").click(function(){
	   $("p:parent").html("郭郭");
	});
});
</script>
<p>郭靖</p>
<p>郭娜</p>
<p></p>
<p><span class="rrr">可见1</span></p>
<p>可见2</p>
<p style="display:none">不可见1</p>
<p style="display:none">不可见2</p>
<input type="button" id="btn1" value=":contains(text)">
<input type="button" id="btn2" value=":empty">
<input type="button" id="btn3" value=":has(selector)">
<input type="button" id="btn4" value=":parent">

4、表单选择器

语法构成 描述 示例
input 匹配所有input、textarea、select和button 元素 $("#myform :input")选取表单中所有的input、select和button元素
text 匹配所有单行文本框 $("#myform :text")选取email 和姓名两个input 元素
password 匹配所有密码框 $("#myform :password"?)选取所有<input type="password" />元素
radio 匹配所有单项按钮 $("#myform :radio")选取<input type="radio" />元素 |
checkbox 匹配所有复选框 $(" #myform :checkbox "?)选取<input type="checkbox " />元素
submit 匹配所有提交按钮 $("#myform :submit "?)选取<input type="submit " />元素
image 匹配所有图像域 $("#myform :image"?)选取<input type=" image" />元素
reset 匹配所有重置按钮 $(" #myform :reset "?)选取<input type=" reset " />元素
button 匹配所有按钮 $("#myform :button"?)选取button 元素
file 匹配所有文件域 $(" #myform :file"?)选取<input type=" file " />元素
hidden 匹配所有不可见元素，或者type 为hidden的元素 $("#myform :hidden"?)选取<input type="hidden " />、style="display: none"等元素

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#btn1").click(function(){
	   $(":text").css("border","1px solid blue");
	});
    
});
</script>
<input type="text"><input type="text"><input type="password"><input type="password">
<input type="button" id="btn1" value=":text">

5、表单对象属性过滤选择器

语法构成 描述 示例
enable 选取所有可用元素 $(“input:enabled”)选取所有可用的input元素
disabled 选取所有不可用元素 $(“input:disabled”)选取所有不可用的input元素
checked 选取所有被选中的元素（单选框、复选框） $(“input:checked”)选取所有选中的复选框元素
selected 选取所有被选中选项元素（下拉列表） $(“select option:selected”)选取所有选中的选项元素

示例：

<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
    $("#btn1").click(function(){
	   $(":text:enabled").css("border","1px solid blue");
	});
    $("#btn2").click(function(){
	   $(":text:disabled").css("border","1px solid red");
	});
	$("#btn3").click(function(){
	   alert($("#c1:checked").length);
	});
	$("#btn4").click(function(){
	   alert($("#select1 option:selected").length);
	});
});
</script>
<input type="text"><input type="text">
<input type="text" disabled="disabled">
<input type="text" disabled="disabled">
<input type="password"><input type="password">
<input type="checkbox" id="c1" value="cc1" checked="checked">cc1
<input type="checkbox" id="c1" value="cc2" checked="checked">cc2
<input type="checkbox" id="c1" value="cc3">cc3
<input type="checkbox" id="c1" value="cc4">cc4
<select id="select1" multiple="multiple">
<option value="a1">a1</option>
<option value="a2">a2</option>
<option value="a3">a3</option>
</select>
<input type="button" id="btn1" value=":text:enabled">
<input type="button" id="btn2" value=":text:disabled">
<input type="button" id="btn3" value="#c1:checked">
<input type="button" id="btn4" value="#select1:selected">

猜你喜欢

转载自blog.csdn.net/qq_40707033/article/details/86750296
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022