産生背景
2005年8月,John Resig提議改進Prototype的“Behaviour”庫,于是他在blog上發表了自己的想法,并用了3個例子做說明。n第一個例子是為元素注冊一個事件:
Behaviour.register({n '#example li': function(e){n e.onclick = function(){n this.parentNode.removeChild(this);n }n }n});
他認為應該改寫為:
$('#example li').bind('click',function(){n this.parentNode.removeChild(this);n});n
第二個例子是為不同的元素注冊不同的事件:
Behaviour.register({n 'b.someclass' : function(e){n e.onclick = function(){n alert(this.innerHTML);n }n },n '#someid u' : function(e){n e.onmouseover = function(){n this.innerHTML = "BLAH!";n }n }n});
他認為應該改寫為:
$('b.someclass').bind('click',function(){n alert(this.innerHTML);n});n$('#someid u').bind('mouseover',function(){n this.innerHTML = 'BLAH!';n});
第三個例子是為不斷變化的元素注冊不同的事件:
Behaviour.register({n '#foo ol li': function(a) {n a.title = "List Items!";n a.onclick = function(){ alert('Hello!'); };n },n '#foo ol li.tmp': function(a) {n a.style.color = 'white';n },n '#foo ol li.tmp .foo': function(a) {n a.style.background = 'red';n}n});
他認為應該改寫為:
$('#foo ol li')n .set('title','List Items!')n .bind('click',function(){ alert('Hello!'); })n .select('.tmp')n .style('color','white')n .select('.foo')n .style('background','red');
這些代碼也是jQuery語法的最初雛形。當時John的想法很簡單:他發現這種語法相對現有的JavaScript庫更為簡潔。但他沒想到的是,這篇文章一經發布就引起了業界的廣泛關注。于是John開始認真思考着這件事情(編寫語法更為簡潔的JavaScript程序庫),直到2006年1月14日,John正式宣布以jQuery的名稱發布自己的程序庫。
發展曆程
2006年8月,jQuery的第一個穩定版本,并且已經支持CSS選擇符、事件處理和AJAX交互。
2007年7月,jQuery 1.1.3版發布,這次小版本的變化包含了對jQuery選擇符引擎執行速度的顯著提升。從這個版本開始,jQuery的性能達到了Prototype、Mootools以及Dojo等同類JavaScript庫的水平。同年9月,jQuery 1.2版發布,它去掉了對XPath選擇符的支持,原因是相對于CSS語法它已經變得多餘了。這一版能夠對效果進行更為靈活的定制,而且借助新增的命名空間事件,也使插件開發變得更容易。同時,jQuery UI項目也開始啟動,這個新的套件是作為曾經流行但已過時的Interface插件的替代項目而發布的。jQuery UI中包含大量預定義好的部件(widget),以及一組用于構建高級元素(例如可拖放、拖拽、排序)的工具。
2008年5月,jQuery 1.2.6版發布,這版主要是将Brandon Aaron開發的流行的Dimensions。n插件的功能移植到了核心庫中,同時也修改了許多BUG,而且有不少的性能得到提高。因此,如果把你以前的jQuery版本升級到1.2.6,那麼你完全可以從你的代碼中排除Dimensions插件。
2009年1月,jQuery 1.3版發布,它使用了全新的選擇符引擎Sizzle,在各個浏覽器下全面超越其他同類型JavaScript框架的查詢速度,程序庫的性能也因此有了極大提升。這一版本的第2個變化就是提供live()方法,使用live()方法可以為當前及将來增加的元素綁定事件,在1.3版之前,如果要為将來增加的元素綁定事件,需要使用livequery插件,而在1.3版中,可以直接用live()方法。
2010年1月,也是jQuery的四周年生日,jQuery 1.4版發布,為了慶祝jQuery四周歲生日,jQuery團隊特别創建了jquery14.com站點,帶來了連續14天的新版本專題介紹。
2010年2月,jQuery 1.4.2版發布,它新增了有關事件委托的兩個方法:delegate()和undelegate()。delegate()用于替代1.3.2中的live()方法。這個方法比live()來的方便,而且也可以達到動态添加事件的作用。
2011年1月,jQuery 1.5版發布。
2011年5月,jQuery 1.6版發布。該版本重寫了Attribute模塊和大量的性能改進。
主要功能
1、精準簡單的選擇對象(dom):
以下為引用的内容:
$('#element');// 相當于document.getElementByI“element”)
$('.element');//Class
$('p');//html标簽
$(“form > input”);//子對象
$(“div,span,p.myClass”;//同時選擇多種對象
$(“tr:odd”).css(“background-color”, “#bbbbff”)。//表格的隔行背景
$(“:input”);//表單對象
$(“input[name='newsletter']”);//特定的表單對象
2、對象函數的應用簡單和不限制:
element.function(par);
$(”p.surprise”).addClass(”ohmy”).show(”slow”)...
3、對已選擇對象的操作(包括樣式):
以下為引用的内容:
$(“#element”).addClass(“selected”);//給對象添加樣式
$('#element').css({ “background-color”:“yellow”, “font-weight”:“bolder” });//改變對象樣式
$(“p”).attr({ src:“test.jpg”, alt: “Test Image”});//改變對象文本
$(“p”).find(“span”;//查找對象内部的對應元素
$(“p”).parent();//對象的父級元素
$(“p”).append(“Hello”);//給對象添加内容
3、支持aJax,支持文件格式:xml/html/script/json/jsonp
以下為引用的内容:$(“#feeds”),load(“feeds,html”),//相應區域導入靜态頁内容$(“#feeds”),load(“feeds.php”, {limit: 25}, function(){alert(“The last 25 entries in the feed have been loaded”);});//導入動态内容
4、對事件的支持:
以下為引用的内容:
$(“p”),hover(function () {$(this).addClass(“hilite”);//鼠标放上去時}, function () {$(this).removeClass(“hilite”);//移開鼠标 });//鼠标放上去和移開的不同效果(自動循環所有p對象)
5、動畫:
以下為引用的内容:
$(“p”),show(“slow”);//隐藏對象(慢速漸變)
$(“#go”),click(function(){
$(“#block”),animate({width:“90%”, height: “100%”。fontSize:“10em”}, 1000 );});//鼠标點擊後寬、高、字體的動态變化
6、擴展:
以下為引用的内容:
$.fn.background = function(bg){ return this.css('background', bg);};
$(#element).background(“red”);如果要為每一個jQuery對象添加一個函數,必須把該函數指派給 $.fn,同時這個函數必須要返回一個this(jQuery對象)
運行環境
從 jQuery 3.0 開始,支持以下浏覽器:n浏覽器:9+nChrome、Edge、Firefox、Safari:當前和當前 - 1n歌劇:當前nSafari 移動版 iOS:7+n安卓 4.0+njQuery 團隊的政策是隻更改對主要版本更新的浏覽器支持,因此此列表将适用于至少 jQuery 4 到來。
插件
Ajax
Animation and Effects
Browser Tweaks
Data
DOM
Drag-and-Drop
Events
Forms
Integration
JavaScript
jQuery Extensions
Layout
Media
Menus
Navigation
Tables
User Interface
Utilities
Widgets
Windows and Overlays
UI庫
基本的鼠标互動:拖拽(drag and dropping)、排序(sorting)、選擇(selecting)、縮放(resizing)
各種互動效果:手風琴式的折疊菜單(accordions)、日曆(date pickers)、對話框(dialogs)、滑動條(sliders)、表格排序(table sorters)、頁簽(tabs)、放大鏡效果(Magnifier)、陰影效果(shadow)
版本
jQuery 3.6.0 已經發布!在 jQuery 3.5.0 中,主要的變化是對 html prefilter的安全修複。此版本不包括安全修複,但确實有一些很好的錯誤修複和改進。以下是 jQuery 3.6.0 的亮點:n即使對于 JSONP 錯誤也返回 JSONn在以前的版本中,當 JSONP 請求響應錯誤時,通常響應仍然是一個可執行腳本。已更改默認行為以嘗試在這種情況下執行響應。遇到錯誤時仍會跳過普通腳本。n修複n一個值得強調的錯誤與将焦點重定向到焦點處理程序中的另一個元素有關。以在另一個焦點處理程序中觸發焦點處理程序的示例為例:n
elem1.on(“focus”,function(){n elem2.trigger("focus");n});
由于它們在 IE 之外的任何地方都是同步的,因此在 3.4.0 中添加的一個修複程序利用本地事件導緻本地.focus()方法最後調用初始元素,使其重新獲得焦點。雖然代碼繼續利用本機焦點和模糊事件,但我們能夠通過更多地與本機方法對齊并僅将最後一個焦點事件向上傳播到 DOM 樹來解決此問題。n其他錯誤修複和改進包括在 Firefox 中檢索表行上的維度的修複,修複了在已删除元素上觸發焦點事件時 Chrome 崩潰的修複,對一些測試的一些改進等等。



















