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.