今天我们就谈论一下jquery选择器,它们大致分成了四种选择器!!!!

1.基本选择器(标签，ID,类，并集，交集，全局)

1.0(模板)

<body>

    <div id="o" class="myc">我是第一个div</div>
    <div><span>我是第二个div</span></div>

  </body>

1.1（标签)

 //标签

  $(function(){

   $("div").css("background-color","red");

  });

1.2（ID)

 

$(function(){

     $("#o").css("background-color","green");

  });

1.3（类）

　　

 $(function(){

   $(".myc").css("background-color","red");

  });

1.4(并集)

 $(function(){

   $("div,#o").css("background-color","red");

  });

1.5（交集）

$(function(){

   $("div#o").css("background-color","yellow");

  });

1.6(全局)

$(function(){

     $("*").css("background-color","blue");

  });

2.层次选择器（后代，子，相邻，同辈，）

2.1(后代）

 $(function(){

     $("div span").css("background-color","green");

  });

2.2（子）

$(function(){

   $("div>span").css("color","blue");

 });

2.3(相邻）

$(function(){

   $("div+div").css("color","green");

 });

2.4(同辈）

 $(function(){

   $("div~div").css("color","red");

 });

3属性选择器

3.0（模板）

<body>

    <a id="12" href="#123">第一个链接</a>

    <a id="23" href="@">第二个链接</a>

    <a id="34" href="#">第三个链接</a>

  </body>

语法：

3.1

[attribute]    选取包含给定属性的元素 

$(function(){

       $("[href]").css("color","red");
 });

3.2    [attribute=value]    选取等于给定属性是某个特定值的元素

$(function(){

       $("[href=#]").css("color","red");
 });

3.3[attribute!=value]    选取不等于给定属性是某个特定值的元素

$(function(){
    $("[href！=#]").css("color","red");
  });

3.4[attribute^=value]      选取给定属性是某个特定值开始的元素

$(function(){

$("[href^#).css("color","red");

    });

3.5[attribute$=value]       选取特定值是以某些特定值结尾的元素

$(function(){

    $("[href$=123]").css("color","red");

    });

3.6[attribute*=value]      选取给定属性是包含某些值



$(function(){

    $("[href*'2']").css("color","yellow");

    });






3.7[selector][selectorN]   选取满足多个条件的复合属性的元素




$(function(){

    $("a[href][id=12]").css("background-color","red");

    });




4.过滤选择器(规律选择器两大类：基本过滤选择器，可见性过滤选择器)


4.0（模板）




<body>
 <h2>你的生命值</h2>
   <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li class="a">4</li>
   <li>5</li>
   <li>6</li>
   </ul>
  </body>




4.1


语法 ：


：first  选取第一个元素




 $(function(){

      $("li:first").css("background","red");

     });




4.2


：last  选取最后一个元素




 $(function(){

      $("li:last").css("background","blue");

     });




4.3


：not（selector） 选取去除所有与定选择器匹配的元素




 $(function(){

          $("li:not(.a)").css("background","blue");

     });




4.4


：even   选取索引是偶数的所有元素（index从0开始）




$(function(){

         $("li:even").css("background","blue");

     });




4.5


：odd  选取索引是奇数的所有元素（index从0开始）




$(function(){

       $("li:odd").css("background","blue");

     });




4.6


：eq（index） 选取索引等于index的元素（index从0开始）




$(function(){

       $("li:eq(1)").css("background","blue");

     });




4.7


：gt（index）  选取索引大于index的元素（index从0开始）




 $(function(){

       $("li:gt(1)").css("background","blue");

     });




4.8


：lt（index）  选取索引小于index的元素（index从0开始）




 $(function(){

       $("li:lt(1)").css("background","blue");

     });




4.9


：header   选取所有标题元素，如h1~h6




$(function(){

       $(":header").css("background","blue");

     });




4.10


:focus    选取当前获取焦点的元素




$(function(){

       $(":focus").css("background","red");

     });




5.0（模板）




<body>

    <p id="text_hide">点击按钮，我会被隐藏</p>

    <p id="text_show">隐藏的我，被显示了，嘿嘿</p>

    <input name="shwo" type="button" value="点击显示文字"/>

    <input name="hide" type="button" value="点击显示文字"/>

  </body>




语法：


5.1


hideen   选取所有隐藏的元素




 $(function(){
      $("p:hidden").show(100);
   });




5.2


visible   选取所有可见的元素




$(function(){

       $("p:visible").hide(100);

   });


												


											
初学jQuery之jQuery选择器的更多相关文章
	

    
						
  1. JQ001-认识jQuery  和  JQ002-jQuery选择器
		
    JQ001-认识jQuery jQuery环境配置:将jQuery.js文件引入到html页面中即可. 代码如下: <!DOCTYPE html> <html> <hea ...
    
		
    2. 
						
  2. 【Java EE 学习 32 上】【JQuery】【选择器】
		
    一.JQuery简介 1.JQuery是JavaScript库,封装了很多预定义对象和实用函数. 2.JQury的优势: (1)简洁,其宗旨就是写更少的代码做更多的事. (2)文档声明非常全面:htt ...
    
		
    3. 
						
  3. jQuery基础之选择器
		
    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
    
		
    4. 
						
  4. jQuery-认识JQuery，jQuery选择器
		
    认识JQuery: 1.window.onload与$(document).ready()的区别 window.onload $(document).ready() 执行时机 必须等待网页中的所有内容 ...
    
		
    5. 
						
  5. jQuery 简单过滤选择器
		
    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...
    
		
    6. 
						
  6. JQuery：JQuery语法、选择器、事件处理
		
    JQuery语法:   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...
    
		
    7. 
						
  7. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
		
      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
    
		
    8. 
						
  8. jQuery基础知识--选择器与效果
		
    $(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...
    
		
    9. 
						
  9. jQuery的筛选选择器
		
    基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...
    
		
    10. 
						
  10. JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）
		
    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. mysqladmin: connect to server at 'localhost' failed error: 'Access denied for user 'root'@'localhost' (using password: YES)'
			
    就当作自己忘记Mysql密码把,忘记密码的解决方法 一.mysql登录错误mysqladmin: connect to server at 'localhost' failederror: 'Acce ...
    
			
    2. 
						
  2. Cell.reuseIdentifier 指什么
			
    Cell.reuseIdentifier 指的是 默认为空,如果不定义,在执行 [_tableView registerNib:templateCellNib forCellReuseIdentifi ...
    
			
    3. 
						
  3. 直播流怎么存储在Ceph对象存储上？ Linux内存文件系统tmpfs(/dev/shm) 的应用
			
    一./dev/shm理论 默认的Linux发行版中的内核配置都会开启tmpfs,映射到了/dev/下的shm目录.可以通过df 命令查看结果./dev/shm/是linux下一个非常有用的目录,因为这 ...
    
			
    4. 
						
  4. 【BZOJ 3926】【ZJOI 2015】诸神眷顾的幻想乡
			
    http://www.lydsy.com/JudgeOnline/problem.php?id=3926 广义后缀自动机的例题,感觉广义后缀自动机好恶心... 广义后缀自动机是对一个trie建立的后缀 ...
    
			
    5. 
						
  5. %c输入应注意的问题
			
    for(i=0;i<n;i++) { getchar(); scanf("%c",&str[i]); } 这样输入是错的 的这样输入 for(i=0;i<n;i ...
    
			
    6. 
						
  6. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
			
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    7. 
						
  7. oracle闪回技术总结之闪回数据库
			
    [实施步骤] 步骤一.设置如下的初始化参数: Sql>小时:以分钟为单位 SQL> 点00分左右发现表被删除 切了几个归档 22:00:38SQL>:06:05 SQL> :0 ...
    
			
    8. 
						
  8. return_url和notify_url的区别
			
    页面跳转同步通知页面特性(return_url特性) (1)   买家在支付成功后会看到一个支付宝提示交易成功的页面,该页面会停留几秒,然后会自动跳转回商户指定的同步通知页面(参数return_url ...
    
			
    9. 
						
  9. c#中Partial关键字的作用
			
    1. 什么是局部类型? C# 2.0 引入了局部类型的概念.局部类型允许我们将一个类.结构或接口分成几个部分,分别实现在几个不同的.cs文件中. 局部类型适用于以下情况: (1) 类型特别大,不宜放在 ...
    
			
    10. 
						
  10. Flex回声消除的最佳方法
			
    Adobe Flash Player 已经成为音频和视频播放的非常流行的工具.实际上,目前大多数因特网视频均使用 Flash Player观看. Flash Player 通过将许多技术进行组合可以提 ...
    
			
    11.