今天我们就谈论一下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. STL中list用法
			
    本文以List容器为例子,介绍了STL的基本内容,从容器到迭代器,再到普通函数,而且例子丰富,通俗易懂.不失为STL的入门文章,新手不容错过! 0 前言 1 定义一个list 2 使用list的成员函 ...
    
			
    2. 
						
  2. windows批处理實例
			
    實例: 假設我們有個資料夾為d:\tmp和e:\tmp ,而我們只要將d:\tmp中有異動的檔案複製到e:\tmp下的話,用法如下 xcopy d:\tmp\. e:\tmp\ /D /S /Y 實例 ...
    
			
    3. 
						
  3. javaEE开发中使用session同步和token机制来防止并发重复提交
			
    javaEE开发中使用session同步和token机制来防止并发重复提交 通常在普通的操作当中,我们不需要处理重复提交的,而且有很多方法来防止重复提交.比如在登陆过程中,通过使用redirect,可 ...
    
			
    4. 
						
  4. JS 上传文件 Uploadify 网址及 v3.2.1 参数说明
			
    http://www.uploadify.com/ 一.属性 属性名称 默认值 说明 auto true 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 . buttonC ...
    
			
    5. 
						
  5. Javascript教程：js异步模式编程的4种解决方法
			
    随着人们对网站视觉效果及用户体验的要求越来越高,所以在未来网站的建设中,设计师们开始越来越多的使用了js文件来达到预期的效果,随着js文件的越来越多,令设计师们最头痛的事情也就来了,那就是Javasc ...
    
			
    6. 
						
  6. php实现断点下载
			
    HTTP断点续传原理 Http头 Range.Content-Range() HTTP头中一般断点下载时才用到Range和Content-Range实体头, Range用户请求头中,指定第一个字节的位 ...
    
			
    7. 
						
  7. ViewFlipper的功能与用法
			
    ViewFlipper组件继承了ViewAnimator,它可调用addView(View v)添加多个组件,一旦向ViewFlipper中添加了多个组件之后,ViewFlipper可使用动画控制多个 ...
    
			
    8. 
						
  8. Oracle11G 在线重定义
			
    create tablespace tbs1 datafile '/opt/oracle/oradata/haier/tbs1.dbf' size 500m autoextend on maxsize ...
    
			
    9. 
						
  9. Android应用的基本组件介绍和签名Android应用程序
			
    一.Android应用的基本组件介绍  Activity和View :Activity只能通过setContentView(View)来显示指定的组件.View组件是所有UI控件.容器控件的基类,Vi ...
    
			
    10. 
						
  10. WebRTC音视频引擎研究(2)--VoiceEngine音频编解码器数据结构以及参数设置
			
    1.VoiceEngine Codec数据结构 WebRTC中,用一个结构体struct CodecInst表示特定的音频编解码器对象: struct CodecInst { int pltype;  ...
    
			
    11.