Jquery替代表

一、选择器

1、核心选择器

1.1 JQuery用法
(1)<code>id:$("#id")</code>

(2)<code>class:$(".class")</code>

(3)<code>element: $("div")</code>

(4)伪类：<code>$("input:focus")</code>

1.2 Javascript+webAPI用法
(1)<code>id:document.getElementById("id")</code>

(2)<code>class:document.getElementsByClass("class')</code>

(3)<code>element:document.getElementsByTagName("div")</code>

(4)伪类：<code>document.querySelector('input:focus')</code>

2、关系选择器

2.1 JQuery 用法
(1)父元素：<code>$("").parent();</code>

(2)父父元素：<code>$("").parent().parent();</code>

(3)子元素：<code>$("").children();</code>

(4)子元素快速选择:<code>$("DIV>P");</code>

(5)所以节点包括文本：<code>$("").contents();</code>

(6)所有节点；<code>$("a > *");</code>

2.2 Javascript+webAPI用法
(1)父元素：<code>element.parentNode;</code>

(2)父元素的父元素：<code>element.parentNode.parentNode;</code>

(3)子元素：<code>element.childNodes;</code>

(4)子元素快速选择:<code>document.querySelectorAll("div > p");</code>

(5)所有的节点：<code>var result=document.querySelectorAll('DIV > *')</code>;

(6)指定特殊节点：<code>var result=document.querySelectorAll('DIV > P')</code>;//P
(7)制定节点下面的子节点：<code>DIV.childNodes</code>

3、同级选择器

3.1 JQuery 用法
(1)相邻的兄弟节点（除自己外都是）：<code>$("").siblings()</code>;
(2)前面的相邻节点：<code>$("").prev()</code>;
(3)后面的相邻节点：<code>$("").next()</code>;
3.2 Javascript+webAPI用法
(1)所有的节点：<code>var result=document.querySelectorAll('#parent > SPAN ~ *')</code>;
(2)指定SPAN元素旁边是DIV元素的特殊节点：<code>var result=document.querySelectorAll('#parent > SPAN ~ DIV')</code>;//P
(3)指定SPAN元素第一个节点元素：<code>var result=document.querySelector('#parent > SPAN + *')</code>
(4)找到所有的子元素：

var allSiblings=document.querySelectorAll('#parent > SPAN ~ *');
AllSiblings=[].prototype.slice.call(allSiblings);
var currentElement=document.querySelector("#parent > SPAN");
do{
    currentElement=currentElement.previousElementSibling;
    currentElement && allSiblings.unshift(currentElement);
} while(currentElement)

(5)找到后一个节点：

节点：<code>var result=document.querySelector('SPAN').nextSibling.nextSibling.nextSibling;</code>
元素：<code>var result=document.querySelector('SPAN').nextElementSibling.nextElementSibling.nextElementSibling;</code>

4、祖先元素和后代选择器

4.1 JQuery 用法
(1)父元素：<code>var $result=$('p').parent();</code>
(2)最相近的元素：<code>$("p").closet("DIV")</code>
(3)找到子元素：<code>$("ul").find("*")</code>
(4)找到特定子元素：<code>$("ul").find('p')</code>
4.2 Javascript+webAPI用法
(1)找到所有父元素：

var currentElement=document.getElementsByTagName('a')[0]；
var parents=[];
while(element.parentElement){
    parents.push(currentElement.parent);
    currentElement=currentElement.parentElement;
}

(2)找到最相近的元素

var close=function(referElement,closeSelector){
     //如果提供了element.closet()方法
     if(referElement.closet()){
        return referElement.closet(closeSelector)
     }
     var matches=Element.prototype.matches ||
                 Element.prototype.msMatchesSelector ||
                 Element.prototype.webkitMatchesSelector,
                 currentElement=referElement;
     while(currentElement){
         if(matches.call(currentElement,closeSelector)){
            return currentElement;
         }
         current.parentElement;
     }
     return null;

}

(3)找到子元素:<code>document.querySelectorAll('UL *')</code>
(4)找到所有子元素:<code>document.querySelectorAll('UL SPAN')</code>

5、高级元素选择器

5.1 JQuery 用法
(1)不包括某个元素<code> $("ul li").not('.active')</code>;
5.2Javascript+webAPI用法
(1)不包括某个元素：<code>document.querySelectorAll('ul li:not(.active)')</code>;
//低版本解决

var items=document.querySelectorAll('ul li');
var result=[];
for(var i=0;i<items.length;i++){
    if(items[i].className!=='active'){
        result.push(items[i]);
    }
}

6、混合元素选择器

6.1 JQuery 用法
同时选择多个元素：<code>var result=$("#one ,.two ,ol");</code>
6.2Javascript+webAPI用法
同时选择多个元素：<code>var result=document.querySelectorAll('#one ,.two ,ol');</code>

7、混合元素选择器

7.1Javascript+webAPI用法
(1)指定类型的元素：<code>var result=document.querySelectorAll('input[type="button"]')</code>
<code> var result=document.querySelectorAll('input[type="password"]')</code>
<code>var result=document.querySelectorAll('input[type="file"]')</code>
7.2 JQuery 用法
(1)指定类型的元素：<code>var result=$("input[type='button']")<code>

8、Jquery $的替代

8.1Javascript+webAPI用法
(1)

window.$=function(selector){
    return document.querySelectorAll(selector);
}
$(".someClass");
$("#someId");
$(".someParent > .someChild");
$("ul li:not(.active)");