如今jQuery在网站上普及的程度越来越高,所以,对于jQuery的使用,即使再小的一点认识、一点优势、一点不足,也显得越来越值得研究和探讨。最近,我就对jQuery的选择器使用做了一些个小小的实验,用来说明jQuery的不同选择器在不同的情况下,哪个效率更高,更值得使用。
先在每个测试页面的head中引入google提供的jquery文件和用于测试的小插件firejspt。比较id选择器和class选择器比较id选择器和class选择器
function ilianTest01(){ $('#ilian').click(function() { alert('Hello World'); });}function ilianTest02(){ $('.ilian').click(function() { alert('Hello World'); });}/*调用2个函数进行测试*/$(function(){jspt.test(function(){ ilianTest01(); });jspt.test(function(){ ilianTest02(); });});
- 比较直接子标签符号“>”和children
- 比较直接子标签符号“>”和children
- 比较直接子标签符号“>”和children
function ilianTest01(){$('#ilian > li').click(function() { alert('Hello World'); });}function ilianTest02(){$('#ilian').children('li').click(function() { alert('Hello World'); });}/*调用2个函数进行测试*/$(function(){jspt.test(function(){ ilianTest01(); });jspt.test(function(){ ilianTest02(); });});
如果觉得文章有用,别忘了推荐撒~~