2. 程式人生 > >JQuery從0到大技術牛人學習之路！

JQuery從0到大技術牛人學習之路！

阿新 • • 發佈：2019-01-28

一、JQuery簡介

1.1簡介

prototype之後又一個優秀的庫。它是輕量級的js庫 ，它相容CSS3，還相容各種瀏覽器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將不再支援IE6/7/8瀏覽器。jQuery使使用者能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，並且方便地為網站提供AJAX互動。jQuery還有一個比較大的優勢是，它的文件說明很全，而且各種應用也說得很詳細，同時還有許多成熟的外掛可供選擇。jQuery能夠使使用者的html頁面保持程式碼和html內容分離，也就是說，不用再在html裡面插入一堆js來呼叫命令了，只需要定義id即可。


jQuery是免費、開源的，使用MIT許可協議。jQuery的語法設計可以使開發更加便捷，例如操作文件物件、選擇DOM元素、製作動畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發者編寫外掛。其模組化的使用方式使開發者可以很輕鬆的開發出功能強大的靜態或動態網頁。


1.2優點


- （1）寫少程式碼,做多事情【write less do more】
-    （2）免費，開源且輕量級的js庫，容量很小
-         注意：專案中，提倡引用min版的js庫
-    （3）相容市面上主流瀏覽器，例如 IE，Firefox，Chrome
-         
注意：jQuery不是將所有JS全部封裝，只是有選擇的封裝
-    （4）能夠處理HTML/JSP/XML、CSS、DOM、事件、實現動畫效果，也能提供非同步AJAX功能
-    （5）文件手冊很全，很詳細
-    （6）成熟的外掛可供選擇
-    （7）提倡對主要的html標籤提供一個id屬性，但不是必須的
-    （8）出錯後，有一定的提示資訊
-    （9）不用再在html裡面通過<script>標籤插入一大堆js來呼叫命令了

二、JQuery的九類選擇器

使用jquery，首先我們需要去把jquery的包匯入，這個jquery的官網上面是可以下載的，地址：
https://jquery.com/，目前最新版本是3.0，一般會有兩種版本的，一個是完全的，一個是迷你版本的，兩個版本就是大小不一樣，裡面的實質性東西其實是一樣的，而這個迷你版的適合專案正式上線使用，因為佔的體積小啊，一般學習或者練習的話就可以嘗試使用完全版的。下面以幾個案例來實際說明jquery的使用，完整的程式碼會在文末提供下載連結，歡迎下載學習。選擇器的部分在下載的檔案中的/JQuery\WebRoot\selector目錄下。

2.1 基本選擇器

[javascript] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. //1)查詢ID為"div1ID"的元素個數
  2.     alert(  $("#div1ID").size());  
  3.     //2)查詢DIV元素的個數
  4.      alert( $("div").length);  
  5.     //3)查詢所有樣式是"myClass"的元素的個數
  6.     alert($(".myClass").size());  
  7.     //4)查詢所有DIV,SPAN,P元素的個數
  8.     alert($("div,span,p").size());  
  9.     //5)查詢所有ID為div1ID,CLASS為myClass,P元素的個數
  10.     alert($("#div1ID,.myClass,p").size());  



2.2 層次選擇器

[javascript] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. //1)找到表單form裡所有的input元素的個數
  2.     alert($("form input").size());  
  3.     //2)找到表單form下所有的子級input元素個數
  4.     alert($(" form > input").size());  
  5.     //3)找到表單form同級第一個input元素的value屬性值
  6.     alert($("form + input").val());  
  7.     //4)找到所有與表單form同級的input元素個數
  8.     alert($("form ~ input").size());  


2.3 增強基本選擇器

[javascript] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. //1)查詢UL中第一個元素li的內容
  2.     alert($("ul li:first").html());    
  3.     alert($("ul li:first").text());   
  4.     //html()要用在html/jsp中，不能用在xml中，而text()都可以用
  5.     //2)查詢UL中最後一個元素的內容
  6.     alert($("ul li:last").text());   
  7.     //3)查詢所有未選中的input元素個數
  8.     alert($(":checkbox:checked").size());  //選中的    2
  9.     alert($(":checkbox:not(:checked)").size());  //未選中
  10.     //4)查詢表格的1、3、5...奇數行個數
  11.     alert($("table tr:odd").size());  //3
  12.     //5)查詢表格的2、4、6...偶數行個數
  13.     alert($("table tr:even").size());  //3
  14.     //6)查詢表格中第二行的內容，從索引號0開始
  15.     alert($("table tr:eq(1)").text());  
  16.     //html()強調的是標籤中的內容，即便標籤中有子標籤，也會顯示出來，而text()強調的是標籤中的文字內容，不會顯示子標籤
  17.     //7)查詢表格中第二第三行的個數，即索引值是1和2，也就是比0大
  18.     alert($("table tr:gt(0)").size());  //5
  19.     //8)查詢表格中第一第二行的個數，即索引值是0和1，也就是比2小
  20.     alert($("table tr:lt(3)").size());   
  21.     //9)給頁面內所有標題<h1><h2><h3>加上紅色背景色
  22.     alert($(":header").css("background-color","red").css("color","white"));  
2.4 內容選擇器 [javascript] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. //1)查詢所有包含文字"John"的div元素的個數
  2.     alert($("div:contains('John')").size());  //2
  3.     //2)查詢所有p元素為空的元素個數
  4.     alert($("p:empty").size());  //2
  5.     //3)給所有包含p元素的div元素新增一個myClass樣式
  6.     $("div:has(p)").addClass("myClass");  
  7.     //4)查詢所有含有子元素或者文字的p元素個數,即p為父元素
  8.     alert($("p:parent").size());  //2

2.5 可見性選擇器

[javascript] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. //1)查詢隱藏的tr元素的個數
  2.         alert($("table tr:hidden").size());  //1
  3.         //2)查詢所有可見的tr元素的個數
  4.         alert($("table tr:not(:hidden)").size());  
  5.         alert($("table tr:visible").size());  //2

2.6 屬性選擇器

[java] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. //1)查詢所有含有id屬性的div元素個數
  2.         alert($("div[id]").size());  //1
  3.         //2)查詢所有name屬性是newsletter的input元素，並將其選中
  4.          $("input[name='newsletter']").attr("checked","checked");  
  5.         //3)查詢所有name屬性不是newsletter的input元素，並將其選中
  6.         $("input[name!='newsletter']").attr("checked","true"); //1
  7.         //4)查詢所有name屬性以'news'開始的input元素，並將其選中

  8. 相關推薦

    JQuery從0到大技術牛人學習之路！

    一、JQuery簡介 1.1簡介 prototype之後又一個優秀的庫。它是輕量級的js庫 ，它相容CSS3，還相容各種瀏覽器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將不再支援I

    這樣的單點登入才最有效果，很多大咖牛人都不知道！

    導讀：單點登入，是指在多個應用系統中，使用者只需要登入一次就可以訪問所有相互信任的應用系統。本文從友戶通單點登入型別、認證安全以及應用整合的角度，聊下解決複雜場景下的單點登入方案。隨著雲端計算的飛速發展，越來越多的雲應用、雲服務充斥在日常的工作當中。人們在享受資訊化帶來的便捷的同時，也遭受著應用系統反覆登入，

    這樣的單點登錄才最有效果，很多大咖牛人都不知道！

    roc 廣泛 ldap 支持跨域 jsonp 多次 社會化 而且 存在 導讀：單點登錄，是指在多個應用系統中，用戶只需要登錄一次就可以訪問所有相互信任的應用系統。本文從友戶通單點登錄類型、認證安全以及應用集成的角度，聊下解決復雜場景下的單點登錄方案。隨著雲計算的飛速發展，越

    大牛java學習之路

    最近學習java熱情有所消退。學習能力頗有下降。 網上看到一篇大牛的java學習心得，就彷彿是自己希望的人生軌跡。分享大家一起共勉 原文: 我搞JAVA也有些日子了, 因為我比較貪玩,上進心不那麼強, 總是逼不得已為了高薪跳槽才去學習, 所以也沒混成什麼大牛,

    從0開始的web程式猿之路

            寫寫自己剛入程式設計師，然後又走向JAVA,web短短一年的經驗和經歷，寫給未來自己，也寫給迷茫的新人們，讓他們少走一點彎路。         剛開始，學了c，就想做東西，現實狠狠的告訴我，發現只學了c做不了什麼

    0.0 開啟自己的QT學習之路

    2008年左右接觸過一段時間的QT，感覺到了QT的方便快捷，之前我是做JAVA的，不過C++也還能看得懂，一共用QT開發了3個月左右的時間，一直是公司的同事帶著做。N年過去了，QT忘得差不多了，QT也有了很大的發展，現在重新學習是為了之後的工作。 打算用一個周的時間學完QT，達到能開發和看懂QT

    Android從程式設計師到架構師學習之路視訊

    01 - 複習基本OOP知識a02 - 複習基本OOP知識b03 - 複習基本OOP知識c04 - 複習基本OOP知識d05 - 架構設計的UML圖形思考a06 - 架構設計的UML圖形思考b07 - 架構設計的UML圖形思考c08 - 業務內涵的分析抽象&amp;表

    為一位大三同學的學習之路點評一二

    一名網名為“不忘初衷”的大三學生給我在《學習也需要管理》中評論，請我“指點一二“，依他給的連結，我找到了他剛寫的《一年的奮鬥時間去了三個半月》。從網名，以及他已經度過的兩年多大學生活看，他還是很認真地對待自己的大學的。他這樣的自省是需要的，但也許是剛考過六級，對六級沒有怎麼準

    大光頭的shader學習之路-自己寫的一個消融效果

    原理很簡單，設定一張黑白的遮罩圖，根據遮罩圖的某個非alpha通道的顏色從深到淺，逐漸設定透明和溶解的顏色。 直接貼程式碼： Shader "MyShader/DissMask" { Properties { _MainTex ("Albedo (RGB)"

    STM32從菜鳥到牛人的學習步驟

    我想說，為了學習微控制器而去學習微控制器的思路不對。 你問，如何系統地入門學習stm32? 本身就是一個錯誤的問題。假如你會使用8051 ， 會寫C語言，那麼STM32本身並不需要刻意的學習。 你要考慮的是， 我可以用STM32實現什麼? 為什麼使用STM32而不是8051? 是因為

    機器學習和python學習之路史上吐血整理機器學習python大資料技術書從入門到進階最全本（書籍推薦珍藏版)

    “機器學習／深度學習並不需要很多數學基礎！”也許你在不同的地方聽過不少類似這樣的說法。對於鼓勵數學基礎不好的同學入坑機器學習來說，這句話是挺不錯的。不過，機器學習理論是與統計學、概率論、電腦科學、演算法等方面交叉的領域，對這些技術有一個全面的數學理解對理解演算法的內部工作機

    淘寶技術牛人牛部落格學習

    淘寶技術委員會是由淘寶技術部高階技術人員組成的一個組織，共分為Java分會、C/C++分會、演算法分會：資料分會：UED分會、測試分會、系統分會七個分會。 淘寶技術委員會的願景是淘寶成為技術人才嚮往的樂土，高階技術人員的發源地；技術委員會的使命是幫助淘寶建立業界一流的技術

    歡迎各位技術牛人增加Swift QQ群：343549891

    san mod p s strong dot -a 100% rac 動畫 急招：五年以上Swift開發經驗，24個月工資。30天年假。配司機專車。歡迎各位技術牛人增加Swift 敏捷大拇指 官方QQ群1：343549891 官方QQ群2：245285613報上“來自

    復旦微電子牛人學習模電經歷

    博士 com 傳感器 評價 一次 作用 active comm 即使 復旦微電子牛人學習模電經歷 2011-03-09 18:41:40 分類： IT職場 註：文章內容來自網絡，網址不詳 復旦攻讀微電子專業模擬芯片設計方向研究生開始到現在五年工作經驗，已經整

    jQuery從0開始之【二】jQuery使用原則及常用事件

    命名 學習者 proto js文件 事件 自己 -o 註意 如果 jQuery名稱沖突問題：jQuery使用$符號作為jQuery的簡介方式。但是某些JavaScript庫中的函數（比如Prototype）同樣使用$符號。jQuery使用名為noConflict()的方法

    機器學習和python學習之路吐血整理技術書從入門到進階(珍藏版)

    轉載自某大佬部落格：https://pymlovelyq.github.io/2018/10/15/machineLearning/ “機器學習／深度學習並不需要很多數學基礎！”也許你在不同的地方聽過不少類似這樣的說法。對於鼓勵數學基礎不好的同學入坑機器學習來說，這句話是挺不錯的

    Java學習之路吐血整理技術書從入門到進階最全50+本（珍藏版)

    轉載自某大佬部落格：https://pymlovelyq.github.io/2018/10/26/java/ 前言：技術書閱讀方法論 一.速讀一遍（最好在1~2天內完成） 人的大腦記憶力有限，在一天內快速看完一本書會在大腦裡留下深刻印象，對於之後複習以及總結都會有特

    Git系統從0到1的完整學習歷程（第四節(3) Git分支管理）

    主要跟著https://gitee.com/progit/index.html來學習的，知識點來自這裡，新增自己的理解和標記。 檢視分支 git branch 命令不僅僅能建立和刪除分支，如果不加任何引數，它會給出當前所有分支的清單： $ git branch is

    Git系統從0到1的完整學習歷程（第四節(2) Git分支操作）

    主要跟著https://gitee.com/progit/index.html來學習的，知識點來自這裡，新增自己的理解和標記。 分支的新建與合併 現在讓我們來看一個簡單的分支與合併的例子，實際工作中大體也會用到這樣的工作流程： 開發某個網站。 為實現某個新的需求，建立一個

    Git系統從0到1的完整學習歷程（第四節(1) Git分支原理學習）

    分支學習 https://gitee.com/progit/3-Git-%E5%88%86%E6%94%AF.html+自己的理解 理解分支的概念並熟練運用後，你才會意識到為什麼 Git 是一個如此強大而獨特的工具，並從此真正改變你的開發方式。