首页技术jquery官方文档 jquery被什么替代了

jquery官方文档 jquery被什么替代了

编程之家2026-06-271074次浏览

大家好,关于jquery官方文档很多朋友都还不太明白,今天小编就来为大家分享关于jquery被什么替代了的知识,希望对各位有所帮助!

jquery官方文档 jquery被什么替代了

jquery主要是做什么的

JQuery是继prototype之后又一个优秀的Java库。它是轻量级的js库,它兼容CSS3,还兼容各种浏览器(IE6.0+, FF1.5+, Safari2.0+, Opera9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。

jQuery是当前很流行的一个Java框架,使用类似于CSS的选择器,可以方便的操作HTML元素,拥有很好的可扩展性,拥有不少插件。

jQuery可以快速找到文档中的html元素,并对其进行操作,如隐藏、显示、改变样式、添加内容等。能够方便的在页面上添加和移除html元素。这些功能虽然使用Java也能实现,但是jQuery绝对使这些工作变得更加简单。

jQuery版本升级有哪些注意事项

1.使用了被废弃的jQuery.fn.live方法

jQuery Migrate库对此错误也在控制台有相应的警告:

JQMIGRATE: jQuery.fn.live() is deprecated

jquery官方文档 jquery被什么替代了

live方法原本的作用是设置事件代理,该方法在jQuery 1.7之后就不推荐使用了,取代之的是jQuery.fn.on函数。他们的接口分别是:

$(selector).live('click', function(){/* some code*/});$(selector).on('click', [selector,] function(){/* some code*/});

乍一看,中括号里面的参数可以省略掉,俩函数不是一模一样么?于是天真地把函数名live直接替换成on,大部分时候,这么做好像没有引起任何异常。但是如果在你调用on函数的时候,前面的$(selector)在当前的网页上根本不匹配任何元素(该元素可能是后面的代码才加到DOM里的),那是不会绑定成功的。事实上,live函数将$(selector)代理到了document元素上,这个元素是肯定存在的,所以不会出现类似情况。正确的替换方法应该是:

$(selector).live('click', function(){/* some code*/});替换为$(document).on('click', selector, function(){/* some code*/});

2.使用了被废弃的jQuery.fn.die方法

jQuery Migrate对此错误的警告是:

jquery官方文档 jquery被什么替代了

JQMIGRATE: jQuery.fn.die() is deprecated

这个方法和前面的live刚好反过来,取消事件处理函数的绑定。新版本中应该使用off函数代替之,替换方式类似。

3.使用了被废弃的jQuery.fn.toggle函数

jQuery Migrate对此错误的警告是:

JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated

早期jQuery中名字叫toggle的函数有两个,一个是用于控制元素的显示和隐藏,这个用途的函数目前jQuery中依旧存在;另一个就是上面提到的被废弃的toggle函数,它用于绑定至少两个函数到同一个元素,点击该元素的时候两个函数交替着执行。这两个同名函数功能相差甚远,为了不引起误导,在jQuery

1.8中就不再建议使用了。替换的方式是把两个函数合并成一个函数的if-else两个区段,然后自己设置一个boolean变量,控制每次点击时应该执行哪个区段即可。

4.使用了被废弃的jQuery.browser属性

jQuery Migrate对此错误的警告是:

JQMIGRATE: jQuery.browser is deprecated

在前端开发中我们经常要根据不同的浏览器版本做出不同的处理,jQuery.browser本来是通过浏览器的userAgent字段来提取浏览器相关信息的。新版本中已经将其废弃,而是建议使用特征检测的方法去判断,并且给了一个Modernizr库作为推荐。不过,改成这个库可能改动成本有点大,如果你还是想沿用jQuery.browser的思路的话,可以自己去实现一下它。例如,判断是不是IE浏览器,可以用

/msie/.test(navigator.userAgent.toLowerCase());

即自己手动获取userAgent字段,并且做一个正则表达式匹配。其他浏览器思路类似,都是对navigator.userAgent做一个正则匹配。

5.$(html)格式书写错误

在jQuery Migrate中,出现以下三种警告中的任何一种,都是属于这个错误:

JQMIGRATE:$(html) HTML strings must start with'<' characterJQMIGRATE:$(html) HTML text after last tag is ignoredJQMIGRATE: HTML string cannot start with a'#' character

这个错误还是蛮值得注意的,因为我们文章开头所说的jQuery低版本有XSS漏洞,其实就是和这个错误有关系。在javascript中我们经常会直接将一段html格式的字符串写在jQuery引用里面,比如$('<p></p>')。按照新版本的jQuery要求,这段html格式的字符串必须是以左尖括号(小于号)开头,其他字符都不可以。以下几种写法,都是错误的:

$("<p></p>");//错误,字符串最开头有一个空格,不是以小于号'<'开头的$("<p></p>test");//不标准,html标签结束后后面还有多余的"test",它会被忽略$("#<p></p>);//错误,以井号开头并且后面并不是一个css选择器

这一点在书写的时候注意一下就可以了,其实还是很容易避免的。其中第三种错误其实就不仅仅是警告了,jQuery会直接抛出一个错误,停止javascript代码的继续执行。一般情况以井号开头,例如$("#test"),其实就是一个普通的选择器,但是上面例子中后面又夹杂着html字符串,这会被jQuery判断为潜在的XSS攻击。

6. jQuery.fn.attr方法的错误使用(这是个非常易犯的错误!)

jQuery Migrate中,关于attr方法的警告有以下这些:

JQMIGRATE: jQuery.fn.attr('value', val) no longer sets propertiesJQMIGRATE: jQuery.fn.attr('value') no longer gets propertiesJQMIGRATE: jQuery.fn.attr('checked') may use property instead of attributeJQMIGRATE: jQuery.fn.attr( props, pass) is deprecated

实践中我发现,早期写的代码里面,获取一个input输入表单的值时,是怎么获取的呢?$('input').attr('value');又是怎么设置的呢?$('input').attr('value',

'helloworld')。这在新版本中都是不正确的!正确的做法应该是

$('input').val();//获取input表单现在所输入的值

$('input').val('helloworld');//设置input表单输入的值

到底是获取还是设置,只取决于调用val方法时有没有带着参数。

如果你想手动设置单选框(例如<input

type="radio">)被选中,应该怎么设置呢?老的代码里面可能会看到这样$('input').attr('checked',

true)或者$('input').attr('checked','checked')。这些现在也都是不正确的!正确的做法应该是

$('input').prop('checked', true);//把单选框设为选中状态$('input').prop('checked');//获取单选框是不是被选中了,返回true或false

这是从jQuery

1.6版本开始使用的写法。如果设置disabled和selected属性,也是使用prop方法。那到底什么时候使用attr方法呢?两者的区别是:prop设置的是某元素固有的属性,而attr设置的是写在html标签上的自定义属性。举个例子:

<input type="checkbox" checked="checked" haha="hello">var v1=$('input').prop("checked");//返回true/false,是否被选中,随状态改变而改变var v2=$('input').attr("checked");//返回"checked",这是你设置在标签上的,不会变var v3=$('input').attr("haha");//返回"hello",自定义属性var v4=$('input').prop("haha");//返回undefined,根本没有这个固有属性

上面提到的第四个错误,jQuery.fn.attr(props, pass) is deprecated这个警告在真实项目中从未见到过,看了一下源码,触发该警告的jQuery写法很少见,可忽略。

7.向$.parseJSON传入了非法的参数

在jQuery Migrate中,该错误产生如下警告

JQMIGRATE: jQuery.parseJSON requires a valid JSON string

jQuery之所以改这个接口,是为了和浏览器自带的JSON.parse接口对齐,从jQuery

1.9开始生效。这个问题常见于AJAX接收服务端返回值的时候。服务端可能返回一个空字符串,这时候调用该接口会产生错误。必须向$.parseJSON传入合法的JSON字符串。修正方法如下:

var v1=$.parseJSON(str);替换为var v1=$.parseJSON( str? str:"null");

8.使用了被废弃的'hover'事件字符串

在jQuery Migrate中该错误产生如下警告

JQMIGRATE:'hover' pseudo-event is deprecated, use'mouseenter mouseleave'

在注册事件处理函数时,'hover'以前可以看作是'mouseenter mouseleave'两个事件的别称。目前已经将该别称去掉了,所以代码中请用'mouseenter mouseleave'替换之。

9. jQuery.fn.andSelf已经被替换,不能再使用

jQuery Migrate中是这样的警告:

JQMIGRATE: jQuery.fn.andSelf() replaced by jQuery.fn.addBack()

两个函数功能是完全一样的,可以直接替换。

1. jQuery不兼容浏览器的怪异模式

这个错误的触发方式非常简单,直接把html页面最顶端的<!DOCTYPE

html>标签删掉就可以了。浏览器怪异模式是为了兼容老古董网页而设计的,详情可参考这篇文章:链接。我想现在的WEB程序员应该不会傻到不写DOCTYPE,也很少使用这种模式下的浏览器吧。

jQuery Migrate展示的错误警告如下:

2. AJAX全局事件必须绑定到document节点上

jQuery Migrate中的警告如下:

JQMIGRATE: AJAX events should be attached to document: ajaxStart

jQuery中AJAX全局事件包括如下接口ajaxStart,

ajaxStop, ajaxSend, ajaxComplete, ajaxError,

ajaxSuccess。因为这些事件使用的比较少,所以也归在少见坑当中。从jQuery

1.9开始,这些事件只能绑定到$(document)上。改正方法如下(摘自jQuery官网):

$("#status").ajaxStart(function(){$(this).text("Ajax started");});修改为$(document).ajaxStart(function(){$("#status").text("Ajax started");});

3. IE6/7/8浏览器不支持修改input表单的type属性

在jQuery Migrate中是这样的警告:

JQMIGRATE: Can't change the'type' of an input or button in IE 6/7/8

改变input的表单的type属性,你可以直接把文本框改成单选框,改成多选框等等。虽然我感觉这是一种并不算优雅的行为,但是很多浏览器都是支持这么做的,除了IE6/7/8。建议在实际中也是少用这个功能为好。

4.使用了被移除的$.clean,$.event.handle,$.attrFn,$.fn.data('events'), jQuery.event.trigger属性与方法

在jQuery Migrate中是这样的警告:

JQMIGRATE: jQuery.clean() is deprecatedJQMIGRATE: jQuery.event.handle is undocumented and deprecatedJQMIGRATE: jQuery.attrFn is deprecatedJQMIGRATE: Use of jQuery.fn.data('events') is deprecatedJQMIGRATE: Global events are undocumented and deprecated

如果你在自己的代码中使用过这五个接口,那确实是仔细研究过jQuery源代码的高人啊。因为这五个接口从来没有出现在jQuery的官方文档中,并且有些在后续版本中已经删除,可谓来无影去无踪。看源代码的话在早期版本有机会找到他们的存在,但是并不建议使用。建议采用其他方法实现相应的功能。什么?你不知道这五个函数是什么功能?那最好了,你现在也不需要知道了……

5.使用了过时的$.sub()方法

jQuery Migrate中对本问题的警告如下:

JQMIGRATE: jQuery.sub() is deprecated

这个接口非常简单,不接受任何参数。它用来创建一个jQuery的副本。该方法在jQuery 1.7版本开始就已经不再使用。

6.使用了过时的jQuery.fn.error方法

jQuery Migrate中对本问题的警告如下:

JQMIGRATE: jQuery.fn.error() is deprecated

在jQuery中,error也是和click一样的事件。注册该事件的处理函数,以前是$(selector).error(function(){}),现在已经被废弃,可以使用$(selector).on('error', function(){})来替代。

即将发布的jQuery3有哪些新特性_jquery

jQuery的横空出世,至今已有十个年头了,而它的长盛不衰显然不是没有理由的。jQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

在未来的几周内,jQuery就将抵达一个重要的里程碑——正式发布 3.0版本。jQuery 3修复了大量的 bug,增加了新的方法,同时移除了一些接口,并修改了少量接口的行为。在这篇文章中,我将为大家重点讲解 jQuery 3所引入的那些最重要的变化。

新增特性

我们先来讨论 jQuery 3中最重要的几个新增特性。

for...of循环

在 jQuery 3中,我们可以用 for...of循环语句来迭代一个 jQuery集合中的所有 DOM元素。这种新的迭代方法是 ECMAScript 2015(即 ES6)规范中的一部分。这个方法可以对“可迭代对象”(比如 Array、Map、Set等)进行循环。

当使用这种新的迭代方法时,你在循环体内每次拿到的值并不是一个 jQuery对象,而是一个 DOM元素(译注:这一点跟.each()方法类似)。当你在对一个 jQuery集合进行操作时,这个新的迭代方法可以少许改善你的代码。

为了搞清楚这种迭代方法到底是怎么工作的,我们来假设一个场景——你需要给页面中的每个 input元素分配一个 ID。在 jQuery 3之前,你可能会这样写:

代码如下:var$inputs=$('input');for(var i= 0; i$inputs[i].id='input-'+ i;

}

而在 jQuery 3中,你就可以这样写了:

代码如下:var$inputs=$('input');var i= 0;

for(var input of$inputs){

input.id='input-'+ i++;

}

(译注:其实 jQuery自己是有个.each()方法的,可读性也不赖。)

$.get()和$.post()函数的新签名

jQuery 3为$.get()和$.post()这两个工具函数增加了新签名,从而使得它们和$.ajax()的接口风格保持一致。新签名是这样的:

代码如下:$.get([settings])

$.post([settings])

settings是一个对象,它包含多个属性。它的格式和你以前传给$.ajax()的参数格式是一样的。如果你想更清楚地了解这个参数对象,请参考$.ajax()页面中的相关描述。

$.get()和$.post()的参数对象与传给$.ajax()的参数相比,唯一的区别就是前者的 method属性总是会被忽略。原因其实也很简单,$.get()和$.post()本身就已经预设了发起 Ajax请求的 HTTP方法了(显然$.get()就是 GET,而$.post()就是 POST)。也就是说,正常人类应该是不会想用$.get()方法来发送一个 POST请求的。

假设有以下一段代码:

代码如下:$.get({

url:'',

method:'POST'// This property is ignored

//这个属性将被忽略});

不管我们把 method属性写成什么,这个请求总是会以 GET的方式发出去的。

采用 requestAnimationFrame()来实现动画

所有现代浏览器(包括 IE10及以上)都是支持 requestAnimationFrame的。jQuery 3将会在内部采用这个 API来实现动画,以便达到更流畅、更省资源的动画效果。

unwrap()方法

jQuery 3为 unwrap()方法增加了一个可选的 selector参数。这个方法的新签名是这样的:

代码如下:unwrap([selector])

有了这个特性,你就可以给这个方法传入一个包含选择符表达式的字符串,用它来在父元素内进行匹配。如果存在匹配的子元素,则这个子元素的父层将被解除;如果没有匹配,则不进行操作。

有变更的特性

jQuery 3还修改了一些特性的行为。

:visible和:hidden

jQuery 3将会修改:visible和:hidden过滤器的含义。只要元素具有任何布局盒,哪怕宽高为零,也会被认为是:visible。举个例子,br元素和不包含内容的行内元素现在都会被:visible这个过滤器选中。

因此,如果你的页面中包含如下的结构:

代码如下:

然后运行以下语句:

代码如下:console.log($('body:visible').length);

在 jQuery 1.x和 2.x中,你得到的结果会是 0;但在 jQuery 3中,你会得到 2。

data()方法

另一个重要的变化是跟 data()方法有关的。现在它的行为已经变得跟 Dataset API规范一致了。jQuery 3将会把所有属性键名转换成驼峰形式。我们来详细看一下,以如下元素为例:

代码如下:

当我们在用 jQuery 3以前的版本时,如果运行如下代码:

代码如下:var$elem=$('#container');

$elem.data({'my-property':'hello'});console.log($elem.data());

将会在控制台得到如下结果:

代码如下:{my-property:"hello"}

而在 jQuery 3中,我们将会得到如下结果:

代码如下:{myProperty:"hello"}

请注意,在 jQuery 3中,属性名已经变成了驼峰形式,横杠已经被去除了;而在以前的版本中,属性名会保持全小写,并原样保留横杠。

Deferred对象

jQuery 3还改变了 Deferred对象的行为。Deferred对象可以说是 Promise对象的前身之一,它实现了对 Promise/A+协议的兼容。这个对象以及它的历史都相当有意思。如果想要深入了解,你可以去阅读 jQuery官方文档,也可以去看我写的书《jQuery实战(第三版)》——这本书也涵盖了 jQuery 3。

在 jQuery 1.x和 2.x中,传给 Deferred的回调函数内如果出现未捕获的异常,会立即中断程序的执行(译注:即静默失败,其实 jQuery绝大多数回调函数的行为都是这样的)。而原生的 Promise对象并非如此,它会抛出异常,并不断向上冒泡,直至到达 window.onerror(通常冒泡的终点是这里)。如果你没有定义一个函数来处理这个错误事件的话(通常我们都不会这么做),那这个异常的信息将会被显示出来,此时程序的执行才会停止。

jQuery 3将会遵循原生 Promise对象的模式。因此,回调内产生的异常将会导致失败状态(rejection),并触发失败回调。一旦失败回调执行完毕,整个进程就将继续推进,后续的成功回调将被执行。

为了让你更好地理解这个差异,让我们来看一个小例子。比如我们有如下代码:

代码如下:var deferred=$.Deferred();

deferred

.then(function(){ throw new Error('An error');

})

.then( function(){ console.log('Success 1');

}, function(){ console.log('Failure 1');

}

)

.then( function(){ console.log('Success 2');

}, function(){ console.log('Failure 2');

}

);

deferred.resolve();

在 jQuery 1.x和 2.x中,只有第一个函数(也就是抛出错误的那个函数)会被执行到。此外,由于我们没有为 window.onerror定义任何事件处理函数,控制台将会输出“Uncaught Error: An error”,而且程序的执行将中止。

而在 jQuery 3中,整个行为是完全不同的。你将在控制台中看到“Failure 1”和“Success 2”两条消息。那个异常将会被第一个失败回调处理,并且,一旦异常得到处理,那么后续的成功回调将被调用。

SVG文档

没有哪一个 jQuery版本(包括 jQuery 3)曾官方宣称支持 SVG文档。不过事实上有很多方法是可以奏效的,此外还有一些方法在以前是不行的(比如操作类名的那些方法),但它们在 jQuery 3中也得到了更新。因此,在 jQuery 3中,你应该可以放心使用诸如 addClass()和 hasClass()这样的方法来操作 SVG文档了。

已废弃、已移除的方法和属性

在增加了上述改进的同时,jQuery也移除、废弃了一些特性。

废弃 bind()、unbind()、delegate()和 undelegate()方法

jQuery在很久以前就引入了 on()方法,它提供了一个统一的接口,用以取代 bind()、delegate()和 live()等方法。与此同时,jQuery还引入了 off()这个方法来取代 unbind()、undelegated()和 die()等方法。从那时起,bind()、delegate()、unbind()和 undelegate()就已经不再推荐使用了,但它们还是一直存在着。

jQuery 3终于开始将这些方法标记为“废弃”了,并计划在未来的某个版本(很可能是 jQuery 4)中将它们彻底移除。因此,请在你的项目中统一使用 on()和 off()方法,这样你就不用担心未来版本的变更了。

移除 load()、unload()和 error()方法

jQuery 3彻底抛弃了 load()、unload()和 error()等已经标记为废弃的方法。这些方法在很早以前(从 jQuery 1.8开始)就已经被标记为废弃了,但一直没有去掉。如果你正在使用的某款插件仍然依赖这些方法,那么升级到 jQuery 3会把你的代码搞挂。因此,在升级过程中请务必留意。

移除 context、support和 selector属性

jQuery 3彻底抛弃了 context、support和 selector等已经标记为废弃的属性。同上,在升级到 jQuery 3时,请留意你正使用的插件。

已修复的 Bug

jQuery 3修复了以往版本中的一些非常重要的 bug。在本节中,我将着重介绍其中两处,因为这两者应该会对你写代码的习惯带来显著影响。

width()和 height()的返回值将不再取整

jQuery 3修复了 width()、height()和其它相关方法的一个 bug。这些方法的返回值将不再舍入取整,因为这种取整行为在某些情况下不便于对元素进行定位。

我们来详细看一看。假设你一个宽度为 100px的容器元素,它包含了三个子元素,宽度均为三分之一(即 33.333333%):

代码如下:

My name

is

Aurelio De Rosa

在 jQuery 3以前的版本中,如果你尝试通过以下代码来获取子元素的宽度??

代码如下:$('.container div').width();

??那么你得到结果将是 33。原因在于 jQuery会把 33.33333这个值取整。而在 jQuery 3中,这个 bug已经被修复了,因此你将会得到更加精确的结果(即一个浮点数)。

wrapAll()方法

jQuery 3还修复了 wrapAll()方法中的一个 bug,这个 bug出现在把一个函数作为参数传给它的情况下。在 jQuery 3以前的版本中,当一个函数被传给 wrapAll()方法时,它会把 jQuery集合中的每个元素单独包裹起来。换句话说,这种行为和把一个函数传给 wrap()时的行为是完全一样的。

在修复这个问题的同时,还引入了另外一个变更:由于在 jQuery 3中,这个函数只会调用一次了,那就无法把 jQuery集合中每个元素都传给它。因此,这个函数的执行上下文(this)将只能指向当前 jQuery集合中的第一个元素。

如何下载 jQuery 3 beta 1

既然你已经读到了这里,那说明你很可能想试试 jQuery 3的第一个 beta测试版。你可以通过以下两个地址来获取这个版本:

未压缩版:

压缩版:

当然,你还可以通过 npm来下载:

[code]npm install jquery@3.0.0-beta1[/code]

结论

很多人一直在唱衰 jQuery,说它在现代网页开发中已经没有一席之地了。但不管怎样,jQuery的开发仍在继续,客观的统计数据(在排名前一百万名的网站中占有率高达 78.5%)也让这些论调不攻自破。

在本文中,我已经带你了解了一遍 jQuery 3将会带来的一些重大变化。或许你已经察觉到了,这个版本并不太可能搞挂你的既有项目,因为它引入的破坏性变更其实寥寥无几。不过,在升级到 jQuery 3的过程中,你还是有必要牢记一些关键点,比如 Deferred对象的改进等等。同样,在升级某个第三方库时,也有必要检查一下该项目的兼容性情况,以便尽早发现任何非预期行为,避免某些功能失效。

译注

除了本文所提及的变更之外,jQuery 3.0最大的变化就是彻底放弃对 IE8的支持。jQuery团队做出这个决定的原因在于,微软已经在今年年初宣布停止对 IE 8~10的支持。因此,jQuery在 3.0 alpha阶段所发布的 jQuery Compat项目也就没有继续存在的必要了。

不过,由于 IE8仍然是中国大陆最流行的浏览器之一,对国内的开发者来说,在短期(甚至中期)内还不得不停留在 jQuery 1.x版本。

好吧,最后还是说个好消息吧。为帮助用户平滑升级,此次 jQuery同样会为 3.0版本提供迁移插件(jQuery Migrate plugin)。在把 jQuery升级到 3.0之后同时运行这个插件,即可确保基于 jQuery 1.x或 2.x的既有业务代码正常运行;同时,它还将在控制台向你报告既有代码与 jQuery 3不兼容的地方。当你修复了这些不兼容问题之后,就可以安全地移除这个插件了。

jquery官方文档和jquery被什么替代了的问题分享结束啦,以上的文章解决了您的问题吗?欢迎您下次再来哦!

英雄联盟大发明家厉害吗 英雄联盟大师是什么水平迷你寒冰虎 迷你枪战免费下载