python學習之路前端-jQuery

jQuery簡介

     JQuery是繼 prototype以後又一個優秀的 Javascript庫。它是輕量級的js庫 ，它兼容 CSS3，還兼容各類瀏覽器（ IE 6.0+,  FF1.5+,  Safari 2.0+,  Opera 9.0+），jQuery2.0及後續版本將再也不支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理 HTML（ 標準通用標記語言下的一個應用）、events、實現動畫效果，而且方便地爲網站提供 AJAX交互。jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的 插件可供選擇。jQuery可以使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只須要定義id便可。

jQuery是一個兼容多瀏覽器的 javascript庫，核心理念是write less,do more(寫得更少,作得更多)。jQuery在2006年1月由美國人 John Resig在紐約的 barcamp發佈，吸引了來自世界各地的衆多JavaScript高手加入，由Dave Methvin率領團隊進行開發。現在，jQuery已經成爲最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。

     jQuery是免費、開源的，使用 MIT許可協議。jQuery的語法設計可使開發更加便捷，例如操做 文檔對象、選擇 DOM元素、製做動畫效果、事件處理、使用 Ajax以及其餘功能。除此之外，jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者能夠很輕鬆的開發出功能強大的靜態或動態網頁。

jQuery，顧名思義，也就是JavaScript和查詢（Query），便是輔助JavaScript開發的庫。

 

特色：

1. 動態特效
2. AJAX
3. 經過插件來擴展
4. 方便的工具 - 例如瀏覽器版本判斷
5. 漸進加強
6. 鏈式調用
7. 多瀏覽器支持，支持 Internet Explorer6.0+、Opera9.0+、 Firefox2+、 Safari2.0+、 Chrome1.0+（在2.0.0中取消了對Internet Explorer6,7,8的支持）

jQuery學習教程

http://jquery.cuishifeng.cn/

http://www.php100.com/manual/jquery/

jQuery選擇器

1.基本

ID選擇器

id選擇器，經過id去匹配元素：#id來表示

實例一：查找 ID 爲"myDiv"的元素

HTML 代碼:

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

jQuery 代碼:

$("#myDiv");

結果:

[ <div id="myDiv">id="myDiv"</div> ]

實例二：查找含有特殊字符的元素

HTML 代碼:

<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>　　

jQuery 代碼:

#foo\\[bar\\]　

結果:

[ <span id="foo[bar]"></span>]

 2.標籤選擇器

根據指定的元素名（標籤），去匹配元素。例如<div>標籤、<a>標籤、<p>標籤等

實例一：查找一個 DIV 元素

HTML 代碼:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jQuery 代碼:

$("div");

結果:

[ <div>DIV1</div>, <div>DIV2</div> ]

3.class選擇器(.class)

根據給定的css類名匹配元素

實例一：查找全部類是 "myClass" 的元素

HTML 代碼:

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>　

jQuery 代碼:

$(".myClass");　　

結果:

[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

4.組合選擇器（匹配多個元素）

實例一：找到匹配任意一個類的元素

HTML 代碼:

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>　

jQuery 代碼:

$("div,span,p.myClass")

結果:

[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

5.層級選擇器

實例一：找到表單中全部的 input 元素

HTML 代碼:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />　　

jQuery 代碼:

$("form input")　　

結果:

[ <input name="name" />, <input name="newsletter" /> ] 

2.層級

3.基本篩選器

4.可見性

5.屬性

6.表單

jQuery篩選器

1.過濾

2.查找

jQuery屬性

1.屬性

2.CSS類

3.HTML代碼/文本/值

jQuery CSS

1.CSS

2.位置

3.尺寸

jQuery文本處理

1.內部插入

2.外部插入

3.替換

4.刪除

5.複製

jQuery事件

1.bind

2.delegate