今天我们就谈论一下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. Thinking in scala (7)---- f(n)=f(n-1)+2f(n-2)+3f(n-3)
			
    <计算机程序的构造和解释>中的练习1.11: 函数f,如果n<3,那么f(n) = n;如果n>=3,那么 f(n)=f(n-1)+2f(n-2)+3f(n-3) 有了上面的公 ...
    
			
    2. 
						
  2. mongodbVUE基本操作(转)
			
    基本操作: http://my.oschina.net/u/1026531/blog/188336
    
			
    3. 
						
  3. 解决VirtualBox下安装虚拟机（Ubuntu）出错（不能为虚拟电脑Ubuntu打开一个新的任务）的有关问题
			
    [转]http://www.myexception.cn/program/1964906.html 解决VirtualBox下安装虚拟机(Ubuntu)出错(不能为虚拟电脑Ubuntu打开一个新的任务 ...
    
			
    4. 
						
  4. 【bug】java.lang.NoSuchMethodError: android.widget.TextView.setBackground
			
    安卓的背景色设置需要根据SDK的版本来分情况考虑: if (Build.VERSION.SDK_INT >= 16) { textView.setBackground(null); } else ...
    
			
    5. 
						
  5. 1）Java学习笔记：接口和抽象类的异同
			
    Java接口和抽象类很像,他们有哪些相同点和异同点呢,下面我们做一个小结 相同 ① 都不能被实例化,都位于继承树的顶端,用于被实现或者继承 ② 都可以包含抽象方法,实现接口或者继承抽象类的普通子类都必 ...
    
			
    6. 
						
  6. iOS 调试 之 打印
			
    参考:http://m.blog.csdn.net/blog/HookyStudent/42964317 参考:http://m.blog.csdn.net/blog/laencho/25190639 ...
    
			
    7. 
						
  7. iOS 之 定时器
			
    [NSTimer scheduledTimerWithTimeInterval:5.0 target:self selector:@selector(showMyDrivingRangeTimer)  ...
    
			
    8. 
						
  8. java 之 Spring
			
    1.Spring 介绍 2.Spring 下载 3.Spring 导入 4.Spring 配置
    
			
    9. 
						
  9. LNAMP 中的PHP探针
			
    <?php /* ----------------本探针基于YaHei.net探针------------------- */ error_reporting(0); //抑制所有错误信息 @h ...
    
			
    10. 
						
  10. Java 伪静态 Mapping
			
    1. 概念 伪静态,简单来说是指转换url地址,在这里用来替换掉urlMapping.因为urlMapping需要为每一个页面都进行配置,非常麻烦. 2. RequestMapping 3. Spri ...
    
			
    11.