jQuery选择器的优点

jQuery选择器的优点

相信小伙伴们对选择器并不陌生，从css1到css3的选择器有很多，但是JQuery都能完美的支持，而且API操作起来也特别方便好用，在很大程度上精简了代码，节约了很多性能。那么今天我们就来简单地用几个小案例说一下JQuery选择器的优点，方便大家日后参阅。（注：本文以JQuery1.8.3为例）

第一个小案例：当点击p的时候让它弹出“hello world”。咱们先用jQuery写

HTML代码

1

2

3

4

css代码

p{background: red;}

js代码

$("p").click(function(){//给p添加点击事件，因为p是一个集合，JQuery自带for循环遍历每个p，这样就不用我们再去遍历了，特别方便。
alert("hello world");
})

是不是感觉代码特别少特别清爽啊！！！那么我们再用原生的写一下大家对比一下。HTML和CSS代码都一样，我只写js的代码了。

js代码

var p=document.getElementsByTagName("p");//找到p
for(i=0;i< p.length;i++){//循环遍历每个p
p[i].onclick=function(){//为它添加点击事件
alert("hello world");
}
}

这样对比一下大家是不就一目了然了，用jQuery和用原生的差别就是这么大！！！

第二个小案例：让索引为偶数的li隔行变色，先来jQuery版本的

HTML

• 1


• 2


• 3


• 4


• 5


• 6


• 7

CSS代码没有

js代码

$("li:even").css("background","red");

没错就是这么简单，再来原生的

js代码

var lis=document.getElementsByTagName("li");
for(i=0;i<lis.length;i++){
if(i%2==0){
lis[i].style.background="red";
}
}

是不是感觉很麻烦呀，用jQuery一行代码就能搞定而用原生的得4行，孰优孰劣一看便知。

第三个小案例：点击提交按钮弹出所选择的爱好的个数，先来jQuery版本的

HTML

英语
数学
语文
音乐
美术

CSS没有

js代码

$("#btn").click(function(){
alert("您选择了"+$("input:checked").size()+"个爱好!")
})

就是这么简单，接下来原生的

js代码

var checks=document.getElementsByTagName("input");
var btn=document.getElementById("btn");
btn.onclick=function(){
var geshu=0;
for(i=0;i<checks.length;i++){
if(checks[i].checked){
geshu++;
}
}
alert(geshu);
}

我去，居然这么麻烦，哎，看来还是JQuery好用啊。小伙伴们你们是不是现在也深有体会了？？？