搜索
您的当前位置:首页正文

jQuery代码优化选择符篇_jquery

2023-12-03 来源:欧尚宠物网

本文就从选择符的角度简单探讨一下优化jQuery代码的问题。 Sizzle的运行机制 jQuery从1.3开始把根据选择符表达式查找元素的代码独立出来,也就是Sizzle引擎。当我们把一个选择符表达式(比如"#id"、".class"、":nth-child(2)")传递给$()函数时,Sizzle在内部会优先利用浏览器原生支持的DOM方法来查找元素,以求得最大的执行速度。以下就是Sizzle会优先选用的几个标准的原生方法(各个方法的用途不再赘述): 代码如下: getElementById() getElementsByTagName() getElementsByClassName() querySelectorAll() 如果浏览器不支持某个方法,或者传入的选择符表达式不是标准选择符(如":eq()"、":odd"或其他自定义选择符),Sizzle就会使用document.getElementsByTagName('*')来取得文档中的所有元素,然后再遍历并测试每个元素。显然,这是万不得已才会用的方法;可想而知,这个最笨的方法,效率也是最低的。 优化示例 举个例子,假设我们要取得页面表单中的所有的文本框,即: 可以使用两个选择符: 代码如下: $('input[type="text"]') $('input:text') 第一个选择符是标准的CSS属性选择符,第二个选择符是自定义选择符。根据前面对Sizzle引擎的分析可知,在大多数现代浏览器(支持原生querySelectorAll()方法的浏览器)中,第一个选择符的速度比第二个要快很多。 再举一个例子。假设有下面两个jQuery查询: 代码如下: $('input').eq(1) $('input:eq(1)') 第一个查询先通过标准的CSS元素选择符查找所有input元素,然后再调用jQuery的eq()方法取得匹配结果中的第二个元素(eq()方法的索引参数是从0开始计算的)。第二个查询则使用了自定义的伪类选择符:eq()。通过测试可以看出,第一种方法的速度比第二种方法快得就更多了。 结论 要尽可能使用CSS规范中规定的选择符,除非没有标准选择符,才考虑使用jQuery的自定义选择符。 (注:本文基于《jQuery基础教程(第3版)》相关章节内容编撰而成。)

小编还为您整理了以下内容,可能对您也有帮助:

针对 jQuery 项目的优化方法有哪些?

jQuery 项目的优化方法有很多,以下是一些常见的方法:

1. 总是使用 ID 去寻找 element。在 jQuery 中最快的选择器是 ID 选择器,因为它直接映射为 JavaScript 的 getElementById() 方法。选择多个元素,在我们讨论选择多个元素的时候,我们真正需要知道的是 DOM 的遍历和循环才是性能低下的原因。为了尽量减少这种情况的发生,我们可以使用 jQuery 的 $.each() 方法来遍历数组,而不是使用 for 循环。

2. 缓存 jQuery 对象。将你经常用的元素缓存起来,这样你就可以避免在每次调用时都重新查找这些元素。

3. 减少 DOM 操作次数。DOM 操作是非常耗时的,因此我们应该尽量减少它们的次数。如果你需要多次修改同一个元素,那么你可以将它缓存起来,然后再进行修改。

4. 使用局部变量。在使用 jQuery 时,我们应该尽量使用局部变量,因为全局变量会比其他变量更加耗时。

5. 避免使用动画效果。动画效果会占用大量的 CPU 资源,因此我们应该尽量避免使用它们。

6. 压缩代码。压缩代码可以减少文件大小,从而提高页面加载速度。

如何书写高质量jQuery代码(使用jquery性能问题)_jquery




1.正确引用jQuery
1.尽量在body结束前才引入jQuery,而不是在head中。
2.借助第三方提供的CDN来引入jQuery,同时注意当使用第三方CDN出现问题时,要引入本地的jQuery文件。(对于已经使用了cdn的网站可以忽略,现在用户带宽都升级了,这个可以忽略了,放别人机器不一定稳定)
3.如果在前引入script文件的话,就不用写document.ready了,因为这时执行js代码时DOM已经加载完毕了。


window.jQuery || document.write('
2.优化jQuery选择器

高效正确的使用jQuery选择器是熟练使用jQuery的基础,而掌握jQuery选择器需要一定的时间积累,我们开始学习jQuery时就应该注意选择器的使用。

如果我们选择class为home的a元素时,可以使用下边代码:

1.方法1会使jQuery在整个DOM中查找class为home的a元素,性能可想而知。
2.方法2为要查找的元素添加了上下文,在这里变为查找id为nav的子元素,查找性能得到了很大提升。
3.方法3使用了find方法,它的速度更快,所以方法三最好。

关于jQuery选择器的性能优先级,ID选择器快于元素选择器,元素选择器快于class选择器。因为ID选择器和元素选择器是原生的JavaScript操作,而类选择器不是,大家顺便可以看下find context 区别,find() children区别。

3.缓存jQuery对象

缓存jQuery对象可以减少不必要的DOM查找,关于这点大家可以参考下缓存jQuery对象来提高性能。

4.正确使用事件委托
事件委托可以使事件更好的执行,在动态添加的元素上绑定事件也需要委托来实现,在新版本的jQuery中推荐大家使用on来给元素绑定一个或多个事件的处理函数。


我是单元格

比如我们要在上边的单元格上绑定一个单击事件,不注意的朋友可能随手写成下边的样子:

这样会为每个td绑上事件,在为100个单元格绑定click事件的测试中,两者性能相差7倍之多,好的做法应该是下边写法:

5.精简jQuery代码
如在上述代码中我们对jQuery代码进行了适当的合并,类似的还有.attr()方法等,我们没有写成下边的方式:

6.减少DOM操作
刚开始使用jQuery时可能会频繁的操作DOM,这是相当耗费性能的。如我们要在body中动态输出一个表格,一些朋友会这样写:

好的做法:

这样在拼接完table串后再添加到body中,对DOM的操作只需一次。群里以前有朋友就因为这个导致在IE下输出时出现问题,而关于字符串的拼接可以参考下最快创建字符串的方法。

7.不使用jQuery

原生函数总是最快的,这点不难理解,在代码书写中我们不应该忘记原生JS。

就先总结这几条吧,每条建议并不难理解,但总结全面的话还是要花费不少时间的。如在减少代码段中,如果需要根据条件从数组中得到新数组时,可以使用$.grep() 方法,如果你在使用jQuery时有自己必得的话,欢迎在留言中和大家分享!

下面是其它网友的补充:

注意定义jQuery变量的时候添加var关键字
这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:

$loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的

请使用一个var来定义变量
如果你使用多个变量的话,请如下方式定义:

代码如下:
var page = 0,
$loading = $('#loading'),
$body = $('body');


不要给每一个变量都添加一个var关键字,除非你有严重的强迫症
定义jQuery变量
申明或者定义变量的时候,请记住如果你定义的是jQuery的变量,请添加一个$符号到变量前,如下:

var$loading = $('#loading');

这里定义成这样的好处在于,你可以有效的提示自己或者其它阅读你代码的用户,这是一个jQuery的变量。

DOM操作请务必记住缓存(cache)

在jQuery代码开发中,我们常常需要操作DOM,DOM操作是非常消耗资源的一个过程,而往往很多人都喜欢这样使用jQuery:

代码如下:
$('#loading').html('完毕');
$('#loading').fadeOut();


代码没有任何问题,你也可以正常运行出结果,但是这里注意你每次定义并且调用$('#loading')的时候,都实际创建了一个新的变量,如果你需要重用的话,记住一定要定义到一个变量里,这样可以有效的缓存变量内容,如下:

代码如下:
var $loading = $('#loading');
$loading.html('完毕');$loading.fadeOut();


这样性能会更好。

使用链式操作

上面那个例子,我们可以写的更简洁一些:

代码如下:
var $loading = $('#loading');
$loading.html('完毕').fadeOut();


精简jQuery代码

尽量把一些代码都整合到一起,请勿这样编码:

代码如下:
// !!反面人物$button.click(function(){
$target.css('width','50%');
$target.css('border','1px solid #202020');
$target.css('color','#fff');
});


应该这样书写:

代码如下:
$button.click(function(){
$target.css({'width':'50%','border':'1px solid #202020','color':'#fff'});
});


避免使用全局类型的选择器

请勿如下方式书写:$('.something >*');
这样书写更好:$('.something').children();

不要叠加多个ID

请勿如下书写:$('#something #children');
这样就够了:$('#children');

多用逻辑判断||或者&&来提速

请勿如下书写:

代码如下:
if(!$something) {
$something = $('#something ');
}


这样书写性能更好:

$something= $something|| $('#something');


尽量使用更少的代码

与其这样书写:if(string.length >0){..}

不如这样书写:if(string.length){..}

尽量使用 .on方法
如果你使用比较新版本的jQuery类库的话,请使用.on,其它任何方法都是最终使用.on来实现的。

尽量使用最新版本的jQuery
最新版本的jQuery拥有更好的性能,但是最新的版本可能不支持ie6/7/8,所以大家需要自己针对实际情况选择。

尽量使用原生的Javascript
如果使用原生的Javascript也可以实现jQuery提供的功能的话,推荐使用原生的javascript来实现。

如何书写高质量jQuery代码(使用jquery性能问题)_jquery




1.正确引用jQuery
1.尽量在body结束前才引入jQuery,而不是在head中。
2.借助第三方提供的CDN来引入jQuery,同时注意当使用第三方CDN出现问题时,要引入本地的jQuery文件。(对于已经使用了cdn的网站可以忽略,现在用户带宽都升级了,这个可以忽略了,放别人机器不一定稳定)
3.如果在前引入script文件的话,就不用写document.ready了,因为这时执行js代码时DOM已经加载完毕了。


window.jQuery || document.write('
2.优化jQuery选择器

高效正确的使用jQuery选择器是熟练使用jQuery的基础,而掌握jQuery选择器需要一定的时间积累,我们开始学习jQuery时就应该注意选择器的使用。

如果我们选择class为home的a元素时,可以使用下边代码:

1.方法1会使jQuery在整个DOM中查找class为home的a元素,性能可想而知。
2.方法2为要查找的元素添加了上下文,在这里变为查找id为nav的子元素,查找性能得到了很大提升。
3.方法3使用了find方法,它的速度更快,所以方法三最好。

关于jQuery选择器的性能优先级,ID选择器快于元素选择器,元素选择器快于class选择器。因为ID选择器和元素选择器是原生的JavaScript操作,而类选择器不是,大家顺便可以看下find context 区别,find() children区别。

3.缓存jQuery对象

缓存jQuery对象可以减少不必要的DOM查找,关于这点大家可以参考下缓存jQuery对象来提高性能。

4.正确使用事件委托
事件委托可以使事件更好的执行,在动态添加的元素上绑定事件也需要委托来实现,在新版本的jQuery中推荐大家使用on来给元素绑定一个或多个事件的处理函数。


我是单元格

比如我们要在上边的单元格上绑定一个单击事件,不注意的朋友可能随手写成下边的样子:

这样会为每个td绑上事件,在为100个单元格绑定click事件的测试中,两者性能相差7倍之多,好的做法应该是下边写法:

5.精简jQuery代码
如在上述代码中我们对jQuery代码进行了适当的合并,类似的还有.attr()方法等,我们没有写成下边的方式:

6.减少DOM操作
刚开始使用jQuery时可能会频繁的操作DOM,这是相当耗费性能的。如我们要在body中动态输出一个表格,一些朋友会这样写:

好的做法:

这样在拼接完table串后再添加到body中,对DOM的操作只需一次。群里以前有朋友就因为这个导致在IE下输出时出现问题,而关于字符串的拼接可以参考下最快创建字符串的方法。

7.不使用jQuery

原生函数总是最快的,这点不难理解,在代码书写中我们不应该忘记原生JS。

就先总结这几条吧,每条建议并不难理解,但总结全面的话还是要花费不少时间的。如在减少代码段中,如果需要根据条件从数组中得到新数组时,可以使用$.grep() 方法,如果你在使用jQuery时有自己必得的话,欢迎在留言中和大家分享!

下面是其它网友的补充:

注意定义jQuery变量的时候添加var关键字
这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:

$loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的

请使用一个var来定义变量
如果你使用多个变量的话,请如下方式定义:

代码如下:
var page = 0,
$loading = $('#loading'),
$body = $('body');


不要给每一个变量都添加一个var关键字,除非你有严重的强迫症
定义jQuery变量
申明或者定义变量的时候,请记住如果你定义的是jQuery的变量,请添加一个$符号到变量前,如下:

var$loading = $('#loading');

这里定义成这样的好处在于,你可以有效的提示自己或者其它阅读你代码的用户,这是一个jQuery的变量。

DOM操作请务必记住缓存(cache)

在jQuery代码开发中,我们常常需要操作DOM,DOM操作是非常消耗资源的一个过程,而往往很多人都喜欢这样使用jQuery:

代码如下:
$('#loading').html('完毕');
$('#loading').fadeOut();


代码没有任何问题,你也可以正常运行出结果,但是这里注意你每次定义并且调用$('#loading')的时候,都实际创建了一个新的变量,如果你需要重用的话,记住一定要定义到一个变量里,这样可以有效的缓存变量内容,如下:

代码如下:
var $loading = $('#loading');
$loading.html('完毕');$loading.fadeOut();


这样性能会更好。

使用链式操作

上面那个例子,我们可以写的更简洁一些:

代码如下:
var $loading = $('#loading');
$loading.html('完毕').fadeOut();


精简jQuery代码

尽量把一些代码都整合到一起,请勿这样编码:

代码如下:
// !!反面人物$button.click(function(){
$target.css('width','50%');
$target.css('border','1px solid #202020');
$target.css('color','#fff');
});


应该这样书写:

代码如下:
$button.click(function(){
$target.css({'width':'50%','border':'1px solid #202020','color':'#fff'});
});


避免使用全局类型的选择器

请勿如下方式书写:$('.something >*');
这样书写更好:$('.something').children();

不要叠加多个ID

请勿如下书写:$('#something #children');
这样就够了:$('#children');

多用逻辑判断||或者&&来提速

请勿如下书写:

代码如下:
if(!$something) {
$something = $('#something ');
}


这样书写性能更好:

$something= $something|| $('#something');


尽量使用更少的代码

与其这样书写:if(string.length >0){..}

不如这样书写:if(string.length){..}

尽量使用 .on方法
如果你使用比较新版本的jQuery类库的话,请使用.on,其它任何方法都是最终使用.on来实现的。

尽量使用最新版本的jQuery
最新版本的jQuery拥有更好的性能,但是最新的版本可能不支持ie6/7/8,所以大家需要自己针对实际情况选择。

尽量使用原生的Javascript
如果使用原生的Javascript也可以实现jQuery提供的功能的话,推荐使用原生的javascript来实现。

jQuery选择器的工作原理和优化分析

每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init
对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可
以实现继承,加上js的对象只是引用不会是拷贝,new
jQuery,new
jQuery.fn和new
jQuery.fn.init的子对象是一样的,只是有没有执行到init的不同,这里就不讲原因了,等下一篇再讲为什么会是这样。
当我们使用选择器的时候$(selector,content),就会执行
init(selectot,content),我们看看inti中是怎样执行的:
复制代码
代码如下:
if
(
typeof
selector
==
"string"
)
{
//正则匹配,看是不是HTML代码或者是#id
var
match
=
quickExpr.exec(
selector
);
//没有作为待查找的
DOM
元素集、文档或
jQuery
对象。
//selector是#id的形式
if
(
match
&&
(match[1]
||
!context)
)
{
//
HANDLE:
$(html)
->
$(array)
//HTML代码,调用clean补全HTML代码
if
(
match[1]
){
selector
=
jQuery.clean(
[
match[1]
],
context
);
}
//
是:
$("#id")
else
{
//判断id的Dom是不是加载完成
var
elem
=
document.getElementById(
match[3]
);
if
(
elem
){
if
(
elem.id
!=
match[3]
)
return
jQuery().find(
selector
);
return
jQuery(
elem
);//执行完毕return
}
selector
=
[];
}
//非id的形式.在context中或者是全文查找
}
else{
return
jQuery(
context
).find(
selector
);
}
}
这里就说明只有选择器写成$(‘#id')的时候最快,相当于执行了一次
getElementById,后边的程序就不用再执行了。当然往往我们需要的选择器并不是这么简单,比如我们需要id下的CSS为className,
有这样的写法$(‘#id.className')和$(‘#id').find(‘.className');这两种写法的执行结果都是一样的,比
如<div
id=”id”><span
class=”className”></span></div>,返回的肯定都是<span
class=”className”></span>,但是执行的效率是完全不一样的。
在分析一下上边的代码,如果不是$(‘#id')这样的简单选择器的话,都会执行find函
数,那我们再看看find到底是做用的:
复制代码
代码如下:
find:
function(
selector
)
{
//在当前的对象中查找
var
elems
=
jQuery.map(this,
function(elem){
return
jQuery.find(
selector,
elem
);
});
//下边的代码可以忽略,只是做一些处理
//这里应用了js的正则对象的静态方法test
//indexOf("..")需要了解一下xpath的语法,就是判断selector中包含父节点的写法
//本意就是过滤数组的重复元素
return
this.pushStack(
/[^+>]
[^+>]/.test(
selector
)
||
selector.indexOf("..")
>
-1
?
jQuery.unique(
elems
)
:
elems
);
}
如果这样写$(‘#id
.className'),就会执行到扩展的find(‘#id
.className',document),因为当前的this是document的jQuery数组,那我们在看看扩展的find他的实现,代码比较
多,就不列出来,总之就是从第二个参数传递进行的dom第一个子节点开始找,遇见#比对id,遇见.比对ClassName,还有:<+-等处理。
那我们要优化,是不是就要想办法让第二个参数context的范围最小,那样遍历是不是就很少了?
如果我们这样写$(‘#id').find(‘.className'),那程序只这样执行
的,第一次init的时候执行一步getElementById,就return了,接着执行
find(‘.className',divDocument),divDocument就是我们第一次选择的是div标签,如果document下有很
多dom对象的时候,这次只遍历divDocument是不是少了很多次,而且在第一次选择id的速度也要比遍历快的多。
现在大家应该是明白了吧。就是说第一层选择最好是ID,而是简单选择器,目的就是定义范围,
提高速度,这次就说这些,选择写法的优化,其他的优化,下次再说。

jQuery选择器的工作原理和优化分析

每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init
对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可
以实现继承,加上js的对象只是引用不会是拷贝,new
jQuery,new
jQuery.fn和new
jQuery.fn.init的子对象是一样的,只是有没有执行到init的不同,这里就不讲原因了,等下一篇再讲为什么会是这样。
当我们使用选择器的时候$(selector,content),就会执行
init(selectot,content),我们看看inti中是怎样执行的:
复制代码
代码如下:
if
(
typeof
selector
==
"string"
)
{
//正则匹配,看是不是HTML代码或者是#id
var
match
=
quickExpr.exec(
selector
);
//没有作为待查找的
DOM
元素集、文档或
jQuery
对象。
//selector是#id的形式
if
(
match
&&
(match[1]
||
!context)
)
{
//
HANDLE:
$(html)
->
$(array)
//HTML代码,调用clean补全HTML代码
if
(
match[1]
){
selector
=
jQuery.clean(
[
match[1]
],
context
);
}
//
是:
$("#id")
else
{
//判断id的Dom是不是加载完成
var
elem
=
document.getElementById(
match[3]
);
if
(
elem
){
if
(
elem.id
!=
match[3]
)
return
jQuery().find(
selector
);
return
jQuery(
elem
);//执行完毕return
}
selector
=
[];
}
//非id的形式.在context中或者是全文查找
}
else{
return
jQuery(
context
).find(
selector
);
}
}
这里就说明只有选择器写成$(‘#id')的时候最快,相当于执行了一次
getElementById,后边的程序就不用再执行了。当然往往我们需要的选择器并不是这么简单,比如我们需要id下的CSS为className,
有这样的写法$(‘#id.className')和$(‘#id').find(‘.className');这两种写法的执行结果都是一样的,比
如<div
id=”id”><span
class=”className”></span></div>,返回的肯定都是<span
class=”className”></span>,但是执行的效率是完全不一样的。
在分析一下上边的代码,如果不是$(‘#id')这样的简单选择器的话,都会执行find函
数,那我们再看看find到底是做用的:
复制代码
代码如下:
find:
function(
selector
)
{
//在当前的对象中查找
var
elems
=
jQuery.map(this,
function(elem){
return
jQuery.find(
selector,
elem
);
});
//下边的代码可以忽略,只是做一些处理
//这里应用了js的正则对象的静态方法test
//indexOf("..")需要了解一下xpath的语法,就是判断selector中包含父节点的写法
//本意就是过滤数组的重复元素
return
this.pushStack(
/[^+>]
[^+>]/.test(
selector
)
||
selector.indexOf("..")
>
-1
?
jQuery.unique(
elems
)
:
elems
);
}
如果这样写$(‘#id
.className'),就会执行到扩展的find(‘#id
.className',document),因为当前的this是document的jQuery数组,那我们在看看扩展的find他的实现,代码比较
多,就不列出来,总之就是从第二个参数传递进行的dom第一个子节点开始找,遇见#比对id,遇见.比对ClassName,还有:<+-等处理。
那我们要优化,是不是就要想办法让第二个参数context的范围最小,那样遍历是不是就很少了?
如果我们这样写$(‘#id').find(‘.className'),那程序只这样执行
的,第一次init的时候执行一步getElementById,就return了,接着执行
find(‘.className',divDocument),divDocument就是我们第一次选择的是div标签,如果document下有很
多dom对象的时候,这次只遍历divDocument是不是少了很多次,而且在第一次选择id的速度也要比遍历快的多。
现在大家应该是明白了吧。就是说第一层选择最好是ID,而是简单选择器,目的就是定义范围,
提高速度,这次就说这些,选择写法的优化,其他的优化,下次再说。

jquery常用几种选择器的实例用法区别

一、Jquery常用的过滤选择器如下所示:

1、:first,选取第一个元素,比如$("p:first")选取第一个p元素

2、:last,选取最后一个元素,比如$("p:last")选取最后一个p元素

3、:not(选择器),选取不满足“选择器”条件的元素,比如$("p:not(.className)"),选取样式不是className的所有p元素

4、:even/:odd,选取索引为偶数/奇数的元素,比如$("p:even"),选取索引号为偶数的所有p元素

5、:eq(索引序号)/:gt(索引序号)/:lt(索引序号),选取等于索引号/大于索引号/小于索引号的元素,比如$("p:lt(3)"),选取索引号小于3的所有p元素

注意:

过滤选择器的混合使用时要记住后面的过滤条件是以前面的过滤选择器过滤后的重新序号为基础,即过滤的逐级性,比如

$("#t1 tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3)是从gt(0)出的新序列中的序号,不要写成lt(4)

二,重点

1. 多条件选择器

多条件选择器:$("p,p,span,menuitem"),同时选择p标签,p标签,和拥有menuitem样式的span标签元素

注意选择器表达式中的空格不能多不能少,易错!

2. 相对选择器

只要在$()指定第二个参数,第二个参数为相对的元素。比如html代码如下

<table id="table1">

<tr><td>dsds</td><td>dsfdef</td></tr>

<tr><td>dsds</td><td>dsfdef</td></tr>

<tr><td>dsds</td><td>dsfdef</td></tr>

<tr><td>dsds</td><td>dsfdef</td></tr>

<tr><td>dsds</td><td>dsfdef</td></tr>

</table>那么可以用如下的js代码操作td的背景色

$("td", $(this)).css("background", "red"),这句代码用的就是相对选择器,选择出的td是以当前的tr为相对的元素。选择的td元素是当前的tr元素下的所有td元素,没有涉及到其他行的td元素 。

<script type="text/

javascript

">

$(function () {

$("#table1 tr").click(function () {

$("td", $(this)).css("background", "red");

});

});

</script>

3. 层次选择器:

a $("#p li")获取p下的所有li元素(后代,子,子的子....)

b $("#p > li")获取p下的直接li子元素//注意空格

c $(".menuitem + p")获取样式名为menuitem之后的第一个p元素,不常用。

d $(".menuitem ~ p")获取样式名为menuitem之后的所有的p元素,不常用。

细节区别在于(易错点):

多条件选择器:$("p,p,span,menuitem"),相对选择器:$("td", $(this)).css("background", "red")",层次选择器:$("#p li")获取p下的所有li元素(后代,子,子的子....)

三者的区别是:

1. 多条件选择器:在一个“”内有逗号区分,

2. 相对选择器:2个元素分开 ,

3. 层次选择器在一个“”内以空格区分

示例代码如下:

<style type="text/css">

/*高亮显示*/

.highlight{

background-color: gray

}

</style><body>

<div>

<p>Hello</p>

</div>

<div id="test">ID为test的DIV</div>

<input type="checkbox" id="s1" name="football" value="足球" />足球

<input type="checkbox" name="volleyball" value="排球" />排球

<input type="checkbox" id="s3" name="basketball" value="篮球" />篮球

<input type="checkbox" id="s4" name="other" value="其他" />其他

</body>

在jQuery里如何使用复合选择器


这次给大家带来在jQuery里如何使用复合选择器,在jQuery里使用复合选择器的注意事项有哪些,下面就是实战案例,一起来看一下。
一 介绍

复合选择器将多个选择器(可以是ID选择器、元素选择或是类名选择器)组合在一起,两个选择器之间以逗号“,”分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的jQuery对象。

多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素,而是将每个选择器匹配的元素合并后一起返回。
复合选择器的使用方法如下:
$(" selector1,selector2,selectorN");
selector1:为一个有效的选择器,可以是ID选择器、无素选择器或是类名选择器等。

selector2:为另一个有效的选择器,可以是ID选择器、无素选择器或是类名选择器等。

selectorN:(可选择)为任意多个选择器,可以是ID选择器、无素选择器或是类名选择器等。

例如,要查询文档中的全部的<span>标记和使用css类myClass的<p>标记,可以使用下面的jQuery代码:
$("span,p.myClass");
二 应用

在页面添加3种不同元素并统一设置样式。使用复合选择器筛选<p>元素和id属性值为span的元素,并为它们添加新的样式。

三 代码
<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<p class="default">p元素</p>
<p class="default">p元素</p>
<span class="default" id="span">ID为span的元素</span>
<input type="button" value="为p元素和ID为span的元素换肤" />
<script type="text/javascript">
$(document).ready(
function()
{
$("input[type=button]").click(
function() //绑定按钮的单击事件
{
var myClass = $("p,#span"); //选取DOM元素
myClass.css("background-color","#C50210"); //为选取的DOM元素设置背景颜色
myClass.css("color","#FFF"); //为选取的DOM元素设置文字颜色
});
});
</script>
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
vue计算属性详解

Vue怎样使用CDN优化首屏加载

Vue项目怎样分环境打包


vue的新手入门教程

在jQuery里如何使用复合选择器


这次给大家带来在jQuery里如何使用复合选择器,在jQuery里使用复合选择器的注意事项有哪些,下面就是实战案例,一起来看一下。
一 介绍

复合选择器将多个选择器(可以是ID选择器、元素选择或是类名选择器)组合在一起,两个选择器之间以逗号“,”分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的jQuery对象。

多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素,而是将每个选择器匹配的元素合并后一起返回。
复合选择器的使用方法如下:
$(" selector1,selector2,selectorN");
selector1:为一个有效的选择器,可以是ID选择器、无素选择器或是类名选择器等。

selector2:为另一个有效的选择器,可以是ID选择器、无素选择器或是类名选择器等。

selectorN:(可选择)为任意多个选择器,可以是ID选择器、无素选择器或是类名选择器等。

例如,要查询文档中的全部的<span>标记和使用css类myClass的<p>标记,可以使用下面的jQuery代码:
$("span,p.myClass");
二 应用

在页面添加3种不同元素并统一设置样式。使用复合选择器筛选<p>元素和id属性值为span的元素,并为它们添加新的样式。

三 代码
<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<p class="default">p元素</p>
<p class="default">p元素</p>
<span class="default" id="span">ID为span的元素</span>
<input type="button" value="为p元素和ID为span的元素换肤" />
<script type="text/javascript">
$(document).ready(
function()
{
$("input[type=button]").click(
function() //绑定按钮的单击事件
{
var myClass = $("p,#span"); //选取DOM元素
myClass.css("background-color","#C50210"); //为选取的DOM元素设置背景颜色
myClass.css("color","#FFF"); //为选取的DOM元素设置文字颜色
});
});
</script>
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
vue计算属性详解

Vue怎样使用CDN优化首屏加载

Vue项目怎样分环境打包


vue的新手入门教程

jquery中类选择器的功能如何实现实例详解

一、类选择器的概念

类选择器,就是通过class属性获取节点。比如一个html结构中,有三个p标签都具有class=”red”的属性,那么类选择器返回的就是这三个p标签。

在jquery中,我们可以很方便的通过$(“.red”)这种方式按照类获取节点。但是在原生的javascript中,有getElementById(按照id属性获取元素)、getElementsByTagName(按照标签名获取元素)等方法,但是并没有类选择器相关方法。因此,编写原生js实现类选择器的方法非常关键。

二、类选择器的实现

通过利用原生js编写类选择器,可以更深入的了解js中的DOM相关操作,下面我们就来看一个简单的类选择器是如何实现的:

function getElementsByClass(classnames){

var classobj = newArray();

var classint = 0;

var tags =document.getElementsByTagName("*");

for(var i in tags){

if(tags[i].nodeType == 1){

if(tags[i].getAttribute("class") == classnames){

classobj[classint] = tags[i];

classint++;

}

}

}

return classobj;

}我们封装了一个getElementsByClass()方法,该方法的效果是:获取所有DOM节点,它们的class属性为选定值,并返回到一个数组中。该方法传递一个参数,即需要选择的class值。

该类选择器的实现方法,首先创建一个空的数组classobj,用来存放获取到的DOM节点。classint变量用来进行索引的表示,方便数组操作。我们利用getElementsByTagName(“*”)方法获取了这个页面上的所有DOM节点(*表示匹配所有)。

取出了所有DOM节点,我们就可以进行判断了。循环遍历取到的每一个节点,如果它的nodeType是1(元素节点),则利用getAttribute(“class”)方法获取节点的class属性值,并与传递进来的class参数进行比对,如果相同,说明是我们想要的节点,存入事先定义好的数组中。最后返回该数组即可。

三、原生js类选择器测试

下面我们来验证一下我们自己编写的类选择器是否正常工作,测试代码如下:

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

<scriptsrc="classtest.js"></script>

<script>

window.onload =function(){

var a = getElementsByClass("atest");

a[0].onmouseover = function(){

alert("class!!");

}

}

</script>

<style>

.atest{background:blue;width:200px;height:200px;margin:40px;color:white;}

.btest{background:green;width:200px;height:200px;margin:40px;color:white;}

</style>

</head>

<body>

<pclass="atest">atestAAA</p>

<pclass="btest">atestBBB</p>

</html>该代码我们利用我们自己封装的方法进行了测试,获取class为atest的元素,鼠标滑过后会弹出对话框。

注意我们封装的这个方法返回的是一个数组,就如同jquery中的sibling()方法一样,需要加入索引才能选中元素。如果一个页面有多个选中元素,可以利用数组循环遍历进行相应操作。

封装了一个盒jquery使用方法相同的库,每次写都有新的想法,所有代码的注释已经写到行间的注释了

/**

* Created by Jason on 2016/12/31.

*/

//jquery 的构造函数

function Jquery(arg){

//用来存选出来的元素

this.elemenets=[];

switch(typeof arg){

case 'function' :

domReady(arg);

break;

case 'string' :

this.elements = getEle(arg);

break;

case 'object' :

this.elements.push(arg);

break;

}

}

//DOM ready onload 如果参数是函数,则进行domReady操作

function domReady(fn){

// FF chrome

if(document.addEventListener){

//jquery中已经省略false,false解决低版本火狐兼容性问题

document.addEventListener('DOMContentLoaded',fn,false);

}else{

document.attachEvent('onreadystatechange',function(){

if(document.readyState=='complete'){

fn();

}

});

}

}

function getByClass(oParent,sClass){

//高级浏览器支持getElementsByClassName直接使用

if(oParent.getElementsByClassName){

return oParent.getElementsByClassName(sClass);

}else{

//不支持需要选中所有标签的类名来选取

var res=[];

var aAll=oParent.getElementsByTagName('*');

for(var i=0;i<aAll.length;i++){

//选中标签的全部类名是个str='btn on red'=aAll[i].className 使用正则 reg=/b sClass b/g

var reg= new RegExp('b'+sClass+'b','g');

if(reg.test(aAll[i].className)){

res.push(aAll[i]);

}

}

return res;

}

}

//如果参数是str 进行选择器的操作

function getByStr(aParent,str){

//用来存放选中的元素的数组 这个数组在getEle存在,为了每次执行的时候都需要清空,所以使用局部函数的变量

var aChild=[];

//aParent开始是[document],再执行完getByStr的时候getEle将aParent指向了getByStr函数的返回值aChild数组以确保循环父级下面的所有匹配元素

for(var i=0;i<aParent.length;i++){

switch(str.charAt(0)){

//id选择器 eg: #box 使用document.getElementById选取

case '#':

var obj=document.getElementById(str.substring(1));

aChild.push(obj);

break;

//类选择器 eg: .box 使用上面封装的getByClass选取

case '.':

//由于一个标签可以有多个类选择器 所以需要进行循环选取

var aRes=getByClass(aParent[i],str.substring(1));

for(var j=0;j<aRes.length;j++){

aChild.push(aRes[j]);

}

break;

//今天先简单的编写选择器 这里我们假设除了id和类选择器,就是标签选择器

default:

// 如果是li.red 那么用正则来判断

if(/w+.w+/g.test(str)){

//先选择标签,在选择类选择器 使用类选择器的时候重复选择器函数即可

var aStr=str.split('.');

var aRes=aParent[i].getElementsByTagName(aStr[0]);

var reg=new RegExp('b'+aStr[1]+'b','g');

//循环选取标签,注意外层已经有i的循环

for(var j=0;j<aRes.length;j++){

if(reg.test(aRes[j].className)){

aChild.push(aRes[j]);

}

}

//如果是li:eq(2) 或者 li:first这样的选择器 书写正则是的时候注意()可有可以无为? 有或者没有为* 至少有一个也就是若干个为+ {2,5}这种则为2-5个

}else if(/w+:w+((d+))?/g.test(str)){

//讲str进行整理 [li,eq,2] 或者 [li,first]

var aStr=str.split(/:|(|)/);

//aStr[2]是eq、lt、gt传入的参数,这里使用n来保存

var n=aStr[2];

//在父级下获取所有匹配aStr[0]项的标签

var aRes=aParent[i].getElementsByTagName(aStr[0]);

//这时候会循环判断aStr[1]项是的内容,jquery中经常使用的为eq、lt、gt、even、odd、first、last

switch(aStr[1]){

//如果是eq则把第n项传入aChild数组即可

case 'eq':

aChild.push(aRes[n]);

break;

//如果是lt需要将aRes数组中获取到的小于n的标签循环推入aChild中

case 'lt':

for(var j=0;j<n;j++){

aChild.push(aRes[j]);

}

break;

//如果是gt则和lt相反

case 'gt':

for(var j=n;j<aRes.legth;j++){

aChild.push(aRes[j]);

}

break;

//如果是event的话需要隔数添加,注意jquery中的event是从第0开始循环的

case 'event':

for(var j=0;j<aRes.length;j+=2){

aChild.push(aRes[j]);

}

break;

//如果是odd的和event不同的只是从第1项开始循环

case 'odd':

for(var j=1;j<aRes.length;j+=2){

aChild.push(aRes[j]);

}

break;

//如果是first,则将aRes[0]推入aChild

case 'first':

aChild.push(aRes[0]);

break;

case 'last':

aChild.push(aRes[aRes.length-1]);

break;

}

//属性选择器 eg:input[type=button] 同样适用正则来判断

}else if(/w+[w+=w+]/g.test(str)){

//将属性选择器切成数组 [input,type,button]

var aStr=str.split(/[|=|]/g);

var aRes=aParent[i].getElementsByTagName(aStr[0]);

//在选中标签中选出有aRes[1]的属性

for(var j=0;j<aRes.length;j++){

//把属性值为aRes[2]的标签推入aChild中

if(aRes[j].getAttribute(aStr[1])==aStr[2]){

aChild.push(aRes[j]);

}

}

//标签选择器 p、span

}else{

var aRes=aParent[i].getElementsByTagName(str);

for(var j=0;j<aRes.length;j++){

aChild.push(aRes[j]);

}

}

break;

}

}

return aChild;

}

function getEle(str){

//如果是字符串的话先要去除收尾空格 eg:" on replace index play auto "

var arr = str.replace(/^s+|s+$/g,'').split(/s+/g);

var aChild = [];

var aParent = [document];

for(var i = 0;i<arr.length;i++){

aChild = getByStr(aParent,arr[i]);

aParent = aChild

}

return aChild;

}

//实现jquery $符号的写法

function $(arg){

return new Jquery(arg);

}

jquery选择器有几种

jquery选择器有9种,分别是:基本的有id、标签、类、通配符选择器;层次选择器;基本过滤器选择器;内容过滤器选择器;可见性过滤器选择器;属性过滤器选择器;子元素过滤器选择器;表单选择器;表单过滤器选择器。

  jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“writeLess,DoMore”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

欧尚宠物网还为您提供以下相关内容希望对您有帮助:

针对jQuery 项目的优化方法有哪些?

jQuery 项目的优化方法有很多,以下是一些常见的方法:1. 总是使用 ID 去寻找 element。在 jQuery 中最快的选择器是 ID 选择器,因为它直接映射为 JavaScript 的 getElementById() 方法。选择多个元素,在我们讨论选择多个...

如何书写高质量jQuery代码(使用jquery性能问题)_jquery

如果我们选择class为home的a元素时,可以使用下边代码:1.方法1会使jQuery在整个DOM中查找class为home的a元素,性能可想而知。2.方法2为要查找的元素添加了上下文,在这里变为查找id为nav的子元素,查找性能得到了很大提升。

jquery常用几种选择器的实例用法区别

一、Jquery常用的过滤选择器如下所示: 1、:first,选取第一个元素,比如$("p:first")选取第一个p元素 2、:last,选取最后一个元素,比如$("p:last")选取最后一个p元素 3、:not(选择器),选取不满足“选择器”条...

在jQuery里如何使用复合选择器

selectorN:(可选择)为任意多个选择器,可以是ID选择器、无素选择器或是类名选择器等。例如,要查询文档中的全部的标记和使用css类myClass的标记,可以使用下面的jQuery代码:$("span,p.myClass");二 应用在页面添加3...

jquery选择器有哪些

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头:$()。1 .基本选择器$(...

jquery 有几种选择器?jquery 如何提高执行效率

提高jQuery的执行效率:1.选择器性能排行:$("#ID") &gt; $("Tag") &gt; $(".Class") &gt; $("[attribute=value]")2.链式调用:("#gbdiv").hide();("#gbdiv").css("color", "#202020");("#gbdiv").show()...

jquery中类选择器的功能如何实现实例详解

一、类选择器的概念类选择器,就是通过class属性获取节点。比如一个html结构中,有三个p标签都具有class=”red”的属性,那么类选择器返回的就是这三个p标签。在jquery中,我们可以很方便的通过$(“.red”)这种方式按照类获取节点。但是...

jQuery多条件筛选如何实现_jquery

jQuery当用户点击任意条件时,标记当前选中状态,相邻条件取消选中状态,并且更新已选条件容器内容,请看代码:实际应用中,我们要结合后端程序,实现帅选条件时,页面响应的内容也会变化,有兴趣的同学可以尝试下。

Jquery实战

a[href*=jquery.com]选择引用jQuery网站的所有链接元素 过滤符 通过过滤符选择器可以在已选择的元素中过滤出需要的元素,上面的特性选择器也属于过滤符,另外还有“:”字符 如:li:has(a)—— 选择匹配包含元素的所有 元素...

如何高效的使用jQuery

('a').click(function(){alert($(this).attr('id'));});这段代码的意思是,点击a元素后,弹出该元素的id属性。为了获取这个属性,必须连续两次调用jQuery,第一次是$(this),第二次是attr('id')。 事实上,这种...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top