怎么使用jQuery选择器

本篇内容介绍了“怎么使用jQuery选择器”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

专注于为中小企业提供网站设计、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业彭阳免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

先在每个测试页面的head中引入google提供的jquery文件和用于测试的小插件firejspt。

      

1. 最常用的id选择器和class选择器,将以下代码复制200次,置于body标签内。

比较id选择器和class选择器
 比较id选择器和class选择器

用于本次测试的JS代码如下:

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(); });  });

测试结果如下:

怎么使用jQuery选择器

由图可以id选择器相比于class选择器的效率优势是非常地。

2. 在选择标签时,层级选择器用得也非常频繁,这次对比测试直接子标签符号“>”和children。

将以下代码放入body标签内,并将其中的li标签复制500次。

     
  • 比较直接子标签符号“>”和children
  •      
  • 比较直接子标签符号“>”和children
  •      
  • 比较直接子标签符号“>”和children
  •       

    用于本次测试的JS代码如下:

    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(); });  });

    测试结果:

    怎么使用jQuery选择器

    由此可见children选择器要优于直接子标签符号选择器。

    “怎么使用jQuery选择器”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


    新闻标题:怎么使用jQuery选择器
    转载注明:http://myzitong.com/article/geihdp.html

    其他资讯