好用的jquery选择器

最新推荐文章于 2024-04-17 21:49:28 发布
最新推荐文章于 2024-04-17 21:49:28 发布
阅读量91 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/kuangxin/p/11114952.html
版权

 

一、简单伪类选择器

 


 

二、子元素伪类选择器


总结：

（1）“：first-child”是选择父元素下的第1个子元素（不区分元素类型），“：first-of-type”是选择父元素下某个元素类型的第1个子元素（区分元素类型）

（2）在“:only-child选择器”中，父元素是只有一个子元素的。但是在“:only-of-type选择器”中，却可以有多个子元素。“:only-of-type”相对“:only-child”来说，只是多了一个type（元素类型）的限制。

通过以下例子来深入了解only-of-type的意义：

 

 

 

  1.  
    <span style="font-family:Arial;font-size:12px;font-weight: normal;"> </span> <pre name="code" class="html"> <span style="font-family:Arial;"> <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <title>JSON Object Example </title>
  5.  
    <meta charset="utf-8">
  6.  
     
  7.  
    <script src="jquery-1.12.0.min.js" type="text/javascript"> </script>
  8.  
    <script type="text/javascript">
  9.  
    $(
  10.  
    function(){
  11.  
    <span style= "color:#ff0000;"> $( "div p:only-of-type").css( "background-color", "red"); </span>
  12.  
    }
  13.  
    )
  14.  
    </script>
  15.  
     
  16.  
    </head>
  17.  
    <body>
  18.  
    <div>
  19.  
    <p>这是一个段落 </p>
  20.  
    </div>
  21.  
    <div>
  22.  
    <span style="color:#ff0000;"> <p>这是一个段落 </p>
  23.  
    <p>这是一个段落 </p> </span>
  24.  
    <span>这是一个span </span>
  25.  
    </div>
  26.  
    </body>
  27.  
    </html> </span> 

 
  
 
  
 
 
  
 
 
  
  1.  
    
    
        
    
     
    
     
     
     
      <span style="font-family:Arial;font-size:12px;font-weight: normal;"> 
      <!DOCTYPE html> 
     
     
    
     
  2.  
    
    
        
    
     
    
     
     
     
      <html> 
     
     
    
     
  3.  
    
    
        
    
     
    
     
     
     
      <head> 
     
     
    
     
  4.  
    
    
        
    
     
    
     
     
     
      <title>JSON Object Example 
      </title> 
     
     
    
     
  5.  
    
    
        
    
     
    
     
     
     
      <meta charset="utf-8"> 
     
     
    
     
  6.  
    
    
        
    
     
    
    
        
    
     
  7.  
    
    
        
    
     
    
     
     
     
      <script src="jquery-1.12.0.min.js" type="text/javascript"> 
      </script> 
     
     
    
     
  8.  
    
    
        
    
     
    
     
     
     
      <script type="text/javascript"> 
     
     
    
     
  9.  
    
    
        
    
     
    
     
     
    
       $( 
     
     
    
     
  10.  
    
    
        
    
     
    
     
     
     
      function(){ 
     
     
    
     
  11.  
    
    
        
    
     
    
     
     
    
       <span style= 
      "color:#ff0000;">$( 
      "div p:only-of-type").css( 
      "background-color", 
      "red"); 
      </span> 
     
     
    
     
  12.  
    
    
        
    
     
    
     
     
    
       } 
     
     
    
     
  13.  
    
    
        
    
     
    
     
     
    
       ) 
     
     
    
     
  14.  
    
    
        
    
     
    
     
     
     
      </script> 
     
     
    
     
  15.  
    
    
        
    
     
    
    
        
    
     
  16.  
    
    
        
    
     
    
     
     
     
      </head> 
     
     
    
     
  17.  
    
    
        
    
     
    
     
     
     
      <body> 
     
     
    
     
  18.  
    
    
        
    
     
    
     
     
     
      <div> 
     
     
    
     
  19.  
    
    
        
    
     
    
     
     
     
      <p>这是一个段落 
      </p> 
     
     
    
     
  20.  
    
    
        
    
     
    
     
     
     
      </div> 
     
     
    
     
  21.  
    
    
        
    
     
    
     
     
     
      <div> 
     
     
    
     
  22.  
    
    
        
    
     
    
     
     
     
      <span style="color:#ff0000;"> 
      <p>这是一个段落 
      </p> 
      </span> 
     
     
    
     
  23.  
    
    
        
    
     
    
     
     
     
      <!--<p>这是一个段落</p>--> 
     
     
    
     
  24.  
    
    
        
    
     
    
     
     
     
      <span>这是一个span 
      </span> 
     
     
    
     
  25.  
    
    
        
    
     
    
     
     
     
      </div> 
     
     
    
     
  26.  
    
    
        
    
     
    
     
     
     
      </body> 
     
     
    
     
  27.  
    
    
        
    
     
    
     
     
     
      </html> 
      </span> 
     
     
    
     
 
   
  
 
  
 
  
 
  三、可见性伪类选择器 
  

 
  
 
 
  
  1.  
    
    
        
    
     
    
     
     
     
      <span style="font-family:Arial;font-size:12px;font-weight: normal;"> 
      <span style="font-family:Arial;font-size:12px;font-weight: normal;"> 
      <!DOCTYPE html> 
     
     
    
     
  2.  
    
    
        
    
     
    
     
     
     
      <html> 
     
     
    
     
  3.  
    
    
        
    
     
    
     
     
     
      <head> 
     
     
    
     
  4.  
    
    
        
    
     
    
     
     
     
      <title>JSON Object Example 
      </title> 
     
     
    
     
  5.  
    
    
        
    
     
    
     
     
     
      <meta charset="utf-8"> 
     
     
    
     
  6.  
    
    
        
    
     
    
     
     
     
      <style type="text/css"> 
     
     
    
     
  7.  
    
    
        
    
     
    
     
     
     
      #list * 
     
     
    
     
  8.  
    
    
        
    
     
    
     
     
    
       { 
     
     
    
     
  9.  
    
    
        
    
     
    
     
     
     
      display:none; 
     
     
    
     
  10.  
    
    
        
    
     
    
     
     
    
       } 
     
     
    
     
  11.  
    
    
        
    
     
    
     
     
     
      </style> 
     
     
    
     
  12.  
    
    
        
    
     
    
     
     
     
      <script src="jquery-1.12.0.min.js" type="text/javascript"> 
      </script> 
     
     
    
     
  13.  
    
    
        
    
     
    
     
     
     
      <script type="text/javascript"> 
     
     
    
     
  14.  
    
    
        
    
     
    
     
     
    
       $( 
     
     
    
     
  15.  
    
    
        
    
     
    
     
     
     
      function () { 
     
     
    
     
  16.  
    
    
        
    
     
    
     
     
    
       $( 
      "#b").click( 
     
     
    
     
  17.  
    
    
        
    
     
    
     
     
     
      function(){ 
     
     
    
     
  18.  
    
    
        
    
     
    
     
     
    
       <span style= 
      "color:#ff0000;">$( 
      "#list :hidden").css( 
      "display", 
      "block"); 
      </span> 
     
     
    
     
  19.  
    
    
        
    
     
    
     
     
    
       } 
     
     
    
     
  20.  
    
    
        
    
     
    
     
     
    
       ) 
     
     
    
     
  21.  
    
    
        
    
     
    
    
        
    
     
  22.  
    
    
        
    
     
    
     
     
    
       }) 
     
     
    
     
  23.  
    
    
        
    
     
    
     
     
     
      </script> 
     
     
    
     
  24.  
    
    
        
    
     
    
    
        
    
     
  25.  
    
    
        
    
     
    
     
     
     
      </head> 
     
     
    
     
  26.  
    
    
        
    
     
    
     
     
     
      <body> 
     
     
    
     
  27.  
    
    
        
    
     
    
     
     
     
      <br> 
     
     
    
     
  28.  
    
    
        
    
     
    
    
        
    
     
  29.  
    
    
        
    
     
    
     
     
     
      <div id="list"> 
     
     
    
     
  30.  
    
    
        
    
     
    
     
     
     
      <h3>我爱简简单单的 
      </h3> 
     
     
    
     
  31.  
    
    
        
    
     
    
     
     
     
      <h2>我爱简简单单的 
      </h2> 
     
     
    
     
  32.  
    
    
        
    
     
    
     
     
     
      </div> 
     
     
    
     
  33.  
    
    
        
    
     
    
     
     
     
      <input id="b" type="button" value="显示"> 
     
     
    
     
  34.  
    
    
        
    
     
    
     
     
     
      </body> 
     
     
    
     
  35.  
    
    
        
    
     
    
     
     
     
      </html> 
      </span> 
      </span> 
     
     
    
     
 
  
 
 浏览器端运行效果如下所示： 
  


 
  
四、内容伪类选择器
 
  

五、表单伪类选择器
 
  

六、表单属性伪类选择器
 
  
 
   
 
  
 
 
 

 

转载于:https://www.cnblogs.com/kuangxin/p/11114952.html

                

        

        




    




    

      

        

            

              
                
                  weixin_33720078
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
jQuery选择器

				
			

			

				

					m0_57774967的博客
				

				

					06-16
					
					4517
					
				

			

		

		

			
				
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...

			
		

	



                

              
                



	

		

			

				
					
jQuery选择器思维导图

				
			

			

				

					12-28
				

			

		

		

			
				
通过思维导图对知识进行梳理，以便记忆

			
		

	



                


  
              

                


	

		

			

				
					
JQuery选择器超级详细

					
热门推荐

				
			

			

				

					林高禄
				

				

					08-06
					
					1万+
					
				

			

		

		

			
				
基本选择器



id选择器：$("#id的属性值")



获取与指定id属性值匹配的元素



单击按钮，将id为myid的元素背景为绿色



<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JQuery选择器</title>
    <script src="js/jquery-3.3.1.min...

			
		

	





	

		

			

				
					
jquery 选择器及循环

				
			

			

				

					baobao__的博客
				

				

					09-23
					
					1836
					
				

			

		

		

			
				
文章目录1. 基本选择器2. 层次选择器3.基本过滤选择器4. 内容过滤选择器5.属性选择器6.表单相关选择器7.循环1.map2.each
1. 基本选择器
//标签
$("div").css("background","red");

//id
$("#active").css("background","orange");

//类
$(".box").css("background","g...

			
		

	



		

			
		



	

		

			

				
					
jQuery子元素选择器

				
			

			

				

					weixin_45747278的博客
				

				

					10-20
					
					3196
					
				

			

		

		

			
				
7.jQuery子元素选择器
7.1:first-child
匹配所给选择器( :之前的选择器)的第一个子元素类似的:first匹配第一个元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
<ul>
  <li>John</li>
  <li>Karl</li>
  ...

			
		

	





	

		

			

				
					
jQuery选择器大全总结

				
			

			

				

					impact_factor的博客
				

				

					08-12
					
					9722
					
				

			

		

		

			
				
jQuery选择器jQuery的选择器基本选择器基本过滤选择器属性过滤选择器表单选择器子元素选择器操作元素属性操作样式操作样式类获取或设置元素高度和宽度操作HTML代码操作text代码
jQuery的选择器
基本选择器
id选择器：#id
类选择器：.class
标签名选择器：
* ：匹配所有元素
基本过滤选择器
Element:first  ：选取第一个元素
Element:last   : 选取最后一个元素
Element:not(selector)：去除所有与给定选择器匹配的元素
Element:ev

			
		

	





	

		

			

				
					
JQuery 选择器 xpath 语法应用

				
			

			

				

					10-29
				

			

		

		

			
				
我们根据实例来解释JQuery选择器（selectors）中xpath几种常用的用法

			
		

	





	

		

			

				
					
详解jQuery选择器

				
			

			

				

					10-20
				

			

		

		

			
				
本文主要对jQuery选择器进行一一举例介绍，有助于学习、理解和记忆。具有很好的参考价值，下面就跟着小编一起来看下吧

			
		

	





	

		

			

				
					
jQuery 选择器详解

				
			

			

				

					10-24
				

			

		

		

			
				
主要介绍了jQuery 选择器详解,图文并茂，十分不错，需要的朋友可以参考下

			
		

	





	

		

			

				
					
jQuery 选择器理解

				
			

			

				

					10-29
				

			

		

		

			
				
凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.

			
		

	





	

		

			

				
					
js禁用所有的input

				
			

			

				

					Rockandrollman的博客
				

				

					04-11
					
					377
					
				

			

		

		

			
				
要在JavaScript中禁用所有的input元素，您可以使用document.querySelectorAll方法来选择所有的input元素，然后使用一个循环来为它们设置disabled属性。这段代码将会禁用页面上所有的input元素。

			
		

	





	

		

			

				
					
【300套】基于Springboot+Vue的Java实战开发项目(附源码+演示视频+LW)

				
			

			

				

					2301_77929200的博客
				

				

					04-12
					
					1407
					
				

			

		

		

			
				
🧡今天给大家分享300+的Java毕业设计，基于Springboot+vue框架，这些项目都经过精心挑选，涵盖了不同的实战主题和用例，可做毕业设计和课程设计参考。✍️除了源码，对于大部分项目实现的功能都有相应的介绍，并且配有演示视频，方便大家根据自己的需要择优下载学习。💂另外如有定制需求或者想要相对应的论文参考，文末可以十我VX联系。🤝后续还会持续更新，欢迎关注！

			
		

	





	

		

			

				
					
js的filter函数

				
			

			

				

					xiaohua0708day的博客
				

				

					04-14
					
					256
					
				

			

		

		

			
				
这个函数接收数组中的每个元素作为参数，并检查该元素是否是偶数。如果是偶数，函数返回。是一个数组方法，它创建一个新数组，其包含通过提供的函数实现的测试的所有元素。函数遍历数组中的每个元素，并只将那些使测试函数返回。在这个箭头函数版本中，我们直接返回了表达式。在上面的代码中，我们传递了一个匿名函数给。方法就会将该元素包含在新数组中。，则该元素会被包含在新数组中。在JavaScript中，的元素包含在新数组中。

			
		

	





	

		

			

				
					
TS基础2-常用类型

				
			

			

				

					qq_40147756的博客
				

				

					04-12
					
					453
					
				

			

		

		

			
				
ts 中常用类型和举例说明。

			
		

	





	

		

			

				
					
【可视化大屏开发】19. 加餐-百度地图API实现导航加线路热力图

				
			

			

				

					pblh123的专栏
				

				

					04-17
					
					508
					
				

			

		

		

			
				
Web端使用场景中会涉及到地图导航路线情况，并利用热力图显示路况信息。实现效果如下：输入起始地点，选择并开始导航最终效果。

			
		

	





	

		

			

				
					
Day08React——第八天

					
最新发布

				
			

			

				

					gu644335363的博客
				

				

					04-17
					
					710
					
				

			

		

		

			
				
概念：自定义Hook 是use打头的函数，通过自定义hook函数实现逻辑的封装复用声明一个以use打头的函数把函数体内可复用的逻辑(只要是可复用的逻辑)把组件中用到的状态或方法回调return出去组件调用结构赋值show);

			
		

	





	

		

			

				
					
echarts tooltip提示框显示不全

				
			

			

				

					在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
				

				

					04-11
					
					535
					
				

			

		

		

			
				
一个可由多个柱形图叠加而成的图表，命名为someHoverLine(可自定义)。
下面罗列了移动端和web端的封装组件代码；
展示了vue2、uniapp、vue3的不同封装和使用案列。

			
		

	





	

		

			

				
					
【vue】v-bind动态属性绑定

				
			

			

				

					m0_63070489的博客
				

				

					04-11
					
					449
					
				

			

		

		

			
				
【vue】v-bind动态属性绑定

			
		

	





	

		

			

				
					
创建组件的10条准则

				
			

			

				

					m0_52617844的博客
				

				

					04-11
					
					1046
					
				

			

		

		

			
				

			
		

	





	

		

			

				
					
jquery选择器

				
			

			

				

					06-01
				

			

		

		

			
				
jQuery选择器是一个功能强大的工具，用于选择HTML元素并对其进行操作。jQuery提供了多种选择器方法，以下是其中的一些：  1. ID选择器：  使用“#”符号，后跟ID名称，如下所示：  ``` $("#myId") ```  2. 类选择器...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值