jQuery each()方法的使用方法

jQuery ,是迄今为止世界上最流行的 JavaScript 库,一直是我们这些 Web
开发者的神器。自从它在 2006 年发布最初版本直到如今,已经有非常多的 Web
开发者在项目中引入了这个优秀的库来使开发工作变得更轻松。

jQuery 3.0 的变化及使用方法,jquery3.0

jQuery ,是迄今为止世界上最流行的 JavaScript 库,一直是我们这些 Web
开发者的神器。自从它在 2006 年发布最初版本直到如今,已经有非常多的 Web
开发者在项目中引入了这个优秀的库来使开发工作变得更轻松。

时隔 3 个月,jQuery 团队终于发布了 3.0 Alpha 版本。有两个版本 jQuery
compat 3.0 和 jQuery 3.0。

•jQuery compat 3.0 对应之前的 1.x, 兼容更多的浏览器,对于IE支持到 8.0
版本
•jQuery 3.0 对应之前的 2.x,关注更新的浏览器,对于IE支持到 9.0 版本

此外, 3.0还增加了对 Yandex 浏览器的支持,一款来自俄罗斯的浏览器。

1、简化了 show/hide

之前的 show/hide 是大兼容,比如 show, 无论元素的 display
是写在style,stylesheet里都能显示出来。3.0 则不同了,写在 stylesheet
里的 display:none 调用 show 后仍然隐藏。 3.0 建议采用 class
方式去显示隐藏,或者完全采用 hide 先隐藏(不使用css代码),再调用 show
也可以。

<style>
input {
display: none;
}
</style>
<input id="txt" type="text" value=""/>
<script>
$('#txt').show(); // 仍然隐藏的状态
</script>

2、data 方法兼容 data-name-11
写法

<input id="txt" type="text" value="" data-name-11="aa"/>
<script>
// 3.0 版本 输出 {"name-11": aa}, 之前版本输出 {}
$('#txt').data()
</script> 

这个问题本质是$.camelCase方法的实现差异

// 3.0 输出 "name-11", 3.0 之前版本输出 "name11"
$.camelCase('data-name-11') 

3、derferred 兼容了 Promise/A+

3.0 终于可以自信的宣告支持 Promise/A 了,之前一直被诟病是阉割版的。

4、$.ajax 对象删除了 success | error |
complete 方法

这是因为 Promise/A 规范的推动,大家对 Promise 的使用越来越多,之前对应
Derferred 上的几个方法没有存在的必要了

•derferred.done -> jqXHR.success
•derferred.fail -> jqXHR.error
•derrerred.always -> jqXHR.complete

// 以下方法在 3.0 后没有了
$.ajax().success
$.ajax().error
$.ajax().complete 

5、width/height,css(width) / css(height)
的返回值一律是十进制

之前部分浏览器特殊情况下返回浮点数。

6、 移除了注册事件的快捷函数 load |
unload | error

•load 名称和 ajax load 同名, 含糊不清。
•unload 如果 load 去掉, unload 也没有存在的意义了。
•error 采用 window.onerror 注册,不是一个标准事件 hander,因此也建议移除

以上内容给大家总结了jquery3.0的变化,下面主要给大家介绍jquery3.0更新内容及使用方法。

显示和隐藏

主要的改变是函数将如何工作的。而且有很好的理由这样做。在早些实现上,hide()
函数设置 css 属性为“display:none”,show()
函数是清除这个属性。但是这样做有些混乱。让我们看看几个例子:

  1. 如果当 show()
    函数尝试设置一个节点为“display:block”而在另外一个样式表里实现了“display:inline”属性,这将开始破坏代码。

2.
当我们为媒质处理响应式网页设计时(RWD),我们也许会用“display”或者“visibility”改变节点的可见性。这可能会影响“show()”和“hide()”函数。

除了这些,还有很多 JQuery
团队不得不去修复的其它问题。这导致了复杂的实现和性能问题,因此他们迁移到一个简单的模型。

今后,如果你设置“display:none”和使用“show()”,“slideDown()”,“fadeIn()”或者类似的方法去显示节点,它不会有效。更好的方法是使用“addClass()”和“removeClass()”控制显示。或者可以在“ready()”调用的时候在元素上调用“hide()”。

迅速举个例子:

<!DOCTYPE HTML><html>
<head>
<style>
.invisible{
display: none;
}
.visible{
background-color: deepskyblue;
display:block;
}
</style>
<script src="jquery-3.0.0-alpha1.js"></script>
<script>
$(document).ready(function(){
$("#div1").addClass("invisible");
$("#toggle").click(function(){
$("#div1").removeClass("visible");
$("#div1").addClass("invisible");
});
});
</script>
<title>Control Visibility</title>
</head>
<body>
<p>Hello!</p>
<div id="div1">Can you see this?</div>
<button id="toggle">Click me</button>
</body> </html>

图片 1

图片 2

.data() Key 的命名规则

jQuery 团队改变了 .data() 函数的实现来更符合 HTML5 数据集规范。如果
data-* 属性中的 key 包含了数字,该数字将不再参与转换。思考下面的例子:

使用 jQuery 2.1.4:

图片 3 

控制台窗口不显示对象。

使用 jQuery 3.0.0:

图片 4 

由于现在数字不会参与转换为骆驼拼写法,key 被转换成了
foo-42-name。因此,我们得到了控制台中的输出。这个 fiddle 的网址是
。你可以更改 jQuery 的版本来观察变化。

同样,如果我们想要不带任何参数地使用 data() 显示所有的数据,如果 data-*
属性的 key 名在连字符(-)后面接了一个数字,则参数的数量也将会在两个
jQuery 版本中改变,就像上面的例子一样。

width() 与 height() 函数返回小数值

一些浏览 器会将宽度和高度返回为亚像素值。现在无论浏览器是否支持, jQuery
的 .width()、.height()、.css(“width”) 都可以返回小数值了。对于为了使用
亚像素精度来 设计网页的用户来说,这可能 会是一个好消息。

.load()、.unload()、及 .error() 函数被移除

这些方法早先已经不赞成使用了,现在则已经从 jQuery 3.0.0 alpha
版中被移除。推荐的方法是使用 .on() 函数来处理这些事件。简短示例:

HTML:

<img src="space-needle.png" alt="Space Needle" id="spacen">

JavaScript:

早先的实现方式(现已不可用)

$( "#spacen" ).load(function() {
// Handler implementation
});

推荐的实现方式:

$( "#spacen" ).on( "load", function() {
// Handler implementation
});

jQuery 对象现在可遍历了

现在已经可以遍历 jQuery 对象了,使用 ES2015 的
for-of。所以,你可以像这样使用:

for ( node of $( "<div id=spacen>" ) ) {
console.log( node.id ); // Returns ‘spacen'
}

jQuery 动画现在在后端使用了 requestAnimationFrame API

所有现代的浏览器都已经支持了 requestAnimationFrame(参见:

)了。由于其被普遍支持,jQuery 将会使用此 API
来执行动画。其优势包括更流畅的动画及更少的 CPU
占用(因此,可以在手机上节约电量)。

增强 .unwrap() 函数

.unwrap() 函数可以让你在 DOM
中删除指定元素的父元素,早先不能接收参数。如果有人想给 unwrap
设定一个条件,这可能是个问题。

在 jQuery 3.0.0 alpha 中,.unwrap() 可以接收 jQuery
选择器做为参数来处理这个问题。

jQuery.Deferred 升级为 Promises/A+ 兼容

Promiseis是一个异步操作的最终结果——它是一个对象,承诺在未来交付结果。
和promise接口的最主要方式是then方法,
它注册了回调函数。现在,在JavaScript中使用Promise来完成异步工作变得日益流行。Promises/A+是一个兼容JavaScript
promises的开放标准。 (想要更多的信息,可以查看链接:
)

从jQuery的参考文档中,Deferred对象是一个由jQuery.Deferred()方法创建的可链接实用对象。它可以注册多个回调函数放入回调函数队列中、调度这个队列、更新任何同步或异步方法的成功和失败状态。在jquery
3.0.0中,jQuery.Deferred对象升级成与Promises/A+和ES2015 Promises兼容。
这就是.then()方法的主要变更。

更好地处理错误情况

这个版本的 jQuery 能更好地处理错误 ——
错误请求过去一直是被忽略的,直到现在的版本才会抛出错误。

举例来说:考虑到
offset,要获取当前第一个元素的坐标,相对于文档来说,就要匹配集合中的元素。如果你正试图在
jQuery 的早期版本找到抵消的窗口(window),你会得到{top: 0, left:
0}这样的结果,而不是抛出一个错误,这是因为抵消窗口(window)是无意义的。而在
3.0 alpha 版本中,它就会抛出一个错误。

另外一个例子:$(“#”) 现在会抛出一个错误,而不是返回一个长度为 0
的集合。

对自定义选择器(如 :visible ) 进行了加速

当 :visible
之类的选择器在一个文档内多次使用时,性能得到了很大的提升。其内部是通过缓存来实现的
——
第一次用过这个选择器后,以后返回结果都是一样的。但是其后的每一次调用返回结果都很快,因为缓存起作用了。来自
jQuery 的 Timmy Willison 在 报告 中指出使用缓存后 :visible
选择器的性能提升了 17 倍。

这些都是一些主要的更新。整个列表在他们的官方博客:

.

在哪里下载最新版本

有两个版本:

jQuery 3.0,其支持了现代浏览器:

jQuery Compat 3.0,其包含了对 IE8 的支持:

也可以从 npm 中获取:

npm install [email protected]
npm install [email protected]

jQuery和jQuery对象都实现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用。

jQuery和jQuery对象都实现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用。

使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。

时隔 3 个月,jQuery 团队终于发布了 3.0 Alpha 版本。有两个版本 jQuery
compat 3.0 和 jQuery 3.0。

您可能感兴趣的文章:

  • Jquery 模板数据绑定插件的使用方法详解
  • jquery indexOf使用方法
  • jquery showModelDialog的使用方法示例详解
  • jQuery jcrop插件截图使用方法
  • jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
  • jquery each的几种常用的使用方法示例
  • jquery插件lazyload.js延迟加载图片的使用方法
  • jquery数组封装使用方法分享(jquery数组遍历)
  • jQuery filter函数使用方法
  • jQuery.holdReady()使用方法
  • Jquery图片延迟加载插件jquery.lazyload.js的使用方法
  • jQuery 1.9使用$.support替代$.browser的使用方法
  • jquery UI Datepicker时间控件的使用方法(终结版)

3.0 的变化及使用方法,jquery3.0 jQuery
,是迄今为止世界上最流行的 JavaScript 库,一直是我们这些 Web
开发者的神器。自从它在 2006 年发…

复制代码 代码如下:

复制代码 代码如下:

选择表达式可以是CSS选择器:

•jQuery compat 3.0 对应之前的 1.x, 兼容更多的浏览器,对于IE支持到 8.0
版本
•jQuery 3.0 对应之前的 2.x,关注更新的浏览器,对于IE支持到 9.0 版本

jQuery.prototype.each=function( fn, args ) {
return jQuery.each( this, fn, args );
}

jQuery.prototype.each=function( fn, args ) {
return jQuery.each( this, fn, args );
}

 $(document)//选择整个文档对象
 $('#myId')//选择ID为myId的网页元素 
 $('div.myClass')//选择class为myClass的div元素 
 $('input[name=first]')//选择name属性等于first的input元素

此外, 3.0还增加了对 Yandex 浏览器的支持,一款来自俄罗斯的浏览器。

让我们看一下jQuery提供的each方法的具体实现,
jQuery.each(obj,fn,arg)
该方法有三个参数:进行操作的对象obj,进行操作的函数fn,函数的参数args。
让我们根据ojb对象进行讨论:

让我们看一下jQuery提供的each方法的具体实现,
jQuery.each(obj,fn,arg)
该方法有三个参数:进行操作的对象obj,进行操作的函数fn,函数的参数args。
让我们根据ojb对象进行讨论:

也可以是jQuery特有的表达式:

1、简化了 show/hide

1.obj对象是数组
each方法会对数组中子元素的逐个进行fn函数调用,直至调用某个子元素返回的结果为false为止,也就是说,我们可以在提供的fn函数进行处理,使之满足一定条件后就退出each方法调用。当each方法提供了arg参数时,fn函数调用传入的参数为arg,否则为:子元素索引,子元素本身
2.obj 对象不是数组
该方法同1的最大区别是:fn方法会被逐次不考虑返回值的进行进行。换句话说,obj对象的所有属性都会被fn方法进行调用,即使fn函数返回false。调用传入的参数同1类似。

1.obj对象是数组
each方法会对数组中子元素的逐个进行fn函数调用,直至调用某个子元素返回的结果为false为止,也就是说,我们可以在提供的fn函数进行处理,使之满足一定条件后就退出each方法调用。当each方法提供了arg参数时,fn函数调用传入的参数为arg,否则为:子元素索引,子元素本身
2.obj 对象不是数组
该方法同1的最大区别是:fn方法会被逐次不考虑返回值的进行进行。换句话说,obj对象的所有属性都会被fn方法进行调用,即使fn函数返回false。调用传入的参数同1类似。

$('a:first')//选择网页中第一个a元素 
$('tr:odd')//选择表格的奇数行 
$('#myForm :input')//选择表单中的input元素 
$('div:visible') //选择可见的div元素 
$('div:gt(2)')//选择所有的div元素,除了前三个 
$('div:animated')//选择当前处于动画状态的div元素

之前的 show/hide 是大兼容,比如 show, 无论元素的 display
是写在style,stylesheet里都能显示出来。3.0 则不同了,写在 stylesheet
里的 display:none 调用 show 后仍然隐藏。 3.0 建议采用 class
方式去显示隐藏,或者完全采用 hide 先隐藏(不使用css代码),再调用 show
也可以。

复制代码 代码如下:

复制代码 代码如下:

二、改变结果集

<style>
input {
display: none;
}
</style>
<input id="txt" type="text" value=""/>
<script>
$('#txt').show(); // 仍然隐藏的状态
</script>

jQuery.each=function( obj, fn, args ) {
if ( args ) {
if ( obj.length == undefined ){
for ( var i in obj )
fn.apply( obj, args );
}else{
for ( var i = 0, ol = obj.length; i < ol; i++ ) {
if ( fn.apply( obj, args ) === false )
break;

jQuery.each=function( obj, fn, args ) {
if ( args ) {
if ( obj.length == undefined ){
for ( var i in obj )
fn.apply( obj, args );
}else{
for ( var i = 0, ol = obj.length; i < ol; i++ ) {
if ( fn.apply( obj, args ) === false )
break;

如果选中多个元素,jQuery提供过滤器,可以缩小结果集:

2、data 方法兼容 data-name-11
写法

}

}

 $('div').has('p'); //选择包含p元素的div元素 
 $('div').not('.myClass'); //选择class不等于myClass的div元素 
 $('div').filter('.myClass'); //选择class等于myClass的div元素 
 $('div').first(); //选择第1个div元素 
 $('div').eq(5); //选择第6个div元素 
<input id="txt" type="text" value="" data-name-11="aa"/>
<script>
// 3.0 版本 输出 {"name-11": aa}, 之前版本输出 {}
$('#txt').data()
</script> 

}
} else {
if ( obj.length == undefined ) {
for ( var i in obj )
fn.call( obj, i, obj );
}else{
for ( var i = 0, ol = obj.length, val = obj[0]; i < ol &&
fn.call(val,i,val) !== false; val = obj[++i] ){}

}
} else {
if ( obj.length == undefined ) {
for ( var i in obj )
fn.call( obj, i, obj );
}else{
for ( var i = 0, ol = obj.length, val = obj[0]; i < ol &&
fn.call(val,i,val) !== false; val = obj[++i] ){}

有一些时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法:

这个问题本质是$.camelCase方法的实现差异

}
}
return obj;
}

}
}
return obj;
}

$('div').next('p'); //选择div元素后面的第一个p元素 
 $('div').parent(); //选择div元素的父元素 
 $('div').closest('form'); //选择离div最近的那个form父元素 
 $('div').children(); //选择div的所有子元素 
 $('div').siblings(); //选择div的同级元素 
// 3.0 输出 "name-11", 3.0 之前版本输出 "name11"
$.camelCase('data-name-11') 

需要特别注意的是each方法中fn的具体调用方法并不是采用简单的fn(i,val)或fn(args),而是采用了fn.call(val,i,val)或fn.apply(obj.args)的形式,这意味着,在你自己的fn的实现中,可以直接采用this指针引用数组或是对象的子元素。这种方式是绝大多数jQuery所采用的一种实现方式。
在jQuery里有一个each方法,用起来非常的爽,不用再像原来那样写for循环,jQuery源码里自己也有很多用到each方法。
其实jQuery里的each方法是通过js里的call方法来实现的。
下面简单介绍一下call方法。
call这个方法很奇妙,其实官方的说明是:“调用一个对象的一个方法,以另一个对象替换当前对象。”网上更多的解释是变换上下文环境,也有说是改变上下文this指针。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call
方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj
指定的新对象。
引用网上有一个很经典的例子
Js代码

需要特别注意的是each方法中fn的具体调用方法并不是采用简单的fn(i,val)或fn(args),而是采用了fn.call(val,i,val)或fn.apply(obj.args)的形式,这意味着,在你自己的fn的实现中,可以直接采用this指针引用数组或是对象的子元素。这种方式是绝大多数jQuery所采用的一种实现方式。
在jQuery里有一个each方法,用起来非常的爽,不用再像原来那样写for循环,jQuery源码里自己也有很多用到each方法。
其实jQuery里的each方法是通过js里的call方法来实现的。
下面简单介绍一下call方法。
call这个方法很奇妙,其实官方的说明是:“调用一个对象的一个方法,以另一个对象替换当前对象。”网上更多的解释是变换上下文环境,也有说是改变上下文this指针。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call
方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj
指定的新对象。
引用网上有一个很经典的例子
Js代码

三、链式操作

3、derferred 兼容了 Promise/A+

复制代码 代码如下:

复制代码 代码如下:

选中网页元素以后,就可以对它进行某种操作。

3.0 终于可以自信的宣告支持 Promise/A 了,之前一直被诟病是阉割版的。

function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);

function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);

jQuery允许将所有操作连接在一起,以链条的形式写出来,比如:

4、$.ajax 对象删除了 success | error |
complete 方法

用 add 来替换 sub,add.call(sub,3,1) == add(3,1)
,所以运行结果为:alert(4);
注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
具体call更深入的就不在这里提了。
下面提一下jQuery的each方法的几种常用的用法
Js代码

用 add 来替换 sub,add.call(sub,3,1) == add(3,1)
,所以运行结果为:alert(4);
注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
具体call更深入的就不在这里提了。
下面提一下jQuery的each方法的几种常用的用法
Js代码

$('div').find('h3').eq(2).html('Hello');

这是因为 Promise/A 规范的推动,大家对 Promise 的使用越来越多,之前对应
Derferred 上的几个方法没有存在的必要了

复制代码 代码如下:

复制代码 代码如下:

我们可以这样拆封开来,就是下面这样:

•derferred.done -> jqXHR.success
•derferred.fail -> jqXHR.error
•derrerred.always -> jqXHR.complete

var arr = [ “one”, “two”, “three”, “four”];
$.each(arr, function(){
alert(this);
});
//上面这个each输出的结果分别为:one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//其实arr1为一个二维数组,item相当于取每一个一维数组,
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为:1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
});
//这个each就有更厉害了,能循环每一个属性
//输出结果为:1 2 3 4

var arr = [ “one”, “two”, “three”, “four”];
$.each(arr, function(){
alert(this);
});
//上面这个each输出的结果分别为:one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//其实arr1为一个二维数组,item相当于取每一个一维数组,
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为:1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
});
//这个each就有更厉害了,能循环每一个属性
//输出结果为:1 2 3 4

$('div')//找到div元素 
.find('h3')//选择其中的h3元素 
.eq(2)//选择第3个h3元素 
.html('Hello'); //将它的内容改为Hello 
// 以下方法在 3.0 后没有了
$.ajax().success
$.ajax().error
$.ajax().complete 

您可能感兴趣的文章:

  • jquery $.each()使用探讨
  • jquery $.each
    和for怎么跳出循环终止本次循环
  • jquery
    each的几种常用的使用方法示例
  • Jquery的each里用return
    true或false代替break或continue
  • jquery进行数组遍历如何跳出当前的each循环
  • jquery中each遍历对象和数组示例
  • jQuery函数map()和each()介绍及异同点分析
  • jQuery
    中$(this).index与$.each的使用指南
  • jQuery中each()方法用法实例
  • Jquery中find与each方法用法实例
  • JQuery中$.each
    和$(selector).each()的区别详解
  • jQuery中使用each处理json数据
  • Jquery中的$.each获取各种返回类型数据的使用方法
  • jQuery中的each()详细介绍(推荐)

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。

5、width/height,css(width) / css(height)
的返回值一律是十进制

jQuery还提供了.end()方法,使得结果集可以后退一步:

之前部分浏览器特殊情况下返回浮点数。

$('div') 
.find('h3') 
.eq(2) 
.html('Hello') 
.end()//退回到选中所有的h3元素的那一步 
.eq(0)//选中第一个h3元素 
.html('World'); //将它的内容改为World

6、 移除了注册事件的快捷函数 load |
unload | error

四、元素的操作:取值和赋值

•load 名称和 ajax load 同名, 含糊不清。
•unload 如果 load 去掉, unload 也没有存在的意义了。
•error 采用 window.onerror 注册,不是一个标准事件 hander,因此也建议移除

操作网页元素,最常见的需求是取得它们的值,或者对它们进行赋值。

以上内容给大家总结了jquery3.0的变化,下面主要给大家介绍jquery3.0更新内容及使用方法。

jQuery使用同一个函数,来完成取值(getter)和赋值(setter)。到底是取值还是赋值,由函数的参数决定。

显示和隐藏

取出或设置html内容 取出某个表单元素的值

主要的改变是函数将如何工作的。而且有很好的理由这样做。在早些实现上,hide()
函数设置 css 属性为“display:none”,show()
函数是清除这个属性。但是这样做有些混乱。让我们看看几个例子:

需要注意的是,如果结果集包含多个元素,那么赋值的时候,将对其中所有的元素赋值;取值的时候,则是只取出第一个元素的值(.text()例外,它取出所有元素的text内容)。

  1. 如果当 show()
    函数尝试设置一个节点为“display:block”而在另外一个样式表里实现了“display:inline”属性,这将开始破坏代码。

五、元素的操作:移动

2.
当我们为媒质处理响应式网页设计时(RWD),我们也许会用“display”或者“visibility”改变节点的可见性。这可能会影响“show()”和“hide()”函数。

如果要移动选中的元素,有两种方法:一种是直接移动该元素,另一种是移动其他元素,使得目标元素达到我们想要的位置。

除了这些,还有很多 JQuery
团队不得不去修复的其它问题。这导致了复杂的实现和性能问题,因此他们迁移到一个简单的模型。

假定我们选中了一个div元素,需要把它移动到p元素后面。

今后,如果你设置“display:none”和使用“show()”,“slideDown()”,“fadeIn()”或者类似的方法去显示节点,它不会有效。更好的方法是使用“addClass()”和“removeClass()”控制显示。或者可以在“ready()”调用的时候在元素上调用“hide()”。

第一种方法是使用.insertAfter(),把div元素移动p元素后面:

迅速举个例子:

$('div').insertAfter('p');

<!DOCTYPE HTML><html>
<head>
<style>
.invisible{
display: none;
}
.visible{
background-color: deepskyblue;
display:block;
}
</style>
<script src="jquery-3.0.0-alpha1.js"></script>
<script>
$(document).ready(function(){
$("#div1").addClass("invisible");
$("#toggle").click(function(){
$("#div1").removeClass("visible");
$("#div1").addClass("invisible");
});
});
</script>
<title>Control Visibility</title>
</head>
<body>
<p>Hello!</p>
<div id="div1">Can you see this?</div>
<button id="toggle">Click me</button>
</body> </html>

第二种方法是使用.after(),把p元素加到div元素前面:

图片 5

$('p').after('div');

图片 6

表面上看,这两种方法的效果是一样的,唯一的不同似乎只是操作视角的不同。但是实际上,它们有一个重大差别,那就是返回的元素不一样。第一种方法返回div元素,第二种方法返回p元素。你可以根据需要,选择到底使用哪一种方法。

.data() Key 的命名规则

使用这种模式的操作方法,一共有四对

jQuery 团队改变了 .data() 函数的实现来更符合 HTML5 数据集规范。如果
data-* 属性中的 key 包含了数字,该数字将不再参与转换。思考下面的例子:

1 .insertAfter()和.after():在现存元素的外部,从后面插入元素 
2 .insertBefore()和.before():在现存元素的外部,从前面插入元素 
3 .appendTo()和.append():在现存元素的内部,从后面插入元素 
4 .prependTo()和.prepend() 
5 :在现存元素的内部,从前面插入元素

使用 jQuery 2.1.4:

六、元素的操作:复制、删除和创建

图片 7 

复制元素使用.clone()。

控制台窗口不显示对象。

删除元素使用.remove()和.detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。

使用 jQuery 3.0.0:

清空元素内容(但是不删除该元素)使用.empty()。

图片 8 

创建新元素的方法非常简单,只要把新元素直接传入jQuery的构造函数就行了:

由于现在数字不会参与转换为骆驼拼写法,key 被转换成了
foo-42-name。因此,我们得到了控制台中的输出。这个 fiddle 的网址是
。你可以更改 jQuery 的版本来观察变化。

$('<p>Hello</p>'); 
$('<li class="new">new list item</li>'); 
$('ul').append('<li>list item</li>'); 

同样,如果我们想要不带任何参数地使用 data() 显示所有的数据,如果 data-*
属性的 key 名在连字符(-)后面接了一个数字,则参数的数量也将会在两个
jQuery 版本中改变,就像上面的例子一样。

七、工具方法

width() 与 height() 函数返回小数值

除了对选中的元素进行操作以外,jQuery还提供一些工具方法(utility),不必选中元素,就可以直接使用。

一些浏览 器会将宽度和高度返回为亚像素值。现在无论浏览器是否支持, jQuery
的 .width()、.height()、.css(“width”) 都可以返回小数值了。对于为了使用
亚像素精度来 设计网页的用户来说,这可能 会是一个好消息。

如果你懂得Javascript语言的继承原理,那么就能理解工具方法的实质。它是定义在jQuery构造函数上的方法,即jQuery.method(),所以可以直接使用。而那些操作元素的方法,是定义在构造函数的prototype对象上的方法,即jQuery.prototype.method(),所以必须生成实例(即选中元素)后使用。如果不理解这种区别,问题也不大,只要把工具方法理解成,是像javascript原生函数那样,可以直接使用的方法就行了。

.load()、.unload()、及 .error() 函数被移除

常用的工具方法有以下几种:

这些方法早先已经不赞成使用了,现在则已经从 jQuery 3.0.0 alpha
版中被移除。推荐的方法是使用 .on() 函数来处理这些事件。简短示例:

  1. $.trim()
    去除字符串两端的空格。 
  2. $.each()
    遍历一个数组或对象。 
  3. $.inArray()
    返回一个值在数组中的索引位置。如果该值不在数组中,则返回-1。 
  4. $.grep()
    返回数组中符合某种标准的元素。  
  5. $.extend()
    将多个对象,合并到第一个对象。  
  6. $.makeArray()
    将对象转化为数组。 
  7. $.type()
    判断对象的类别(函数对象、日期对象、数组对象、正则对象等等)。 
  8. $.isArray()
    判断某个参数是否为数组。 
  9. $.isEmptyObject()
    判断某个对象是否为空(不含有任何属性)。
  10. $.isFunction()
    判断某个参数是否为函数。 
  11. $.isPlainObject()
    判断某个参数是否为用”{}”或”new Object”建立的对象。 
  12. $.support()
    判断浏览器是否支持某个特性。

HTML:

八、事件操作

<img src="space-needle.png" alt="Space Needle" id="spacen">

jQuery可以对网页元素绑定事件。根据不同的事件,运行相应的函数。

JavaScript:

 $('p').click(function(){ 
 alert('Hello'); 
 });

早先的实现方式(现已不可用)

目前,jQuery主要支持以下事件:

$( "#spacen" ).load(function() {
// Handler implementation
});
  1. .blur() 表单元素失去焦点。 
  2. .change()
    表单元素的值发生变化 
  3. .click() 鼠标单击 
  4. .dblclick() 鼠标双击 
  5. .focus() 表单元素获得焦点 
  6. .focusin() 子元素获得焦点
  7. .focusout() 子元素失去焦点 
  8. .hover()
    同时为mouseenter和mouseleave事件指定处理函数
  9. .keydown()
    按下键盘(长时间按键,只返回一个事件)
  10. .keypress()
    按下键盘(长时间按键,将返回多个事件)
  11. .keyup() 松开键盘 
  12. .load() 元素加载完毕 
  13. .mousedown() 按下鼠标 
  14. .mouseenter()
    鼠标进入(进入子元素不触发)
  15. .mouseleave()
    鼠标离开(离开子元素不触发)
  16. .mousemove()
    鼠标在元素内部移动 
  17. .mouseout()
    鼠标离开(离开子元素也触发)
  18. .mouseover()
    鼠标进入(进入子元素也触发)
  19. .mouseup() 松开鼠标 
  20. .ready() DOM加载完成 
  21. .resize()
    浏览器窗口的大小发生改变
  22. .scroll()
    滚动条的位置发生变化 
  23. .select()
    用户选中文本框中的内容 
  24. .submit() 用户递交表单 
  25. .toggle()
    根据鼠标点击的次数,依次运行多个函数
  26. .unload()  用户离开页面

推荐的实现方式:

以上这些事件在jQuery内部,都是.bind()的便捷方式。使用.bind()可以更灵活地控制事件,比如为多个事件绑定同一个函数:

$( "#spacen" ).on( "load", function() {
// Handler implementation
});
$('input').bind( 
'click change', //同时绑定click和change事件 
function(){ 
alert('Hello'); 
} 
);

jQuery 对象现在可遍历了

如果你只想让事件运行一次,这时可以使用.one()方法。

现在已经可以遍历 jQuery 对象了,使用 ES2015 的
for-of。所以,你可以像这样使用:

 $("p").one("click", function(){ 
 alert("Hello"); //只运行一次,以后的点击不会运行 
 }); 
for ( node of $( "<div id=spacen>" ) ) {
console.log( node.id ); // Returns ‘spacen'
}

.unbind()用来解除事件绑定。

jQuery 动画现在在后端使用了 requestAnimationFrame API

$('p').unbind('click');

所有现代的浏览器都已经支持了 requestAnimationFrame(参见:

)了。由于其被普遍支持,jQuery 将会使用此 API
来执行动画。其优势包括更流畅的动画及更少的 CPU
占用(因此,可以在手机上节约电量)。

所有的事件处理函数,都可以接受一个事件对象(event
object)作为参数,比如下面例子中的e:

增强 .unwrap() 函数

 $("p").click(function(e){ 
 alert(e.type); //"click" 
 });

.unwrap() 函数可以让你在 DOM
中删除指定元素的父元素,早先不能接收参数。如果有人想给 unwrap
设定一个条件,这可能是个问题。

这个事件对象有一些很有用的属性和方法:

在 jQuery 3.0.0 alpha 中,.unwrap() 可以接收 jQuery
选择器做为参数来处理这个问题。

  1. event.pageX
    事件发生时,鼠标距离网页左上角的水平距离
  2. event.pageY
    事件发生时,鼠标距离网页左上角的垂直距离
  3. event.type
    事件的类型(比如click)
  4. event.which 按下了哪一个键
  5. event.data
    在事件对象上绑定数据,然后传入事件处理函数
  6. event.target
    事件针对的网页元素
  7. event.preventDefault()
    阻止事件的默认行为(比如点击链接,会自动打开新页面)
  8. event.stopPropagation()
    停止事件向上层元素冒泡

jQuery.Deferred 升级为 Promises/A+ 兼容

在事件处理函数中,可以用this关键字,返回事件针对的DOM元素:

Promiseis是一个异步操作的最终结果——它是一个对象,承诺在未来交付结果。
和promise接口的最主要方式是then方法,
它注册了回调函数。现在,在JavaScript中使用Promise来完成异步工作变得日益流行。Promises/A+是一个兼容JavaScript
promises的开放标准。 (想要更多的信息,可以查看链接:
)

$('a').click(function(){ 
if ($(this).attr('href').match('evil')){//如果确认为有害链接 
e.preventDefault(); //阻止打开 
$(this).addClass('evil'); //加上表示有害的class 
} 
});

从jQuery的参考文档中,Deferred对象是一个由jQuery.Deferred()方法创建的可链接实用对象。它可以注册多个回调函数放入回调函数队列中、调度这个队列、更新任何同步或异步方法的成功和失败状态。在jquery
3.0.0中,jQuery.Deferred对象升级成与Promises/A+和ES2015 Promises兼容。
这就是.then()方法的主要变更。

有两种方法,可以自动触发一个事件。一种是直接使用事件函数,另一种是使用.trigger()或.triggerHandler()。

更好地处理错误情况

 $('a').click();
 $('a').trigger('click');

这个版本的 jQuery 能更好地处理错误 ——
错误请求过去一直是被忽略的,直到现在的版本才会抛出错误。

九、特殊效果

举例来说:考虑到
offset,要获取当前第一个元素的坐标,相对于文档来说,就要匹配集合中的元素。如果你正试图在
jQuery 的早期版本找到抵消的窗口(window),你会得到{top: 0, left:
0}这样的结果,而不是抛出一个错误,这是因为抵消窗口(window)是无意义的。而在
3.0 alpha 版本中,它就会抛出一个错误。

jQuery允许对象呈现某些特殊效果。

另外一个例子:$(“#”) 现在会抛出一个错误,而不是返回一个长度为 0
的集合。

$('h1').show(); //展现一个h1标题

对自定义选择器(如 :visible ) 进行了加速

常用的特殊效果如下:

当 :visible
之类的选择器在一个文档内多次使用时,性能得到了很大的提升。其内部是通过缓存来实现的
——
第一次用过这个选择器后,以后返回结果都是一样的。但是其后的每一次调用返回结果都很快,因为缓存起作用了。来自
jQuery 的 Timmy Willison 在 报告 中指出使用缓存后 :visible
选择器的性能提升了 17 倍。

$('h1').show(); //展现一个h1标题

这些都是一些主要的更新。整个列表在他们的官方博客:

.

常用的特殊效果如下:

在哪里下载最新版本

.fadeIn() 淡入
.fadeOut() 淡出
.fadeTo() 调整透明度
.hide() 隐藏元素
.show() 显示元素
.slideDown() 向下展开
.slideUp() 向上卷起
.slideToggle() 依次展开或卷起某个元素
.toggle() 依次展示或隐藏某个元素

有两个版本:

除了.show()和.hide(),所有其他特效的默认执行时间都是400ms(毫秒),但是你可以改变这个设置。

jQuery 3.0,其支持了现代浏览器:

$('h1').fadeIn(300); // 300毫秒内淡入 
$('h1').fadeOut('slow'); //缓慢地淡出

jQuery Compat 3.0,其包含了对 IE8 的支持:

在特效结束后,可以指定执行某个函数。

也可以从 npm 中获取:

$('p').fadeOut(300, function(){$(this).remove(); });

npm install jquery@3.0.0-alpha1
npm install jquery-compat@3.0.0-alpha1

更复杂的特效,可以用.animate()自定义。

您可能感兴趣的文章:

  • jQuery正则表达式的使用方法步骤详解
  • 浅谈jQuery animate
    easing的具体使用方法(推荐)
  • jQuery animate
    easing使用方法图文详解
  • jQuery控制文本框只能输入数字和字母及使用方法
  • jQuery验证插件validate使用方法详解
  • jQueryUI中的datepicker使用方法详解
  • jquery插件Jplayer使用方法简析
  • jquery分页插件jquery.pagination.js使用方法解析
  • JQuery日期插件datepicker的使用方法
  • jQuery使用方法
$('div').animate( 
{ 
left : "+=50",//不断右移 
opacity : 0.25 //指定透明度 
},
300,// 持续时间 
function(){ alert('done!'); }//回调函数

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

您可能感兴趣的文章:

  • jQuery正则表达式的使用方法步骤详解
  • 浅谈jQuery animate
    easing的具体使用方法(推荐)
  • jQuery animate
    easing使用方法图文详解
  • jQuery控制文本框只能输入数字和字母及使用方法
  • jQuery验证插件validate使用方法详解
  • jQueryUI中的datepicker使用方法详解
  • jquery插件Jplayer使用方法简析
  • jquery分页插件jquery.pagination.js使用方法解析
  • JQuery日期插件datepicker的使用方法
  • jQuery 3.0
    的变化及使用方法

相关文章