jQuery学习笔记二（jQuery选择器）

一.id选择器

例如 $("id")

id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器

id是唯一的，每个id值在一个页面中只能使用一次，如果使用了多次，则只匹配第一个DOM元素

这个和下面的类选择器就不同了，类选择器就可以匹配多个。

二.类选择器

用法:$(".imooc")

如下，先摘抄于此

类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选

同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的

右边实现一个原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较

我们不难发现：

jQuery除了选择上的简单，而且没有再次使用循环处理

不难想到$(".imooc").css()方法内部肯定是带了一个隐式的循环处理，所以使用jQuery选择节点，不仅仅只是选择上的简单，同时还增加很多关联的便利操作，后续我们还会慢慢的学到其他的优势。

    
    
    
    


    

        
class="aaron"
        
选中
    
    

        
class="aaron"
        
选中
    
    

        
class="imooc"
        
jQuery选中
    
    

        
class="imooc"
        
jQuery选中
    

    
    

三.全选择器

在CSS中，经常会在第一行写下这样一段样式

* {padding: 0; margin: 0;}

通配符*意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递*选择器来选中文档页面中的元素

描述：

$( "*" )

抛开jQuery，如果要获取文档中所有的元素，通过document.getElementsByTagName()中传递"*"同样可以获取到

不难发现，id、class、tag都可以通过原生的方法获取到对应的节点，但是我们还需要考虑一个兼容性的问题，我这里顺便提及一下，比如:

1. IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的
2. getElementById的参数在IE8及较低的版本不区分大小写
3. IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A
4. IE8及较低的版本，浏览器不支持getElementsByClassName

看到了吧，作为一名合格的前端不是那么简单的，就一个基本的选择器上面都需要做这么多兼容，幸好有jQuery的出现，让我们省了很多功夫，如果大家对jQuery的实现感兴趣，可以看我另一个门课程 《jQuery源码解析》

    
    
    
    


    

        
class="aaron"
        
选中
    
    

        
class="aaron"
        
选中
    
    

        
class="imooc"
        
jQuery选中
    
    

        
class="imooc"
        
jQuery选中
    

    
    

四.层级选择器

 //子选择器
//$('div > p') 选择所有div元素里面的子元素P

这个的含义是，满足div标签里面的p标签，如果是div里面的article下的p标签是没有效果的。

//后代选择器
 //$('div  p') 选择所有div元素里面的p元素

这个就简单了，只要是div里面的p标签，都会被选上

//相邻兄弟选择器
//选取prev后面的第一个的div兄弟节点，只选一个
 $('.prev+div').css("border", "3px groove blue");

//一般相邻选择器
//选取prev后面的所有的div兄弟节点
$('.prev~div').css("border", "3px groove blue");