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. 

網頁名稱：jquery操作手冊
分享鏈接：http://vcdvsql.cn/article32/iihdsc.html

成都網站建設公司_創新互聯，為您提供建站公司、電子商務、小程序開發、App開發、網頁設計公司、移動網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯