how2j.cn


工具版本兼容问题
Jquery有多达数十种选择器,本章节把工作中会用到的常用选择器列出来,并逐一解释。


关键字 简介 示例代码
$("tagName")
元素
示例代码
$("id")
id
示例代码
$("className")
示例代码
$("selector1 selector2")
层级
示例代码
:first
:last
最先最后
示例代码
:odd
:even
奇偶
示例代码
:hidden
:visible
可见性
示例代码
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
属性
示例代码
:input
:button
:radio
:checkbox
:text
:file
:submit
:image
:reset
表单对象
示例代码
:enabled
:disabled
:checked
:selected
表单对象属性
示例代码
this
当前元素
示例代码
练习-斑马线
示例代码
答案-斑马线
示例代码
示例 1 : 元素   
示例 2 : id   
示例 3 : 类   
示例 4 : 层级   
示例 5 : 最先最后   
示例 6 : 奇偶   
示例 7 : 可见性   
示例 8 : 属性   
示例 9 : 表单对象   
示例 10 : 表单对象属性   
示例 11 : 当前元素   
示例 12 : 练习-斑马线   
示例 13 : 答案-斑马线   

$("tagName")
根据 标签名 选择所有该标签的元素
运行效果
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("div").addClass("pink"); }); }); </script> <button id="b1">给所有的div元素增加背景色</button> <br> <br> <style> .pink{ background-color:pink; } </style> <div > Hello JQuery </div> <div > Hello JQuery </div> <div > Hello JQuery </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
$("#id")
根据 id 选择元素
id应该是唯一的,如果id重复,则只会选择第一个。
运行效果
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#d1").addClass("pink"); }); }); </script> <button id="b1">给id=d1的div增加背景色</button> <br> <br> <style> .pink{ background-color:pink; } </style> <div id="d1"> Hello JQuery </div> <div id="d2" > Hello JQuery </div> <div id="d3"> Hello JQuery </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
$(".className")
根据 class 选择元素
运行效果
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $(".d").addClass("pink"); }); }); </script> <button id="b1">给class='d'的div增加背景色</button> <br> <br> <style> .pink{ background-color:pink; } </style> <div class="d"> Hello JQuery </div> <div class="d" > Hello JQuery </div> <div > Hello JQuery </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
$("selector1 selector2")
选择 selector1下的selector2元素 。
在本例中 选择id=d3的div下的span元素
运行效果
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("div#d3 span").addClass("pink"); }); }); </script> <button id="b1">给id='d3'的div 下的 span 增加背景色</button> <br> <br> <style> .pink{ background-color:pink; } </style> <div class="d"> <span>Hello JQuery</span> </div> <div class="d" > <span>Hello JQuery</span> </div> <div id="d3" > <span>Hello JQuery</span> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
$(selector:first) 满足选择器条件的第一个元素
$(selector:last) 满足选择器条件的最后一个元素
运行效果
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("div:first").addClass("pink"); }); $("#b2").click(function(){ $("div:last").addClass("pink"); }); }); </script> <button id="b1">第一个增加背景色</button> <button id="b2">最后一个增加背景色</button> <br> <br> <style> .pink{ background-color:pink; } </style> <div> <span>Hello JQuery</span> </div> <div > <span>Hello JQuery</span> </div> <div > <span>Hello JQuery</span> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
$(selector:odd) 满足选择器条件的奇数元素
$(selector:even) 满足选择器条件的偶数元素
因为是基零的,所以第一排的下标其实是0(是偶数)
运行效果
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("div:odd").toggleClass("pink"); }); $("#b2").click(function(){ $("div:even").toggleClass("green"); }); }); </script> <button id="b1">切换奇数背景色</button> <button id="b2">切换偶数背景色</button> <br> <br> <style> .pink{ background-color:pink; } .green{ background-color:green; } </style> <div> <span>Hello JQuery 0</span> </div> <div> <span>Hello JQuery 1</span> </div> <div > <span>Hello JQuery 2</span> </div> <div > <span>Hello JQuery 3</span> </div> <div > <span>Hello JQuery 4</span> </div> </div> <div > <span>Hello JQuery 5</span> </div> <div > <span>Hello JQuery 6</span> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
$(selector:hidden) 满足选择器条件的不可见的元素
$(selector:visible) 满足选择器条件的可见的元素
注; div:visible div :visible(有空格)是不同的意思
div:visible 表示选中可见的div
div :visible(有空格) 表示选中div下可见的元素
运行效果
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("div:visible").hide(); }); $("#b2").click(function(){ $("div:hidden").show(); }); }); </script> <button id="b1">隐藏可见的</button> <button id="b2">显示不可见的</button> <br> <br> <style> .pink{ background-color:pink; } </style> <div> <span>Hello JQuery 1</span> </div> <div > <span>Hello JQuery 2</span> </div> <div > <span>Hello JQuery 3</span> </div> <div > <span >Hello JQuery 4</span> </div> </div> <div > <span>Hello JQuery 5</span> </div> <div > <span>Hello JQuery 6</span> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
$(selector[attribute]) 满足选择器条件的有某属性的元素
$(selector[attribute=value]) 满足选择器条件的属性等于value的元素
$(selector[attribute!=value]) 满足选择器条件的属性不等于value的元素
$(selector[attribute^=value]) 满足选择器条件的属性以value开头的元素
$(selector[attribute$=value]) 满足选择器条件的属性以value结尾的元素
$(selector[attribute*=value]) 满足选择器条件的属性包含value的元素


注: 一般不要使用[class=className] 而应该使用.className
因为使用$("[class='className']") .toggleClass("anotherClassName")
会导致class变成className anotherClassName,再次 使用 [class=className] 就无法选中了
而.className没有这个问题。
运行效果
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("div[id]").toggleClass("border"); }); $("#b2").click(function(){ $("div[id='pink']").toggleClass("border"); }); $("#b3").click(function(){ $("div[id!='pink']").toggleClass("border"); }); $("#b4").click(function(){ $("div[id^='p']").toggleClass("border"); }); $("#b5").click(function(){ $("div[id$='k']").toggleClass("border"); }); $("#b6").click(function(){ $("div[id*='ee']").toggleClass("border"); }); }); </script> <button id="b1">给有id属性的div切换边框</button> <button id="b2">给id=pink的div切换边框</button> <button id="b3">给有id!=pink属性的div切换边框</button> <button id="b4">给有id以p开头的div切换边框</button> <button id="b5">给有id以k结尾的div切换边框</button> <button id="b6">给有id包含ee的div切换边框</button> <br> <br> <style> .pink{ background-color:pink; } .green{ background-color:green; } .border{ border: 1px blue solid; } button{ margin-top:10px; display:block; } div{ margin:10px; } </style> <div id="pink"> id=pink的div </div> <div id="green"> id=green的div </div> <div > 没有id的div </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
表单对象选择器 指的是选中form下会出现的输入元素
:input 会选择所有的输入元素,不仅仅是input标签开始的那些,还包括textarea,selectbutton
:button 会选择type=button的input元素和button元素
:radio 会选择单选框
:checkbox会选择复选框
:text会选择文本框,但是不会选择文本域
:submit会选择提交按钮
:image会选择图片型提交按钮
:reset会选择重置按钮

注意: 第7行

$("td[rowspan!=13] "+value).toggle(500);

$("td[rowspan!=13] 后面有一个空格,表示层级选择器,如果没有就会出错
toggle(500) 表示在显示与隐藏之间来回切换,生效时间是500毫秒

注: :submit会把<button>元素选中,因为在一些浏览器中,<button>元素的type默认值是submit,所以会选中它。 关于这个问题,请移步参考:使用button元素提交数据
运行效果
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $(".b").click(function(){ var value = $(this).val(); $("td[rowspan!=13] "+value).toggle(500); }); }); </script> <style> table{ border-collapse:collapse; table-layout:fixed; width:80%; } table td{ border-bottom: 1px solid #ddd; padding-bottom: 5px; padding-top: 5px; } div button{ display:block; } </style> <table> <tr> <td rowspan="13" valign="top" width="150px"> <div > <button value=":input" class="b">切换所有的:input</button> <button value=":button" class="b">切换:button</button> <button value=":radio" class="b">切换:radio</button> <button value=":checkbox" class="b">切换:checkbox</button> <button value=":text" class="b">切换:text</button> <button value=":password" class="b">切换:password</button> <button value=":file" class="b">切换:file</button> <button value=":submit" class="b">切换:submit</button> <button value=":image" class="b">切换:image</button> <button value=":reset" class="b">切换:reset</button> </div> </td> <td width="120px">说明</td> <td width="120px">表单对象</td> <td width="">示例</td> </tr> <tr> <td >input按钮</td> <td >:button</td> <td><input type="button" value="input按钮"/></td> </tr> <tr> <td>button按钮</td> <td >:button</td> <td><button>Button按钮</button></td> </tr> <tr> <td>单选框</td> <td >:radio</td> <td><input type="radio" ></td> </tr> <tr> <td>复选框</td> <td >:checkbox</td> <td><input type="checkbox" ></td> </tr> <tr> <td>文本框</td> <td >:text</td> <td><input type="text" /></td> </tr> <tr> <td>文本域</td> <td ></td> <td><textarea></textarea></td> </tr> <tr> <td>密码框</td> <td >:password</td> <td><input type="password" /></td> </tr> <tr> <td>下拉框</td> <td ></td> <td><select><option>Option</option></select></td> </tr> <tr> <td>文件上传</td> <td >:file</td> <td> <input type="file" /></td> </tr> <tr> <td>提交按钮</td> <td >:submit</td> <td><input type="submit" /></td> </tr> <tr> <td>图片型提交按钮</td> <td >:image</td> <td><input type="image" src="https://how2j.cn/example.gif" /></td> </tr> <tr> <td>重置按钮</td> <td >:reset</td> <td><input type="reset" /></td> </tr> </table>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 10 :

表单对象属性

edit
:enabled会选择可用的输入元素 注:输入元素的默认状态都是可用
:disabled会选择不可用的输入元素
:checked会选择被选中的单选框和复选框 注: checked在部分浏览器上(火狐,chrome)也可以选中selected的option
:selected会选择被选中的option元素
运行效果
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $(".b").click(function(){ var value = $(this).val(); $("td[rowspan!=13] "+value).toggle(500); }); $(".b2").click(function(){ var value = $(this).val(); var options = $("td[rowspan!=13] "+value); alert("选中了"+options.length+"条记录!"); }); }); </script> <style> table{ border-collapse:collapse; table-layout:fixed; width:80%; } table td{ border-bottom: 1px solid #ddd; padding-bottom: 5px; padding-top: 5px; } div button{ display:block; } .border{ border: 1px blue solid; } </style> <table> <tr> <td rowspan="13" valign="top" width="120"> <div > <button value=":enabled" class="b">切换:enabled</button> <button value=":disabled" class="b">切换:disabled</button> <button value=":checked" class="b">切换:checked</button> <button value=":selected" class="b2">:selected数量</button> </div> </td> <td width="120">说明</td> <td width="120">表单对象属性</td> <td width="100px">示例</td> </tr> <tr> <td >enabled的按钮</td> <td >:enabled</td> <td><input type="button" enabled="enabled" value="enabled的按钮"/></td> </tr> <tr> <td >disabled的按钮</td> <td >:disabled</td> <td><input type="button" disabled="disabled" value="disabled的按钮"/></td> </tr> <td >选中的复选框</td> <td >:checked</td> <td> <input type="radio" checked="checked" ><br> <input type="radio" ><br> <input type="checkbox" ><br> <input type="checkbox" checked="checked" > </td> <tr> <td>选中的下拉列表</td> <td >:selected</td> <td> <select size="3" multiple="multiple"> <option selected="selected">苍老师</option> <option >高树玛利亚</option> <option selected="selected">遥美</option> </select> </td> </table> <form> </form>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
在监听函数中使用 $(this),即表示触发该事件的组件。
运行效果
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $(this).hide(); }); }); </script> <button id="b1">点击隐藏</button>
<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
     $(this).hide();
   });
   
});
</script>
 
<button id="b1">点击隐藏</button>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 12 :

练习-斑马线

edit  姿势不对,事倍功半! 点击查看做练习的正确姿势
使用JQuery实现练习-表格斑马线的练习效果
示例 13 :

答案-斑马线

edit
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费2个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费2个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
账号未激活 账号未激活,功能受限。 请点击激活
运行效果
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("tr:odd").css("background-color","#f8f8f8"); }); </script> <style> table{ border-collapse:collapse; width:90%; } tr{ border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: lightgray; height:35px; } td{ width:25%; text-align:center; } </style> <table id="t"> <tr > <td>id</td> <td>名称</td> <td>血量</td> <td>伤害</td> </tr> <tr > <td>1</td> <td>gareen</td> <td>340</td> <td>58</td> </tr> <tr > <td>2</td> <td>teemo</td> <td>320</td> <td>76</td> </tr> <tr > <td>3</td> <td>annie</td> <td>380</td> <td>38</td> </tr> <tr > <td>4</td> <td>deadbrother</td> <td>400</td> <td>90</td> </tr> </table>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2021-11-04 $("td[rowspan!=13] "+value).toggle(500); 是啥意思
天际使徒

"td[rowspan!=13] "这一部分和+value这一部分是啥意思




1 个答案

Drainone
答案时间:2021-11-15
"td[rowspan!=13] ":选择rowspan属性不为13的<td>所包含的元素 +:字符串连接符 value:表单选择器的值 以:input为例: td[rowspan!=13] :input 选中rowspan不为13的td所包含的元素中的所有输入元素



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2021-09-27 斑马线练习
logiczqr




daaa
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="D:\download\jquery.min.js"></script>
 </head>
 <body>
  <script>
  	$(function(){
		$("table").css("border-collapse","collapse");
		$("tr").css({"border-bottom-color":"lightgray","border-bottom-style":"solid","border-bottom-width":"1px"});
		$("tr:first").css("border-bottom-width","2px");
		$("tr:odd").css("background-color","lightgray");
		$("td").css({"width":"25%","text-align":"center"});	
	});
  </script>

  <table width="100%">
	<tr>
		<td>id</td>
		<td>名称</td>
		<td>血量</td>
		<td>伤害</td>
	</tr>
	<tr>
		<td>1</td>
		<td>gareen</td>
		<td>340</td>
		<td>58</td>
	</tr>
	<tr>
		<td>2</td>
		<td>teemo</td>
		<td>320</td>
		<td>76</td>
	</tr>
	<tr>
		<td>3</td>
		<td>annie</td>
		<td>380</td>
		<td>38</td>
	</tr>
	<tr>
		<td>4</td>
		<td>deadbrother</td>
		<td>400</td>
		<td>90</td>
	</tr>
  </table>
 </body>
</html>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2021-04-01 斑马线答案
2021-01-14 答案答案~
2020-12-29 为什么要加空格


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 32 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-JQuery-选择器 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图