jquery操作手冊

Jquery操作手冊Jquery簡介?

1. 什麼是jquery?

   1. 

是一個javaScript函數庫。其實就是javascript庫，由javascript寫的函數封裝成一個庫。

2. jQuery是一個JavaScript函數庫。

3. jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。

4. jquery包括以下功能

       1. 

   html元素選取

   2. html元素操作

   3. css操作

   4. html事件函數

   5. javascript特效和動畫

   6. html DOM遍歷和修改

   7. AJAX(異步請求交互)

Utilities

並且在此基礎之上，還有提供了大量的插件。

1. 

爲什麼要學習jquery呢？

    1. 

Jquery是目前最流行的js框架，許多大公司都在使用

比如IBM,Google,Microsoft

Jquery比javaScript的優點

    1. 

Jquery極大地簡化了javascript編程。

Jquery要比javascript更容易學習。

Jquery學習基礎

    1. 

在學jquery之前需要學習人員具體以下知識：

        1. 

HTML

CSS

JS(javascript)

Jquery 的安裝

因爲jquery是一個javascript庫，所以可以像引入js一樣引入到一個html文件內

用一個標籤將jquery文件引入

    1. 

<script src=”jquery.xxxxxx.js” type=”text/javascript”></script>

提示： 將下載的文件放在網頁的同一目錄下，就可以使用jQuery。
您是否很疑惑爲什麼我們沒有在 <script> 標籤中使用 type="text/javascript" ？
在 HTML5 中，不必那樣做了。JavaScript 是 HTML5 以及所有現代瀏覽器中的默認腳本語言！

Jquery語法
jQuery 語法是通過選取 HTML 元素，並對選取的元素執行某些操作。

基礎語法：$(selector).action()

    1. 

美元符是定義使用jquery的。

selector是要查詢或者要操作的html元素

action()是對選擇的元素要進行的操作

        1. 

比如：$(“div”).hide() à表示隱藏所有的div元素

1. 

Jquery語法的書寫區域

    1. 

在head標籤內的script標籤內

$(document).ready(function(){
// 開始寫 jQuery 代碼...
});
$(document).ready();表示整個文檔加載完成後才執行該代碼，爲了防止文檔在加載前就執行jquery代碼。

Jquery選擇器

Jquery選擇器允許你對html元素組或者單個元素進行操作

Jquery選擇器基於元素的ID、類、類型、屬性、屬性值等查找html元素。

但是請記住jquery中所有選擇器都以美元符開頭：$()

一些基本的元素選擇器：元素選擇器

其實就是選擇一些html元素標籤組件

比如

    1. 

$("p")

該句話的意思是在頁面中選取所有的<p>元素

實例：

#id 選擇器

jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。

頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。
通過 id 選取元素語法如下：
$("#test")
實例：

class 選擇器

jQuery 類選擇器可以通過指定的 class 查找元素。

語法如下：
$(".test")
實例：
其他的一些選擇器

事件

Jquery中的其他事件

Event函數
綁定的函數功能
$(document).ready(function);
將函數綁定到文件的就緒事件（文檔加載完成）
$(selector).click(function);
將函數綁定到點擊或者單擊事件
$(selector).dbclick(function);
將函數綁定到雙擊事件
$(selector).focus(function);
將事件綁定到獲得的焦點的事件中
$(selector).blur(function);
將事件綁定到失去的焦點的事件中。
$(selector).toggle(function);
將組件的屬性轉換爲隱藏或者顯示狀態
$(selector).mouseover(function);
將函數綁定到備選元素的的鼠標懸停事件。(其實就是hide方法和show方法的互相切換)

Switch描述：

Jquery效果淡入淡出fade
fadeIn()\fadeOut()\fadeToggle()\fadeTo()

FadeIn()是將某個元素淡入爲顯示狀態

    1. 

格式：fadeIn(speed,callback)

        1. 

通常可以取值爲：fast,slow,毫秒值或者默認不寫

其中speed是速度，callback是執行淡入後的所執行的其他函數或者函數名

相同道理fadeOut也是相同的道理

    1. 

將組件的顯示狀態更改爲隱藏狀態

fadeToggle

    1. 

該fadeToggle可以在每次點擊後在fadeIn與fadeOut的效果之間進行切換。

fadeTo

    1. 

格式fadeTo(speed,opacity,callback)

該函數允許漸變爲給定的不透明度（0~1之間）

滑動

slideUp()

    1. 

這個方法用於向上滑動元素

語法：$(selector).slideUp(speed,callback);

        1. 

可選的speed參數規定效果的時長。它可以取一下值：“slow”,”fast”,或者一些毫秒值

可選的callback是在向上滑動後所執行的函數的名稱。

slideDown();

    1. 

這個方法用於向下滑動元素

語法：$(selector).slideDown(speed,callback);

slideToggle();

    1. 

語法：$(selector).slideToggle(speed,callback);

動畫

animate();

    1. 

語法：$(selector).animate({params},speed,callback());

        1. 

{params}：表示要設置的一些參數

speed表示執行該動畫所需的時間

callback（）表示執行該動畫後所執行其他的函數或者方法。

Ajax簡單請求Servlet

Ajax:Asynchronous javascript and xml

    1. 

全稱叫做異步js和xml技術：其實就是異步交互技術

Ajax 是一種用於創建快速動態網頁的技術。

作用：通過在後臺與服務器進行少量的數據交換，Ajax可以實現異步更新。這意味着可以在不全部更新頁面的情況下只更新部分頁面。比如傳統的頁面點擊一個按鈕要更新整個頁面這導致了有的不需要更新部分也更新了，就有點浪費流量數據了，所有用了Ajax技術後只需要更新要更新的部分即可。

使用注意：在使用Ajax技術前先需要導入jquery.xxx.js

格式：

        1. 

    6. 

Ajax異步請求servlet實例：

        1. 

Html代碼

            1. 

        2. 

服務器代碼

            1. 

        3. 

結果：

            1. 

點擊box text會彈出框

並在box text下方顯示hello

4.     4.