01 - jQuery介紹和體驗

来源:https://www.cnblogs.com/article-record/archive/2019/09/01/11442004.html
-Advertisement-
Play Games

jQuery介紹 在說jQuery之前,先說一個概念吧,什麼是JavaScript框架庫,其實就是一個普通的js文件,裡面封裝了很多函數或者說封裝了很多相容的代碼;當然啦,jQuery就是眾多庫的一員,那麼我們為什麼要學習jQuery呢,那就講一下他的特點; 1. 很好的解決了不同瀏覽器之間的相容性 ...


jQuery介紹

在說jQuery之前,先說一個概念吧,什麼是JavaScript框架庫,其實就是一個普通的js文件,裡面封裝了很多函數或者說封裝了很多相容的代碼;當然啦,jQuery就是眾多庫的一員,那麼我們為什麼要學習jQuery呢,那就講一下他的特點;

  1. 很好的解決了不同瀏覽器之間的相容性問題(IE6+,FF 2+, Safari 3.0+, Opera 9.0+ ,Chrome) 只是針對js的相容性;
  2. 體積小 幾十kb 使用簡單方便 鏈式編程 隱式迭代 插件豐富 開源 免費;
jQuery 學習網站

jQuery官網: https://jquery.com/
jQuery線上API: https://api.jquery.com/
jQueryUI: https://jqueryui.com/

只是說還是不行下麵咱們還是通過一些實例體驗一下吧


jQuery快速體驗

下麵就用DOM和jQuery 的方式來實現一個小案例,體驗一下吧;

要求:點擊按鈕使按鈕下方div顯示出來並增加背景圖;

<-- 這是頁面結構 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="button" value="顯示效果" id="btn">
    <div id="dv"></div>
</body>
</html>
<script>
   // DOM方式
  // 如果在頁面頂部加script標簽的話,需要用window.onload
  window.onload = function () {
    document.getElementById('btn').onclick = function () {
      var div = document.getElementById('dv');
      div.style.width = '200px';
      div.style.height = '200px';
      div.style.backgroundColor = 'yellow';
    }
  }
</script>
// jQuery 方式
<script src="../jquery-1.12.2.js"></script>
<script>
  // 如果使用jQuery就要先引入文件
  $(function () {
    $('btn').click(function () {
      $('dv').css({'width': '200px', 'height': '200px', 'backgroundColor': 'red'});
    });
  });
</script>

以上實例可以看出jQuery還是比DOM要簡潔一些的;要系統的學習,還是要從開始慢慢來,下麵怎們來說說jQuery中的頂級對象!

jQuery頂級對象

在講頂級對象之前,剛好回憶一下DOM和BOM中的頂級對象;

  1. DOM中的頂級對象 document ----- 頁面中的頂級對象
  2. BOM中的頂級對象 window ----- 瀏覽器中的頂級對象
  3. jQuery中的頂級對象 jQuery 或者 $
jQuery中的頁面載入事件
// 在DOM中頁面載入事件 onload 只能有一次,比如
window.onload = function () {
  console.log('hello');
}
window.onload = function () {
  console.log('world');
}
// 此時頁面只會輸出world,那這個肯定是我們不能接受的;
// jQuery則不會,而且還不止一種方法
<script src="../jquery-1.12.2.js"></script>
<script>
  // 第一種  與onload功能完全相同
  // 頁面中所有的內容都載入完成後才觸發  標簽 圖片。。。
  $(window).load(function () {
    console.log('hello');
  });
  $(window).load(function () {
    console.log('world');
  });
  // 此時頁面就會輸出 hello  world

  // 第二種  頁面中基本的標簽載入完畢後就可以觸發了
  // 1. ready() 頁面載入事件的寫法都是 ---- 方法
  $(document).ready(function () {
    console.log('hello');
  });
  $(document).ready(function () {
    console.log('world');
  });
  
  jQuery(function () {
    console.log('hello');
  });
  jQuery(function () {
    console.log('world');
  });

  $(function () {
    console.log('hello');
  });
  $(function () {
    console.log('world');
  });
  // 可以看出咱們前面說過jQuery中的頂級對象是jQuery 和 $ 
  // 所以大多數人更偏向與最後一種使用方式
</script>
DOM對象和jQuery對象互轉

DOM 對象轉Jquery對象操作方便,畢竟Jquery中方法都是封裝 好了的,而且相容問題解決的很好,代碼少,方便. Jquery對象轉DOM對象,因為Jquery中文件一直在更新,很多 東西都是隨著使用而進行封裝和升級,不太可能把所有dom中 用到的進行封裝,還有很多未知的相容問題沒有封裝進去,所以, 有的時候jquery中不能解決的問題,還需要原生的js代碼來解決, 所以,jquery對象有的時候需要轉成dom對象來進行操作。

<script src="../jquery-1.12.2.js"></script>
<script>
  // 還是上面那個HTML的案例 咱們試一下轉換
  // DOM操作按鈕,修改顏色
  window.onload = function () {
    // btn 就是DOM對象 
    var btn = document.getElementById('id');
    // DOM對象轉換jQuery對象,只需要把DOM對象放在$(DOM對象) ---- 對象
    $(btn).click(function () {
      // 此時要通過$(this) 把this指向 jQuery
      $(this).css('backgroundColor', 'red');
    });
   }

  // jQuery對象轉DOM對象 有兩種方式 下麵咱們演示一下
  $(function () {
    // $('#btn') 是jQuery對象 通過 .get(0)  轉換為DOM對象
    $('#btn').get(0).onclick = function () {
      this.style.backgroundColor = 'red';
    }
  });
  
  $(function () {
    // $('#btn') 是jQuery對象 通過後面追加[0] 的方式轉換為DOM對象
    $('#btn')[0].onclick = function () {
      this.style.backgroundColor = 'red';
    }
  });
  /*
  *   DOM對象和jQuery對象可以互轉
  *   DOM對象轉jQuery對象
  *     $(DOM對象) --- jQuery對象
  *   jQuery對象轉DOM對象
  *     $(#btn)[0] --- DOM對象
  *     $(#btn).get(0) ---- DOM對象
  */
</script>
網頁開關燈案例

要求:點擊按鈕切換body的背景顏色;下麵咱們用DOM和jQuery的方式分別實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        // DOM 方式
        window.onload = function () {
          // 獲取按鈕,註冊點擊事件
          document.getElementById('btn').onclick = function () {
            // 判斷開燈還是關燈
            if (this.value == '關燈') {
              document.body.style.backgroundColor = 'black';
              this.value = '開燈';
            } else {
              document.body.style.backgroundColor = 'white';
              this.value = '關燈';
            }
          }
        }

      // jQuery 方式
      $(function () {
        $('#btn').click(function () {
          // .val() --- 獲取按鈕對象的值
          if ($(this).val() == '關燈') {
            $('body').css('backgroundColor', 'black');
            // .val('content') --- 設置按鈕的value值
            $(this).val('開燈');
          } else {
            $('body').css('backgroundColor', 'white');
            $(this).val('關燈');
          }
        });
      });
    </script>
</head>
<body>
    <input type="button" value="關燈" id="btn">
</body>
</html>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Vue起飛前的準備 一、什麼是ECMAScript,以及es6的誕生? 1997年 ECMAScript 1.0 誕生 1999年12月 ECMAScript 3.0誕生,它 是一個巨大的成功,在業界得到了廣泛的支持,它奠定了JS的基本語法,被其後版本完全繼承。直到今天,我們一開始學習JS,其實就是 ...
  • 溫習一下js中的迭代方法。 <script type="text/javascript"> var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]; //所有項為false,則為false //否則直到遍歷到第一個為true的值,返回true //類似於數學里的‘或’ conso ...
  • 前言 上傳文件在開發中是很常見的操作,今天我選擇使用koa-multer中間件來實現這一功能,除了上傳文件外,我還會對文件上傳進行限制,以及發生上傳錯誤時的處理。 由於原來的 koa-multer 已經停止維護,我們要使用最新的 @koa/multer 。這個模塊是 koa-multer 的一個分支 ...
  • 網站是分為網站的前臺和網站的後臺. 前臺--給用戶看的 例如:商城 後臺--給管理員看的 例如:商城後臺 目的:用來添加維護數據 BootStrap:jsp 頁面顯示,效果好,美觀,適合作為用戶界面. EasyUI : jsp頁面,快速開發,格式統一,美觀效果一般. EasyUI裡面有很多組件(功能... ...
  • 一. "Vue的介紹及安裝和導入" 二. "Vue的使用" 三. "Vue成員獲取" 四. "Vue中的迴圈以及修改差值表達式" 五. "vue中methods,computed,filters,watch的總結" 六. "Vue中組件" 七. "Vue中插槽指令" 八. "Vue部分編譯不生效,解 ...
  • 0901自我總結 Vue CLI項目路由案例彙總 router.js components/Nav.vue views/Course.vue components/CourseCard.vue vue <! 邏輯跳轉 {{ card.title }} <! 鏈接跳轉 <! 第一種 <! <route ...
  • 身份互聯網和物聯網之間有什麼區別? 顧名思義,物聯網是關於物的——設備、控制器、致動器等等。但這些東西會執行任務、收集數據、連接到其他設備。換句話說, 每個設備都會有帶多重屬性的一個身份,而這些屬性必須得到良好的理解,才可以驅動好事發生,而阻止壞事降臨。 因此, 身份互聯網IOI (Internet ...
  • 盒子模型:(重點) 盒子模型(CSS框模型)規定了元素框處理元素內容、內邊距、邊框、外邊框等樣式 記住上面這一張圖!一定要記住!一定!一定! 內邊距、邊框和外邊距是可選參數屬性,預設值:0 ;很多元素由用戶代理樣式表設置外邊距和邊框,通過將元素的 margin外邊距和padding內邊距設置為 0 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...