前端基礎之jQuery入門 01
阿新 • • 發佈:2018-01-02
隔行變色 三方 sel () 層級選擇器 aps not 切換 jquer
jQuery介紹
- jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。
- jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互,能夠極大地簡化JavaScript編程。它的宗旨就是:"Write less, do more."
優勢
- 一款輕量級的JS框架。jQuery核心js文件才幾十kb,不會影響頁面加載速度。
- 豐富的DOM選擇器,jQuery的選擇器用起來很方便,比如要找到某個DOM對象的相鄰元素,JS可能要寫好幾行代碼,而jQuery一行代碼就搞定了,再比如要將一個表格的隔行變色,jQuery也是一行代碼搞定。
- 鏈式表達式。jQuery的鏈式操作可以把多個操作寫在一行代碼裏,更加簡潔。
- 事件、樣式、動畫支持。jQuery還簡化了js操作css的代碼,並且代碼的可讀性也比js要強。
- Ajax操作支持。jQuery簡化了AJAX操作,後端只需返回一個JSON格式的字符串就能完成與前端的通信。
- 跨瀏覽器兼容。jQuery基本兼容了現在主流的瀏覽器,不用再為瀏覽器的兼容問題而傷透腦筋。
- 插件擴展開發。jQuery有著豐富的第三方的插件,例如:樹形菜單、日期控件、圖片切換插件、彈出窗口等等基本前端頁面上的組件都有對應插件,並且用jQuery插件做出來的效果很炫,並且可以根據自己需要去改寫和封裝插件,簡單實用。4
選擇
- 1.x:兼容IE678,使用最為廣泛的,官方只做BUG維護,功能不再新增。因此一般項目來說,使用1.x版本就可以了,最終版本:1.12.4 (2016年5月20日)
- 2.x:不兼容IE678,很少有人使用,官方只做BUG維護,功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x,最終版本:2.2.4 (2016年5月20日)
- 3.x:不兼容IE678,只支持最新的瀏覽器。需要註意的是很多老的jQuery插件不支持3.x版。目前該版本是官方主要更新維護的版本。
維護IE678是一件讓人頭疼的事情,一般我們都會額外加載一個CSS和JS單獨處理。值得慶幸的是使用這些瀏覽器的人也逐步減少,PC端用戶已經逐步被移動端用戶所取代,如果沒有特殊要求的話,一般都會選擇放棄對678的支持。
jQuery對象
jQuery對象就是通過jQuery包裝DOM對象後產生的對象。jQuery對象是 jQuery獨有的。如果一個對象是 jQuery對象,那麽它就可以使用jQuery裏的方法:例如$(“#i1”).html()。
$("#i1").html()
的意思是:獲取id值為i1
的元素的html代碼。其中html()
是jQuery裏的方法。
相當於:document.getElementById("i1").innerHTML;
雖然jQuery對象
是包裝DOM對象
後產生的,但是jQuery對象
無法使用DOM對象
的任何方法,同理DOM對象
也沒不能使用jQuery
裏的方法。
一個約定,我們在聲明一個jQuery對象變量的時候在變量名前面加上$:
var $variable = jQuery對像 var variable = DOM對象 $variable[0] //jQuery對象轉成DOM對象View Code
拿上面那個例子舉例,jQuery對象和DOM對象的使用:
$("#i1").html(); //jQuery對象可以使用jQuery的方法 $("#i1")[0].innerHTML; // DOM對象使用DOM的方法
jQuery語法
基本語法如下:
$(selector).action()
有如下一個約定,我們在聲明一個jQuery對象變量時候,在變量名前加上$符號,如下實例:
var $variable=jQuery對象 var variable = DOM對象 $variable[0] //jQuery對象轉成DOM對象
選擇器
1、基本選擇器
id選擇器: $("#id值") class選擇器: $(".c1") 所有元素選擇器: $("*") 標簽名選擇器: $("div") 組合選擇器: $("#i1, p")
2、層級選擇器
下述中x和y可以是任意選擇器:
後代選擇器: $("x 空格 y")---x的所有後代y(子子孫孫) 兒子選擇器: $("x > y")---x的所有兒子y(兒子) 毗鄰選擇器: $("x +y")---找到所有緊挨在x後面的y 兄弟選擇器: $("x ~y")---x之後所有的兄弟y
3、屬性選擇器
註意:雙引號裏面用單引號
[attribute] //具有屬性 [attribute=value] // 屬性等於 [attribute!=value] // 屬性不等 實例: $("input[type=‘checkbox‘]"); // 取到checkbox類型的input標簽 $("input[type!=‘text‘]"); // 取到類型不是text的input標簽
4、基本篩選器
下述基本篩選器主要用在選擇器內對選擇器做進一步篩選,介紹如下:
:first // 第一個 :eq(index) // 索引等於index的那個元素 :last // 最後一個 :even // 匹配所有索引值為偶數的元素,從 0 開始計數 :odd // 匹配所有索引值為奇數的元素,從 0 開始計數 :gt(index) // 匹配所有大於給定索引值的元素 :lt(index) // 匹配所有小於給定索引值的元素 :not(選擇器) // 去除所有與給定選擇器匹配的元素 :has(選擇器) // 匹配含有選擇器所匹配的元素的元素
前端基礎之jQuery入門 01