jquery一时用方法汇总,随地都以jQuery选用器的时

2019-09-05 04:53 来源:未知

1.jquery有一个筛选api find。

最近,我就对jQuery的选择器使用做了一些个小小的实验,用来说明jQuery的不同选择器在不同的情况下,哪个效率更高,更值得使用。

语法很简单,比如:

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

HTML 代码:

复制代码 代码如下:

<p>Hello, how are you?</p>

<!-- 引入FireJSPT的库文件 -->
<script type="text/javascript" src="firejspt.js"></script>
<!-- 引入google提供的1.44版的jQuery的库文件,其实哪个版本都无所谓了,呵呵 -->
<script type="text/javascript" src=";

jQuery 代码:

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

复制代码 代码如下:

结果:

<div id="ilian">比较id选择器和class选择器</div>
<div class="ilian">比较id选择器和class选择器</div>

[ Hello ]

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

但是我一开始很疑惑,这个不是和$('p span')api完全一致,为什么要用这个find?
知道今天我遇到了一个应用场景。

复制代码 代码如下:

场景是这样的,有个div.skill,我需要鼠标经过它上面时,给它的子选择器div.'skill-text',添加一个新class,
有同学会问为什么你不用事件委托:

function ilianTest01(){
$('#ilian').click(function() { alert('Hello World'); });
}

$('.skill').on('mouseover',‘.skill-text',function(e){
     $(this).addClass('skill-active');
});

function ilianTest02(){
$('.ilian').click(function() { alert('Hello World'); });
}

因为我后面还有针对'.skill'的处理代码,而且同类的.skill还有很多,我不能通过$('.skill')直接操作,必须用到this或者e.target;

/*调用2个函数进行测试*/
$(function(){
jspt.test(function(){ ilianTest01(); });
jspt.test(function(){ ilianTest02(); });
});

$('.skill').on('mouseover',function(e){

     $(this).find('.skill-text').addClass('skill-active');

   //.......其余代码

});

测试结果如下:

在这种情形下相当管用。因为你无法用css选择器直接找到对象了。

图片 1

除此以外我还真没想到其他好方法,那原生的js没有find 可怎么写啊。。。。【存疑】

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

以上所述就是本文的全部内容了,希望大家能够喜欢。

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

您可能感兴趣的文章:

  • Jquery 常用方法经典总结
  • jquery常用技巧及常用方法列表集合
  • 浅析jQuery中常用的元素查找方法总结
  • jquery和javascript的区别(常用方法比较)
  • jQuery操作表格(table)的常用方法、技巧汇总
  • jQuery页面加载初始化常用的三种方法
  • jQuery动态创建html元素的常用方法汇总
  • jQuery常用且重要方法汇总

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

复制代码 代码如下:

<ul id="ilian">
<li>比较直接子标签符号“>”和children</li>
<li>比较直接子标签符号“>”和children</li>
<li>比较直接子标签符号“>”和children</li>
<!-- 省略497次 -->
</ul>

用于本次测试的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(); });
});

测试结果:

图片 2

由此可见children选择器要优于直接子标签符号选择器。
限于文章长度,本文只展示了最基本的测试,且以上测试,均是在简单环境中测试的,测试效果并不代表绝对的结论。

您可能感兴趣的文章:

  • Jquery 常用方法经典总结
  • 常用的JQuery数字类型验证正则表达式整理
  • jquery和javascript的区别(常用方法比较)
  • jquery each的几种常用的使用方法示例
  • jQuery操作表格(table)的常用方法、技巧汇总
  • jQuery动态创建html元素的常用方法汇总
  • js+jquery常用知识点汇总
  • jQuery中大家不太了解的几个方法
TAG标签:
版权声明:本文由990888藏宝阁发布于关于计算机,转载请注明出处:jquery一时用方法汇总,随地都以jQuery选用器的时