教程:---《JQuery如何工作》

2021-03-02 web前端網頁設計


點擊上方「web前端網頁設計」一鍵關注,更多Html div css HTML5+CSS3、JavaScript、JQuery,PHP、mysql、帝國CMS建站教程盡在掌握。

前言:

我最近在做一個項目,需要用到ajax,我以前做ajax項目,已經有很多年了,jquery還不成熟,需要自己編寫大量的Javascript代碼。
最近發現jquery很成熟了,我看了jquery官方的document,我想,如果沒有人翻譯過,我打算邊看文檔,順道邊翻譯。

如果有人發現已經有人翻譯過了,勞煩通知一下,我就不做重複勞動了。

這裡先提供入門章節內容。 

--



jQuery: 基礎

這段主要教授你如何開始使用jQuery. 如果你還沒有一個測試頁面,請先從按照下面的代碼創建一個HTML頁面。

<!doctype html>

<html>

 <head>

    <meta charset="utf-8">

    <title>Demo</title>

 </head>

 <body>

    <a href="http://jquery.com/">jQuery</a>

    <script src="jquery.js"></script>

    <script>

     

    </script>

 </body>

</html>

編輯Script標籤的src屬性,指向你的jquery.js屬性。例如,如果你的jquery.js和HTML文件在同一文件夾下:

 <script src="jquery.js"></script>

頁面加載完成時運行代碼

很多Javascript程式設計師都要做的第一件事情,就是加這樣的一些代碼到他們的程序:

 window.onload = function(){ alert("welcome"); }

這段代碼將會在頁面加載成功時被正確執行,但是,這段代碼的問題是Javascript代碼將會在所有的圖片信息被全部下載完成後執行(這裡包含了廣告欄)。這裡使用首先Window.onload的原因是HTML在你最初運行這段代碼的時候,HTML文檔並沒有完全加載。

To circumvent both problems, jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event:

jQuery有一個很簡單的聲明來檢查文檔,和判斷文檔是否已經準備完成,這裡稱之為 ready event:

 $(document).ready(function(){

   // Your code here

 });

我們在ready event中添加一個超連結點擊的處理方法。

 $(document).ready(function(){

   $("a").click(function(event){

     alert("Thanks for visiting!");

   });

 });

保存HTML文件,在瀏覽器中刷新此文件,點擊網頁中的超連結,在連接到指定頁面之前首先會彈出一個提示框。

在點擊和其他的很多事件中,你可以在這裡使用event.preventDefault()來阻止其進行默認行為。

 $(document).ready(function(){

   $("a").click(function(event){

     alert("As you can see, the link no longer took you to jquery.com");

     event.preventDefault();

   });

 });

完整示例

這裡提供一個完整的HTML文件的示例來演示之前我們講述的內容。注意這裡連接到了Google’s CDN 來加載jQuery的核心庫。你最好將它放在一個單獨文件中,並且在Head標籤中完成對它的加載。

 <!DOCTYPE html>

 <html>

 <head>

   <meta charset="utf-8">

   <title>jQuery demo</title>

 </head>

 <body>

   <a href="http://jquery.com/">jQuery</a>

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

   <script>

     $(document).ready(function(){

       $("a").click(function(event){

         alert("As you can see, the link no longer took you to jquery.com");

         event.preventDefault();

       });

     });

   </script>

 </body>

 </html>

增加和刪除css樣式

重要: 接下來的jQuery示例需要放在ready event內,這樣在文檔準備結束後立即執行。

我們另一種常常做的事情,便是增加(或者刪除)一個css樣式。

首先我們在<head>標籤內增加一些樣式:

 <style>

    a.test { font-weight: bold; }

 </style>

然後在代碼內使用addClass方法

 $("a").addClass("test");

所有超連結會被加粗。

要刪除此樣式,只需要使用 remove class方法。 (允許添加多個樣式到html)

 $("a").removeClass("test");

 

 Edit®

特效

jQuery提供了一組特效,使用這些特效可以讓你的網站脫穎而出,你只需要將上面的測試文件添加如下代碼就可以進行測試:

 $("a").click(function(event){

   event.preventDefault();

   $(this).hide("slow");

 });

如果你點擊超連結,你所點擊的超級連結會被隱藏。

回調函數

回調函數是指父方法運行通過後傳遞參數並且進行調用的函數。回調函數的特殊之處在父函數可以在回調函數運行之前運行。另一個重要的點是要知道如何正確的傳遞迴調。這也是我常常忘記的正確語法。

無參數回調

你可以使用下面的代碼來設定回調參數。

 $.get('myhtmlpage.html', myCallBack);

注意 第二個參數只包含回調函數的名字(不是字符串並且不包含括號對). Javascript的函數可以像參數一樣傳遞,並且在後面的代碼執行。

包含參數的回調

你可能會這樣問,"如果包含參數,你會怎麼做?"。

錯誤的方式

錯誤的調用方式(不會被執行)

 $.get('myhtmlpage.html', myCallBack(param1, param2));


這種方式並不會被調用,因為它調用了

myCallBack(param1, param2)

它的執行結果會被作為第二個參數傳遞給$get()函數

正確的方式

上面的方式問題在於 myCallBack在作為函數傳遞之前先被進行了評估。Javascrip和的jQuery 將函數擴展為函數指針,例如IE的設定Timeout函數。

下面的方法,創建了一個匿名函數並且註冊了回調函數。注意這裡使用了function(){}匿名函數隻做了一件事情,使用兩個參數param1,param2調用myCallBack方法。

$.get('myhtmlpage.html', function(){

 myCallBack(param1, param2);

});

param1和param2是$get()方法獲取頁面完成後提供的參數。

相關焦點

  • 2011年2月18個最給力jQuery教程分享
    在這篇教程中(http://tympanus.net/codrops/2011/01/03/parallax-slider/),將介紹如何利用人的視覺差的原理,設計一個向左滑動的幻燈圖片播放器,其中當用戶在瀏覽圖片時,會感覺到圖片和背景都在向左快速滑動
  • jquery非常詳細的使用教程
    目前還沒有jQuery UI的中文教程. 因為本文是實戰篇, 所以不會仔細講解基礎內容. 在後面的章節中我會加入jQuery UI的基礎教程.爭取成為中文jQuery UI第一教程. 四.準備工作另外也可以從Google上引用文件, Google的CDN速度更快也更有保證, 參見: Google'sCDN 本文的實例的所有引用都使用WebConfig.ResourceServer 這個屬性: public class WebConfig{    publicstatic string ResourceServer
  • jQuery 設置
    jQuery - 設置內容和屬性設置內容 - text()、html() 以及 val()我們將使用前一章中的三個相同的方法來設置內容:下面的例子演示如何通過
  • jQuery - AJAX post() 方法
    實例:使用 $.post() 連同請求一起發送數據$("button").click(function(){ $.post("demo_post.php", { name:"菜鳥教程
  • jQuery學習筆記
    分組與嵌套基本篩選器屬性選擇器表單篩選器篩選器方法(通過方法選擇jQuery對象)操作標籤操作類css操作位置操作尺寸文本操作值操作屬性操作文檔處理事件綁定時間(兩種方式)實例PS:概念安裝3.x 為官方主要維護和更新版本(不兼容IE678)// 官方中文教程
  • jQuery - each() 方法
    DOCTYPE html><html><head><meta charset="utf-8"><title>菜鳥教程(runoob.com)</title>
  • 帝國cms+jquery.lazyload.js實現圖片延遲懶加載的極簡方法
    提升網站頁面加載速度,利於seo提升——懶加載好處看上去很多,只是要如何具體地用在自己的網站上呢?對於沒有專業程式設計師參與的網站運營管理者來說,要實現懶加載並不是那麼容易。菜鳥小白請先參考網上的教程,然後再回來。
  • 如何用jquery實現滑鼠拖拽效果
    今天我們將學習如何用jquery實現滑鼠拖拽效果。
  • jquery mootools - CSDN
    <script type="text/javascript" src="moo1.2.4.js"></script><script type="text/javascript" src="jquery-1.4.js"></script><script type
  • 9個有用的jQuery日曆和日期選擇器插件
    【IT168技術】事件日曆和日期選擇器是是我們開發當中經常遇到的問題,這個時候我們就需要用jquery插件來實現,昨天我在做項目的時候,遇到了個問題就是如何顯示倒計時問題,我這個時候就用jquery插件解決的,今天給大家分享9個其他的時間選擇器插件  FullCalendar  FullCalendar
  • 用jQuery做自動化測試是怎樣一種感覺
    關於更多jquery語法可以學下w3school的教程:http://www.w3school.com.cn/jquery/jquery_syntax.asp。列表中的第1個元素(index 從 0 開始)jq_input = "$('span input:eq(0)').val('選擇最後一個元素')"; js.executeScript(jq_input);Thread.sleep(2000);四、使用Jquery定位方式完成自動化測試既然我們已經掌握了jquery
  • jquery與js的區別是什麼?js與jquery的用法區別介紹
    在學習js的時候我們肯定能夠接觸到jquery,那麼,js與jquery之間有什麼區別呢?本篇文章將給大家來分享關於jquery與js之間的區別比較,有需要的小夥伴可以參考一下,希望能夠幫助到你們。我們來簡單看一下jquery與js的概念。js是一種腳本語言,常用於網頁客戶端編程,使網頁在客戶端瀏覽器中,實現更多地動態功能,表現出更加豐富的視覺效果。jquery是一個快速、簡潔的JavaScript框架,極大的簡化了javascript編程。
  • JQuery的動畫操作
    人工智慧時代的動畫壹 · JQuery的介紹Write less,Do more1.Jquery是目前使用最為廣泛的javascript函數庫,jquery是一個函數庫,一個js文件,頁面用script標籤引入即可,<script type="text/javascript" src="jquery-3.4.1.js">2.JQuery加載將獲取元素的語句寫到頁面頭部,會因為元素還沒有加載而出錯,就要用ready來進行解決
  • 基於 RequireJS 和 jQuery 的模塊化編程——常見問題解析
    如何解決requirejs中循環依賴問題如果你定義的某個a模塊使用到了b模塊,而b模塊又使用了a模塊,那麼就會拋出循環依賴的異常。比如,我這裡寫了一個循環依賴的例子。主頁面:<!關於循環依賴的源碼可以參考雲盤(http://pan.baidu.com/s/1c2yk94s)如何在requirejs中使用jquery如果想要使用jquery比較簡單,直接在main.js中添加對應的依賴即可:requirejs.config({    baseUrl: '.
  • jquery attribute vs property 的區別
    bug收集:專門解決與收集bug的網站網址:www.bugshouji.comattribute vs property 的區別property 是 DOM 中的屬性,是 JavaScript 裡的對象;attribute 是 HTML 標籤上的特性,它的值只能夠是字符串jquery
  • jQuery.each()方法
    <head><meta charset="utf-8"><title>jQuery.each()方法</title><script src="https://cdn.staticfile.org/jquery
  • JavaScript 學習 jQuery&前端小技巧
    --cdn引入(在線)-->    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/core.js"></script>     <!
  • 實戰jQuery和PHP CodeIgniter表單驗證
    在本文中將指導讀者使用jQuery中的validate驗證框架實現瀏覽器端的驗證代碼編寫工作,validate框架是一個十分簡單實用的驗證框架,能大大提高客戶端驗證代碼的的編寫工作,同時,本文使用的是php中十分流行的CodeIgniter框架進行服務端的驗證編寫工作。本文閱讀對象為對jQuery及對PHP CodeIgniter框架有一定認識的讀者。
  • 動手編譯自定義版本的最新 jQuery 類庫?
    在今天的這篇文章中,我們將介紹如何使用一些編譯工具來創建我們自己的jQuery類庫。 取得jQuery代碼並編譯 首先打開Git Bash,如果你安裝好了git,可以在開始菜單找到快捷方式,運行命令如下: git clone git://github.com/jquery/jquery.git 你將看到正在抓取jquery的相關文件。如下圖:
  • JavaScript|jQuery基礎語法
    DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"