jQuery

• jQuery入門

1. javascript類庫

JavaScript 庫封裝了很多預定義的物件和實用函式。能幫助使用者建立有高難度互動客戶端頁面, 並且相容各大瀏覽器。

核心理念是write less,do more(寫得更少,做得更多)

當前流行的 JavaScript 庫有：

jQuery  使用非常多了

EXTJS 功能比jQuery更多，但ext2.0收費

Prototype 一般用於做框架

YUI! (Yahoo! User Interface)

Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷

 

1. jQuery介紹

 

• ljQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫 ，它相容CSS3，還相容各種瀏覽器。
• ljQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。由美國人John Resig在2006年1月釋出
• ljQuery是免費、開源的
• ljQuery分類：

WEB版本：我們主要學習研究  （jQuery-版本.js  、 jQuery-版本-min.js）

UI版本：集成了UI元件

mobile版本：針對移動端開發

qunit版本：用於js測試的

 

jquery官網  http://jquery.com/

 

我們接觸到的版本

 

 

1. 匯入jQuery

通過script標籤的src屬性匯入即可

 

• jQuery基本操作

1. 獲得jQuery物件

語法：$(選擇器或者DOM物件)   或   jQuery(選擇器或者DOM物件)

 $  ==  jQuery

< script type="text/javascript"> // $() 語法，建議：如果是jQuery物件變數名使用$作為字首 var  $obj = $("#username");   // val() 函式 獲得 value屬性的值 alert($obj.val()); </script>

1. DOM物件和jQuery物件之間的轉換

注意:jQuery物件使用jquery的api（方法、函式）。DOM物件使用 dom 的函式、屬性等。不能混淆使用。

<script type="text/javascript" > //1將dom物件 轉換 jquery物件          //先獲得dom物件 var obj = document.getElementById("username"); //alert(obj.value);         //轉換成jquery物件 var $obj  = $(obj); //獲得value的值 //alert($obj.val());   //2jquery 物件 轉換 dom 物件         //先通過 $(...) 獲得jQuery物件，底層使用陣列進行維護的，可以存放多個物件。     //然後通過get()可以從jquery物件轉換成 dom物件。引數：陣列的下標，可以省略。如果省略下標獲得dom 陣列。   var obj2 = $obj.get(0); //alert(obj2.value);   // 底層是陣列，也可以直接通過下標獲得dom物件 alert($obj[0].value); </script>

 

• 選擇器

基本,層次,基本過濾,內容過濾,可見性過濾,屬性,子元素過濾,表單過濾,表單物件屬性過濾

1. 基本

• lid選擇器，<標籤  id="id值">

語法：$("#id值")

• l元素(標籤)選擇器  <標籤>

語法：$("標籤")

• l類（class）選擇器  <標籤  class="class名稱">

語法：$(".class名稱")

• l所有

語法：$("*")

• l多選擇

語法：$("選擇器1，選擇器2，....")

1. 層次

• l所有子孫元素

語法：$("A  B")  --> A標籤中 所有的B標籤

• l所有孩子元素

語法：$("A > B")  --> A標籤中 所有的子標籤中B標籤。

• l後面第一個兄弟

語法：$("A + B")  --> A標籤後面的第一個兄弟

• l後面的所有兄弟

語法：$("A ~ B")  --> A標籤後面的所有兄弟

1. 基本過濾

：first 獲得第一個

：last 獲得最後一個

：not(選擇器) 過濾不需要內容

：even 所有偶數，從0開始

：odd 所有奇數

：eq(索引值) 指定下標

：gt(索引值) 大於

：lt(索引值) 小於

：header 所有<h1> ...<h6>

：animated 動畫

：focus 焦點

1. 內容過濾

：contains(text) 是否包含指定的內容

：empty 是否為空，不包含子元素、不包含文字

：has（選擇器），當前元素，是否還有指定的孩子。

：parent 不為空，（有子節點的元素）

 

1. 可見性過濾

：hidden 所有隱藏的(存在瀏覽器相容問題)

：visible 所有可見的

 

1. 屬性

[attribute]   有此屬性的元素

[attribute=value] 有屬性值為value的元素

[attribute!=value] 屬性值不等於value的元素

[attribute^=value] 屬性值以value開頭的元素

[attribute$=value] 屬性值以value結尾的元素

[attribute*=value] 屬性值含value的元素

[屬性表示式1] [屬性表示式2]... 複合屬性選擇器 需要同時滿足多個條件時使用

 

1. 子元素過濾

：nth-child() 指定孩子 ，從1開始。

：first-child 第一個孩子

：last-child 最後一個孩子

：only-child 自己是唯一的孩子

 

1. 表單過濾

：input 表示所有的表單元素（input, textarea, select 和 button）

：text 文字 <input type="text">

：password 密碼 <input type="password">

：radio 單選 <input type="radio">

：checkbox 複選框

：submit 提交

：image 按鈕，可以顯示圖片

：reset 重置

：button 按鈕  <input type="button"> 或 <button>

：file 檔案上傳

：hidden  <input type="hidden" > <div style="display:none;"> <br/>(存在瀏覽器相容問題)

 

1. 表單物件屬性過濾

：enabled 可以使用

：disabled 不可使用

：checked 選中的元素(單選框和多選框)

：selected 選中的元素(下拉選)

 

• 屬性和樣式

屬性,類class,html程式碼/文字/值,css,位置,尺寸

1. 屬性

attr(name)  通過屬性名獲得屬性值。<標籤  屬性名=“屬性值”>

attr(key,val)  給指定的屬性設定值。（設定一個）

attr(pro)  給jQuery物件設定一組值。使用JSON格式。

{key:value , key : value , .....}  key必須使用雙引號，value如果字串也必須使用雙引號。

使用單引號，屬於畸形格式json

removeAttr(name) 將執行屬性移除

 

1. 類class

操作的是標籤的class屬性 <標籤  class="class名稱">

 

addClass(class名稱) 追加一個class值

removeClass(class) class移除

toggleClass(class) 新增和移除切換。如果沒有就新增，如果有就移除。

 

1. html程式碼/文字/值

操作的是標籤的value屬性或者標籤體

 

val()  獲得 value屬性的值。<標籤  value="">

val(值) 設定值

 

html()  獲得標籤體內容，以標籤方式

html(值) 設定內容

 

text()  獲得標籤體內容，以文字方式

text(值) 以文字方式設定內容

 

1. css

操作的是標籤的樣式 <標籤  style="k:v; k:v ; ....">

 

css(name) 獲得樣式

css(name,value) 設定樣式

css(pro)  使用json設定一組樣式

1. 位置

offset() 獲得位置，返回json資料。格式：{"top": xx , "left" : yy}

 

offset(座標) 設定位置

position()  獲得相對父元素偏移

scrollTop([val]) 獲得 或  設定 垂直滾動條的位置

scrollLeft([val])  獲得 或 設定 水平滾動條的位置

 

1. 尺寸

height([val]) 獲得 或 設定 高度

width([val]) 獲得 或 設定 寬度

• 文件處理

內部插入,外部插入,複製,替換,刪除,包裹

1. 內部插入

A.append(B)  ，將B插入到A內部的後面。（追加到後面）

A.prepend(B) ，將B插入到A內部的前面。（追加到前面)

 

A.appendTo(B) , 將A插入到B內部的後面。（追加到後面）

A.prependTo(B) 將A插入到B內部的前面。（追加到前面）

 

1. 外部插入

A.after(B)，將B插入到A後面

A.before(B) ，將B插入到A前面

 

A.insertBefore(B) ，將A插入到B前面

A.insertAfter(B) ，將A插入到B後面

 

1. 複製

clone(event [,deepEven])

引數1：表示是否克隆事件

引數2：子元素中繫結資料是否被克隆。

1. 替換

A.replaceWith(B)  使用B替換掉A

A.replaceAll(B)  使用A替換掉所有的B

1. 刪除

empty() 清空標籤體內容，刪除所有子元素

remove() 將指定物件移除，返回值為移除物件。但此物件將繫結事件，繫結資料都一併移除。

detach()將指定物件移除，返回值為移除物件。但此物件保留 繫結事件，繫結資料 等。

 

1. 包裹

wrap(...) ： 每一個匹配元素使用指定的內容包裹。

wrapAll(...)：所有的元素使用一個指定的內容包裹

wrapInner(...)：子節點使用指定的內容包裹。

unwrap(): 移出該元素的父元素。

 

六.篩選

篩選與之前的選擇器雷同,篩選提供的都是函式.

1. 過濾

 

eq(index|-index):獲取指定索引的元素.如果是正數,索引從0開始;若是負數,倒著數從1開始.

first():第一個

last():最後一個

hasClass(...):判斷元素是否含有特定的樣式

filter(...):篩選出與指定表示式匹配的元素集合

is(...):判斷元素是否符合指定的選擇器

has(...):含有特定後代的元素

not(...):刪除與指定表示式匹配的元素

slice(start,end):從給定的陣列中，按照範圍擷取元素。  [start,end)

map(fn):將一組元素轉換成其他陣列

 

1. 查詢

 

children([...]):獲取他的所有孩子

closest(...):從元素本身開始，逐級向上級元素匹配，並返回最先匹配的元素

find(...):查詢後代

next():下一個兄弟

nextAll():後面所有的兄弟

nextUntil(...):從下一個兄弟開始,直到指定元素結束

parent():獲取父元素

parents():匹配元素的祖先元素的元素(不包含根元素)

prev():上一個兄弟

prevAll():前面的所有兄弟

prevUntil():從上一個兄弟開始,直至指定元素結束

siblings():所有的兄弟

closest和parents的主要區別是： 1，前者從當前元素開始匹配尋找，後者從父元素開始匹配尋找； 2，前者逐級向上查詢，直到發現匹配的元素後就停止了，後者一直向上查詢直到根元素，然後把這些元素放進一個臨時集合中，再用給定的選擇器表示式去過濾； 3，前者返回0或1個元素，後者可能包含0個，1個，或者多個元素。

 

1. 串聯

 

 

A.add(B)  將A和B拼湊在一起，等效 $(A,B)

A.children().andSelf()   所有孩子，再新增自己

A.children().end()...  使用end後將返回A位置

contents() 獲得所有節點（子元素、文字）  <div>abc<a></a> xxx</div>

七.事件

1. 常見事件

 

focus和focusin  得到焦點

focus 獲得焦點

foucsin 獲得焦點。可以在父元素上檢測子元素獲取焦點的情況

blur和focusout 失去焦點

 

mouseover 和 mouseenter 移進

mouseover , 如果滑鼠指標穿過任何子元素，同樣會觸發 mouseover 事件

mouseenter ,如果滑鼠指標穿過任何子元素，不會觸發 mouseenter 事件

mouseout和mouseleave 移除  同上

 

1. 頁面載入

ready(fn):頁面載入,在一個頁面中可以使用多次

常用格式1:

$(document).ready(function(){

....

})

常用格式2: 格式1的簡化版

$(function(){

......

});

常用格式3:完整版

jQuery(document).ready(function(){

......

});

1. 事件處理和委派

 

on:繫結多個事件

one: 繫結一次事件

bind和unbind

bind:繫結事件,一直使用,直到解綁

例如:$btn1.bind(“click”,function(){}); ===$btn1.click(function(){});

unbind:解綁事件

繫結的時候可以指定別名,格式:  事件.別名

例如:

bind(“click.c1”,fn);

unbind(“click.c1”);

trigger和triggerHandler

trigger() 觸發所有的事件（包括瀏覽器預設的）

triggerHandler() 觸發所有的事件（不包括瀏覽器預設的）

 

委派

live  jQuery 給所有匹配的元素附加一個事件處理函式，即使這個元素是以後再新增進來的也有效,例如給A標籤新增事件，之後再追加a標籤都具有相同的事件。

die 解綁

1. 事件切換

hover 在mouseover和mouseout之間進行切換

toggle 點選事件切換，點選第一次執行 fn，點選第二次執行fn2.....

 

 

八.效果

 

• l基本：改變高和寬

show(速度，[fn]) 顯示 當顯示成功後觸發fn

hide() 隱藏

toggle(speed [,fn]) 切換,如果隱藏就顯示，如果顯示就隱藏。

• l滑動：改變高度

slideDown ，顯示（從上往下）

slideUp，隱藏（從下往上）

slideToggle() 切換

• l淡入淡出：改變透明度

fadeIn 顯示

fadeOut  隱藏

fadeToggle 切換

fadeTo 指定物件透明度