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(非同步請求互動)

   8. 
      

Utilities

9. 
   

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

1.

為什麼要學習jquery呢？

    1.

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

2. 
   

比如IBM,Google,Microsoft

2. 
   

Jquery比javaScript的優點

    1.

Jquery極大地簡化了javascript程式設計。

2. 
   

Jquery要比javascript更容易學習。

3. 
   

Jquery學習基礎

    1.

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

        1.

HTML

2. 
   

CSS

3. 
   

JS(javascript)

Jquery 的安裝

1. 
   

因為jquery是一個javascript庫，所以可以像引入js一樣引入到一個html檔案內

2. 
   

用一個標籤將jquery檔案引入

    1.

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

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

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

1. 
   

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

    1.

美元符是定義使用jquery的。

2. 
   

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

3. 
   

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

        1.

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

1.

Jquery語法的書寫區域

    1.

在head標籤內的script標籤內

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

Jquery選擇器

1. 
   

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

2. 
   

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

3. 
   

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

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

1. 
   

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

2. 
   

比如

    1.

$("p")

2. 
   

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

例項：

#id 選擇器

1. 
   

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

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

class 選擇器

1. 
   

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()

1. 
   

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

    1.

格式：fadeIn(speed,callback)

        1.

通常可以取值為：fast,slow,毫秒值或者預設不寫

2. 
   

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

3. 
   

   2. 
      

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

    1.

將元件的顯示狀態更改為隱藏狀態

3. 
   

fadeToggle

    1.

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

4. 
   

fadeTo

    1.

格式fadeTo(speed,opacity,callback)

2. 
   

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

3. 
   

滑動

1. 
   

slideUp()

    1.

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

2. 
   

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

        1.

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

2. 
   

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

3. 
   

   1. 
      

slideDown();

    1.

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

2. 
   

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

3. 
   

   2. 
      

slideToggle();

    1.

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

2. 
   

動畫

1. 
   

animate();

    1.

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

        1.

{params}：表示要設定的一些引數

2. 
   

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

3. 
   

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

2. 
   

Ajax簡單請求Servlet

1. 
   

Ajax:Asynchronous  javascript and xml

    1.

全稱叫做非同步js和xml技術：其實就是非同步互動技術

2. 
   

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

3. 
   

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

4. 
   

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

5. 
   

格式：

        1.     6.

Ajax非同步請求servlet例項：

        1.

Html程式碼

            1.         2.

伺服器程式碼

            1.         3.

結果：

            1.

點選box text會彈出框

2. 
   

3. 
   

並在box text下方顯示hello

4.     4.