今天我们就谈论一下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. arm-linux-gnueabi和arm-linux-gnueabihf 的区别
			
    转载整理自:http://www.cnblogs.com/xiaotlili/p/3306100.html 一. 什么是ABI和EABI1 .ABI ABI(二进制应用程序接口-Application ...
    
			
    2. 
						
  2. 一起学JUCE之Atomic
			
    Atomic功能是提供简单的类保持原始值,并且提供对其执行原子操作:Atomic是线程安全的,类型的实现比较简单,就是通过各种措施保证变量的操作达到原子操作,有一点需要注意Atomic使用的时候只支持 ...
    
			
    3. 
						
  3. 【转】15款Java程序员必备的开发工具
			
    如果你是一名Web开发人员,那么用膝盖想也知道你的职业生涯大部分将使用Java而度过.这是一款商业级的编程语言,我们没有办法不接触它. 对于Java,有两种截然不同的观点:一种认为Java是最简单功能 ...
    
			
    4. 
						
  4. time.setToNow() 取当前时间，月份有误
			
      [java] view plaincopy Time time = new Time("GMT+8"); time.setToNow(); int year = time.ye ...
    
			
    5. 
						
  5. BZOJ1419: Red is good
			
    1419: Red is good Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 639  Solved: 247[Submit][Status][Di ...
    
			
    6. 
						
  6. 代码中动态改变布局属性RelativeLayout.LayoutParams.addRule()
			
    我们知道,在 RelativeLayout 布局中有很多特殊的属性,通常在载入布局之前,在相关的xml文件中进行静态设置即可. 但是,在有些情况下,我们需要动态设置布局的属性,在不同的条件下设置不同的 ...
    
			
    7. 
						
  7. Python爬虫框架Scrapy安装使用步骤
			
    一.爬虫框架Scarpy简介Scrapy 是一个快速的高层次的屏幕抓取和网页爬虫框架,爬取网站,从网站页面得到结构化的数据,它有着广泛的用途,从数据挖掘到监测和自动测试,Scrapy完全用Python ...
    
			
    8. 
						
  8. Angular  - - ngHref、ngSrc、ngCopy/ngCut/ngPaste
			
    ngHref 在Angular程序没完成改变链接上用{{hash}}方式绑定的href值的时候,当用户点击该链接会跳到一个错误的页面. 格式:ng-href=”value” value:表达式. 使用 ...
    
			
    9. 
						
  9. php刷新当前页面
			
    echo "<script language=JavaScript> location.replace(location.href);</script>"; ...
    
			
    10. 
						
  10. js原生设计模式——7原型模式之new+call(this)组合应用再探讨实例
			
    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...
    
			
    11.