jQuery的常用选择器

一、id选择器
id选择器是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理id的获取（原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽量考虑用这个选择器 另外注意id是唯一的）
例如下面这段代码中所示

    
    
    
    


   
	 

    	
id="world"
    	
选中
    
    

        
id="hello"
        
jQuery选中
    
    

        
id="hello"
        
jQuery未选中
    

    

    

实现效果如下图所示：

二、类选择器
类选择器，相对于id选择器来说，效率相对会低一点，但是优势就是可以多选，同样在jQuery的实现上，对于类选择器，如果浏览器支持的话，jQuery使用javascript的原生getElementByClassName()函数来实现的
下面来说明一个原生getElementByClassName()函数实现代码与jQuery实现代码的比较

    
    
    
    

   
	 

    	
class="world"
    	
选中
    
   
     

        
class="world"
        
选中
    

    

        
class="hello"
        
jQuery选中
    
    

        
class="hello"
        
jQuery选中
    

    

    

实现效果如下：

三、元素选择器
根据给定（html）标记名称选择所有的元素
描述：
( " e l e m e n t " ) 搜 索 指 定 元 素 标 签 名 的 所 有 节 点 ， 这 个 是 一 个 合 集 的 操 作 。 同 样 也 有 原 生 方 法 g e t E l e m e n t s B y T a g N a m e ( ) 函 数 支 持 在 下 面 代 码 中 有 两 种 实 现 方 式 第 一 种 ： 通 过 g e t E l e m e n t s B y T a g N a m e 方 法 得 到 页 面 所 有 的 < d i v > 元 素 v a r d i v s = d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( ′ d i v ′ ) ; d i v s 是 d o m 合 集 对 象 ， 通 过 循 环 给 每 一 个 合 集 中 的 < d i v > 元 素 赋 予 新 的 b o r d e r 样 式 第 二 种 ： ("element") 搜索指定元素标签名的所有节点，这个是一个合集的操作。同样也有原生方法getElementsByTagName()函数支持 在下面代码中有两种实现方式 第一种：通过getElementsByTagName方法得到页面所有的

元素 var divs = document.getElementsByTagName('div'); divs是dom合集对象，通过循环给每一个合集中的

元素赋予新的border样式 第二种： ("element")搜索指定元素标签名的所有节点，这个是一个合集的操作。同样也有原生方法getElementsByTagName()函数支持在下面代码中有两种实现方式第一种：通过getElementsByTagName方法得到页面所有的<div>元素vardivs=document.getElementsByTagName(′div′);divs是dom合集对象，通过循环给每一个合集中的<div>元素赋予新的border样式第二种：(“p”)选取所有的

元素，通过css方法直接赋予样式

    
    
    
    


    

        
class="world"
        
选中
    
    

        
class="world"
        
选中
    
    

        
class="hello"
        
jQuery选中
    
    

        
class="hello"
        
jQuery选中
    

    
    

效果图如下：

四、全选择器
$("*")
抛开jQuery，如果要获取文档中所有的元素，通过document.getElementsByTagName()中传递可以获取到(但是这种方法实现，就需要考虑浏览器的兼容性)

    
    
    
    


    

        
class="world"
        
选中
    
    

        
class="world"
        
选中
    
    

        
class="hello"
        
jQuery选中
    
    

        
class="hello"
        
jQuery选中
    

    
    

效果图如下：