jQuery 中一些细节知识点(本文会持续更新)

2017-01-13 10:51:03来源:csdn作者:u010533180人点击

1.可见性过滤选择器

:hidden 选取所有不可见的元素。例如:$(“:hidden”) 表示选取所有不可见的元素。包括:

<input type="hidden" />
<div></div>
<div></div>

html页面上的注释内容/**/、<head></head>、<meta></meta>(如果页面上由此标签)、<title></title>、<script src="*.js"></script>、<script type='text/javascript'></script>、 <style type="text/css"></style> 等元素。如果只想去<input>元素,可以使用$(“input:hidden”) 注意input:hidden之间没有空格,稍后我们会讲解这个有无空格的区别; 验证如下: 验证页面代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试jQuery选择器</title><script src="Scripts/jquery-1.7.1.js"></script>
<style type="text/css">
.test {
background-color: yellow;
}
</style>
</head>
<body>
<input type="hidden"value="hidden"/>
<div></div>
<script type="text/javascript">
var $hidden1 = $(":hidden");
var $hidden2 = $("input:hidden");
var len1 = $hidden1.length;
var len2 = $hidden2.length;
console.log("$(':hidden').length:"+len1);
console.log("$('input:hidden').lengh:" + len2);
$.each($hidden1, function () {
console.log(this.nodeName+":"+this.innerHTML);
});
$.each($hidden2, function () {
console.log(this.nodeName + ":" + this.innerHTML);
});
</script>
</body>
</html>

输出结果如下:

$(':hidden').length:8
$('input:hidden').lengh:1
HEAD:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试jQuery选择器</title><script src="Scripts/jquery-1.7.1.js"></script>
<style type="text/css">
.test {
background-color: yellow;
}
</style> META:
TITLE:测试jQuery选择器
SCRIPT:
STYLE:
.test {
background-color: yellow;
} INPUT:
DIV:
SCRIPT:
var $hidden1 = $(":hidden");
var $hidden2 = $("input:hidden");
var len1 = $hidden1.length;
var len2 = $hidden2.length;
console.log("$(':hidden').length:"+len1);
console.log("$('input:hidden').lengh:" + len2);
$.each($hidden1, function () {
console.log(this.nodeName+":"+this.innerHTML);
});
$.each($hidden2, function () {
console.log(this.nodeName + ":" + this.innerHTML);
}); INPUT:

为什么会出现上面的情况呢?通过谷歌浏览的元素查看面板(直接按F12),可以很直观的看到 head、title等元素默认会继承样式 display:none.

head {
display: none;
}

2. 选择器中有无空格

在选择器中的空格用不能忽视,有无空格会得到不同的结果。 看下面的例子:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试jQuery选择器</title><script src="Scripts/jquery-1.7.1.js"></script>
<style type="text/css">
.test {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</div>
<div>e</div>
<div>f</div><script type="text/javascript">
var $t1 = $(".test :hidden");//带空格
var $t2 = $(".test:hidden");//不带空格
var len1 = $t1.length;
var len2 = $t2.length;
console.log("$('.test :hidden').length:" + len1);
console.log("$('.test:hidden').length:" + len2);
$.each($t1, function () {
console.log(this.nodeName+":"+ this.innerHTML);
});
console.log();
$.each($t2, function () {
console.log(this.nodeName + ":" + this.innerHTML);
});
</script>
</body>
</html>

输出结果如下:

$('.test :hidden').length:4
$('.test:hidden').length:3
DIV:a
DIV:b
DIV:c
DIV:d DIV:d
DIV:e
DIV:f

之所以有不同的结果,因为后代选择器和过滤选择器的不同。 带空格的$(".test :hidden") 选取的是class为”test”的元素里面的隐藏元素,相当于就是.class *:hidden 和css的表述类似。

不带空格的$(".test:hidden") 选取的是隐藏的元素的class为”test”。

以下是2016-12-14更新

3. 属性获取attr 和prop, is()方法和prop方法的效率

在jQuery 版本中获取页面表单元素属性的时候使用的是方法attr,但是在访问某些属性的时候会有些问题。比如 input的disabled、readonly。在有些浏览器里,只要写了 disabled 属性就可以,有些必须写成disabled=”disabled”。所以在jQuery 1.6版本之后新增了方法prop,来获取这些属性,这个方法的返回值是标准属性:true/false.比如$("#checkbox").prop("disabled"),不会返回 “undefined”、”disabled”、”“,只会返回true或者false,在赋值的时候也是如此。但是$("#checkbox").attr("disabled") 可能会返回会返回 “undefined”、”disabled”、”“。 下面的例子来进行验证(我这里使用的是谷歌浏览器):

<div>
<input type="text" disabled readonly />
<input type="checkbox" disabled readonly checked />
</div>
<div>
<input type="button" value="测试" onclick="test();" />
</div>
<script type="text/javascript">
function test() {
var $txt = $("#txt");
console.log("text attr:");
console.log("readonly:" + $txt.attr("readonly"));
console.log("disabled:" + $txt.attr("disabled"));
console.log("text prop:");
console.log("readonly:" + $txt.prop("readonly"));
console.log("disabled:" + $txt.prop("disabled"));
var $ck = $("#ck");
console.log("checkbox attr:");
console.log("readonly:" + $ck.attr("readonly"));
console.log("disabled:" + $ck.attr("disabled"));
console.log("checkbox prop:");
console.log("readonly:" + $ck.prop("readonly"));
console.log("disabled:" + $ck.prop("disabled"));
}
</script>

输出结果:

text attr:
readonly:readonly
disabled:disabled
text prop:
readonly:true
disabled:true
checkbox attr:
readonly:readonly
disabled:disabled
checkbox prop:
readonly:true
disabled:true<div>
<input type="text"/>
<input type="checkbox"/>
</div>
<div>
<input type="button" value="测试" onclick="test();" />
</div>
<script type="text/javascript">
function test() {
var $txt = $("#txt");
console.log("text attr:");
console.log("readonly:" + $txt.attr("readonly"));
console.log("disabled:" + $txt.attr("disabled"));
console.log("text prop:");
console.log("readonly:" + $txt.prop("readonly"));
console.log("disabled:" + $txt.prop("disabled"));
var $ck = $("#ck");
console.log("checkbox attr:");
console.log("readonly:" + $ck.attr("readonly"));
console.log("disabled:" + $ck.attr("disabled"));
console.log("checkbox prop:");
console.log("readonly:" + $ck.prop("readonly"));
console.log("disabled:" + $ck.prop("disabled"));
}
</script>

输出结果:

text attr:
readonly:undefined
disabled:undefined
text prop:
readonly:false
disabled:false
checkbox attr:
readonly:undefined
disabled:undefined
checkbox prop:
readonly:false
disabled:false

通过上面的例子我们已经直观了解两者的区别了。那么那些属性应该使用attr 访问,那些应该使用prop 访问? 1.只添加属性名称该属性就会生效的应该使用prop;比如:disabled、readonly等。 2.只存在true/false的属性应该使用prop。 按照jQuery 官方的说法如果设置disabled和checked这些属性,应该使用prop方法,而不是attr方法。 虽然高版本的jQuery中提供了is(“:checked”) 方法来判断checkbox是否选中,但是效率不如prop方法。 来简单验证一下:

<div>
<input type="checkbox"/>
</div>
<div>
<input type="button" value="测试" onclick="test();" />
</div>
<script type="text/javascript">
function test() {
var $ck = $("#ck");
var start = time();
var loopCnt = 10000;
for (var i = 0; i < loopCnt; i++) {
if ($ck.is(":checked"))
{}
}
var end = time();
console.log(end - start);
start = time();
for (var i = 0; i < loopCnt; i++) {
if ($ck.prop(":checked")) {}
}
end = time();
console.log(end - start);
}
function time()
{
return new Date().getTime();
}
</script>

输出结果:

未选中状态:
13
4
选中状态:
11
2

当然网友可以更改测试用例的数量,来进行测试。可是为什么prop比is方法快呢?我们来看一下源码就明白了。

is 还需要判断选择器之类的.
is: function( selector ) {
return !!selector && (
typeof selector === "string" ?
// If this is a positional selector, check membership in the returned set
// so $("p:first").is("p:last") won't return true for a doc with two "p".
POS.test( selector ) ?
jQuery( selector, this.context ).index( this[0] ) >= 0 :
jQuery.filter( selector, this ).length > 0 :
this.filter( selector ).length > 0 );
}
prop:不需要直接进行遍历元素即可。
prop: function( name, value ) {
return jQuery.access( this, name, value, true, jQuery.prop );
}
access: function( elems, key, value, exec, fn, pass ) {
var length = elems.length;// Setting many attributes
if ( typeof key === "object" ) {
for ( var k in key ) {
jQuery.access( elems, k, key[k], exec, fn, value );
}
return elems;
}// Setting one attribute
if ( value !== undefined ) {
// Optionally, function values get executed if exec is true
exec = !pass && exec && jQuery.isFunction(value);for ( var i = 0; i < length; i++ ) {
fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
}return elems;
}4.trigger 和triggerHandler

两个都是用来模拟方法的运行,但是trigger不仅触发元素绑定的事件,也会触发浏览器默认绑定的事件。而triggerHandler之后触发元素绑定的事件。

来举个例子查看一下效果:

<div>
<input type="button" value="测试" onclick="test()" />
trigger:
<input type="text" onfocus="getFocus()" />
triggerHandler:
<input type="text" onfocus="getFocus2()" />
</div>
<script type="text/javascript">
function test() {
$("#txt").trigger("focus");
$("#txt2").triggerHandler("focus");
}
function getFocus() {
console.log("getFocus");
}
function getFocus2() {
console.log("getFocus2");
}
</script>

结果:

我们发现使用trigger 触发focus ,第一个文本框获得了焦点,并且在控制台的输出中有个 2,表示执行了2次 。获取有网友问 你是把trigger放到了前面,所以只有第一个获取了焦点,那么我们把两者的 顺序换一下。再验证一下:

<div>
<input type="button" value="测试" onclick="test()" />
trigger:
<input type="text" onfocus="getFocus()" />
triggerHandler:
<input type="text" onfocus="getFocus2()" />
</div>
<script type="text/javascript">
function test() {
$("#txt2").triggerHandler("focus");
$("#txt").trigger("focus");
}
function getFocus() {
console.log("getFocus");
}
function getFocus2() {
console.log("getFocus2");
}
</script>

我们依旧发现获得焦点的是trigger.


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台