JQuery系列教材（四）- 选择器

工具版本兼容问题

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 : 答案-斑马线

示例 1 :

元素

edit 顶折

纠问

$("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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 2 :

id

edit 顶折

纠问

$("#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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 3 :

类

edit 顶折

纠问

$(".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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 4 :

层级

edit 顶折

纠问

$("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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 5 :

最先最后

edit 顶折

纠问

$(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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 6 :

奇偶

edit 顶折

纠问

$(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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 7 :

可见性

edit 顶折

纠问

$(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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 8 :

属性

edit 顶折

纠问

$(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 全屏编辑，再次点击恢复

});
       
</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>

渲染中渲染完成

效果

示例 9 :

表单对象

edit 顶折

纠问

表单对象选择器指的是选中form下会出现的输入元素
:input 会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea,select和button
: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 全屏编辑，再次点击恢复

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 >: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>

渲染中渲染完成

效果

示例 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>

代码行数较多，请点击查看

<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 全屏编辑，再次点击恢复

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>

渲染中渲染完成

效果

示例 11 :

当前元素

edit 顶折

纠问

在监听函数中使用 $(this)，即表示触发该事件的组件。

运行效果

<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个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

代码行数较多，请点击查看

<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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

JQuery系列教材（三）- 中对CSS样式的操作

JQuery系列教材（五）- 筛选器

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

问答区域

2024-08-09 斑马线答案

迷路打卡第n天

关于前端部分-JQuery-选择器的提问

简单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .odd{
            background-color: lightgray;
        }
        .even{
            background-color: darkgray;
        }
        td{
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="" width="100%">
        <tr>
            <th>id</th>
            <th>名称</th>
            <th>血量</th>
            <th>伤害</th>
        </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>
    <script src="./js/JQuery.min.js"></script>
    <script>
        $(function(){
            $("tr:odd").toggleClass("odd")
        })
        $(function(){
            $("tr:even").toggleClass("even")
        })
    </script>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2024-07-29 使用 JQuery 改写表格斑马线功能

虚心求学

关于前端部分-JQuery-选择器的提问

利用标签选择器、类名选择器、层级、属性条件实现。主要使用 $("tr:odd").css("background-color","#ddd");来选择表格的奇数行。

<html>
	<head>
	<meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8"/>
	<script src = "jquery.min.js"></script>
	
	<script>
	$(function(){
		$("body").css("width","50%");
		$("table").css({"width":"100%","text-align":"center","border-collapse":"collapse"});
		$(".title td").css({"width":"25%","background-color":"#fafafa"});
		$(".title").css("border-bottom","3px solid #bbb");
		$("tr[class!='title']").css("border-bottom","1px solid #bbb");
		$("tr:odd").css("background-color","#ddd");

	})
	</script>
	</head>
	
	<body>
	      <table>
		<tr class="title">
	         	    <td>id</td>
	         	    <td>名称</td>
	         	    <td>血量</td>
	         	    <td>伤害</td>
		</tr>
		<tr>
	         	    <td>1</td>
	         	    <td>gareen</td>
	         	    <td>123</td>
	         	    <td>12</td>
		</tr>
		<tr>
	         	    <td>2</td>
	         	    <td>teemo</td>
	         	    <td>456</td>
	         	    <td>34</td>
		</tr>
		<tr>
	         	    <td>3</td>
	         	    <td>annie</td>
	         	    <td>789</td>
	         	    <td>56</td>
		</tr>
		<tr>
	         	    <td>4</td>
	         	    <td>firer</td>
	         	    <td>123</td>
	         	    <td>78</td>
		</tr>
	      </table>
	</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-11-04 $("td[rowspan!=13] "+value).toggle(500); 是啥意思

2021-09-27 斑马线练习

logiczqr

关于前端部分-JQuery-选择器 -练习-斑马线的提问

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 斑马线答案

镜子里的笑脸

关于前端部分-JQuery-选择器 -答案-斑马线的提问

用jQ的css()把style写一遍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格斑马线</title>
    <script src="jquery.js"></script>
</head>

<body>
<table>
    <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>
<script>
$(function(){
    $("table").css({"width":"800px","text-align": "center","margin": "auto","border-collapse": "collapse"});
    $("td").css({"width":"200px","border-bottom-style":"solid","border-bottom-color":"lightgray", "padding":"10px 0px","border-bottom-width":"2px"});
    $("tr:odd").css("background-color","#f2f2f2");
});
</script>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

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

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-JQuery-选择器的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

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

上传截图