1.可见性过滤选择器
:hidden 选取所有不可见的元素。例如:$(“:hidden”) 表示选取所有不可见的元素。包括:
<input type="hidden" />
<div style="display:none;"></div>
<div style="visibity:hidden"></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 style="display:none"></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 class="test">
<div style="display:none">a</div>
<div style="display:none">b</div>
<div style="display:none">c</div>
<div class="test" style="display:none">d</div>
</div>
<div class="test" style="display:none;">e</div>
<div class="test" style="display:none">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" id="txt" disabled readonly />
<input type="checkbox" id="ck" disabled readonly checked />
</div>
<div>
<input type="button" id="button1" 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" id="txt" />
<input type="checkbox" id="ck" />
</div>
<div>
<input type="button" id="button1" 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" id="ck" />
</div>
<div>
<input type="button" id="button1" 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" id="button1" value="测试" onclick="test()" />
trigger:
<input type="text" id="txt" onfocus="getFocus()" />
triggerHandler:
<input type="text" id="txt2" 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" id="button1" value="测试" onclick="test()" />
trigger:
<input type="text" id="txt" onfocus="getFocus()" />
triggerHandler:
<input type="text" id="txt2" 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.
以下是2017-3-8更新
5.获取和设置CSS属性
在jQuery中css方法用于获取和设置元素的CSS样式。在获取样式值时,css()返回的是元素的当前样式,返回值可能来自style属性也可能来自样式表。注意:不能获取复合样式的值,比如:font、margin等。应该单个样式的值,比如:font-weight、font-size、margin-top、margin-bottom等等。在设置css样式时,css()方法会将样式简单添加到该元素的style属性中。css()方法允许在css样式命中使用连接字符串(background-color)或者使用驼峰式JavaScript样式名(backgroudColor)。在获取样式值时,css()会把数值转换成带有单位后缀的字符串返回。而在设置样式时,则会将数值转化为成字符串,在必要时添加”px”(像素)后缀。
$("#divFont").css("font");//错误,不可能使用复合式
$("#divFont").css("font-weigth");//正确
$("#divFont").css("fontWeigth");//正确
$("#divFont").css("border","solid back 1px");//设置符合样式时允许的
$("#divFont").css({backgroundColor:"black",padding:"10px 2px 4px 20px"});//允许设置多个样式,也可以使用驼峰进行设置
以下是2017-3-15更新
6.jQuery.isFunction
当参数是原生Function对象时,返回true。在IE8以及之前的版本中,window.alert和window.attachEvent()等浏览器返回false.
7.jQuery.parseJSON
该函数会解析JSON格式的字符串,返回解析结果。当传入的格式有误时,它会抛异常。在定义它的浏览器中jQuery使用标准的JSON.parse()函数。注意jQuery只定义JSON解析函数,而没有定义JSON序列化函数。
8. :hidden
匹配所有在屏幕上不可见的元素,大体上可以认为这些元素的offsetWidth和offsetHeight为0。
9. :image
jQuery的扩展方法,匹配<input type="image">
元素.不会匹配<img>
元素。
10:button
jQuery的扩展方法,匹配<input type="button">
和<button type="button">
元素
以下是2017-4-18更新
文章太长了,以增加新的篇幅,请查看
http://blog.csdn.net/u010533180/article/details/70226468