今天我们就谈论一下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. libusb开发者指南（转）
			
    源:libusb开发者指南 译者: gashero 作者: Johannes Erdfelt 日期: 2010-04-17 地址: http://libusb.sourceforge.net/doc/ ...
    
			
    2. 
						
  2. 只要单片机具有真正唯一ID,就可以让加密坚不可摧（转）
			
    源:只要单片机具有真正唯一ID,就可以让加密坚不可摧 http://www.amobbs.com/thread-5518980-1-1.html 第一环:ID-->F1(ID) -----> ...
    
			
    3. 
						
  3. BZOJ2733 [HNOI2012]永无乡  【线段树合并】
			
    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...
    
			
    4. 
						
  4. BootStrap TreeView使用示例
			
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
			
    5. 
						
  5. php包管理工具最基本的一些问题
			
    windows下的 1.先安装windows下的set-up程序 点击一步步的, cmd进入,输入composer能成功显示一幅图说明安装成功 2.在下载,https://getcomposer.or ...
    
			
    6. 
						
  6. C# TPL学习
			
    程序Ⅰ:通过Task类创建新线程 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30  ...
    
			
    7. 
						
  7. ArcGIS Server的切图原理深入（转载）
			
    http://forum.osgearth.org/template/NamlServlet.jtp?macro=search_page&node=2174485&query=arcg ...
    
			
    8. 
						
  8. pageX,clientX,offsetX,layerX的那些事
			
    在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个 ...
    
			
    9. 
						
  9. 最通用的ibatis.Net使用sql server存储过程返回分页数据的详细例子
			
    ibatis.Net是一个比较简单和灵活的ORM框架,今天我分享一个我的项目中使用sql server通用存储过程来分页的一个例子,用ibatis.Net框架统一返回分页数据为IList<Has ...
    
			
    10. 
						
  10. 基因探针富集分析（GSEA）& GO & pathway
			
    http://blog.sina.com.cn/s/blog_4c1f21000100utyx.html GO是Gene Ontology的简称,是生物学家为了衡量基因的功能而而发起的一个项目,从分子 ...
    
			
    11.