Jquery的詳細解析和用法

来源:https://www.cnblogs.com/Yaucheun/archive/2018/09/26/9708788.html
-Advertisement-
Play Games

一、Jquery簡介 Jquery是一個優秀的Javascrīpt框架。它是輕量級的js庫(壓縮後只有21k) ，它相容CSS3，還相容各種瀏覽器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 Jquery應用到我們的項目中能夠使程式員從設計和書寫繁雜的J ...


一、Jquery簡介

 

Jquery是一個優秀的Javascrīpt框架。它是輕量級的js庫(壓縮後只有21k) ，它相容CSS3，還相容各種瀏覽器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 Jquery應用到我們的項目中能夠使程式員從設計和書寫繁雜的JS應用中解脫出來，將關註點轉向功能需求而非實現細節上，從而提高項目的開發速度。它有助於簡化 JavaScript以及Ajax 編程。它能讓你在你的網頁上簡單的操作文檔、處理事件、實現特效併為Web頁面添加Ajax交互。

 

官方站點：http://jquery.com/ 中文站點：http://jquery.org.cn/       ----------最後附上jq各版本的引用地址

二、jQuery的特點

a. 輕量級b. 富應用c. DOM操作、事件處理、運動動畫、AJAXd. 跨瀏覽器（不再考慮瀏覽器相容）e. 鏈式調用f. 隱式迭代g. 豐富的插件庫 .........

 

 

三、jQuery的使用

引入jQuery

 

路徑引入
<script src='文件路徑'></script>
引入線上資源
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>

 

入口函數

$(document).ready(function(){
    //類似於原生js的window.onload
});
//簡寫
$(function(){   });

 

和window.onload的區別

區別一：書寫個數不同

 

Js入口函數只能出現一次，出現多次會存在事件覆蓋的問題。
jQuery的入口函數，可以出現任意多次，並不會存在事件覆蓋問題。

 

區別二：執行時機不同

Js入口函數是在所有的文件資源載入完成後，才執行。這些文件資源包括：頁面文檔、外部的js文件、外部的css文件、圖片等。
jQuery的入口函數，是在文檔載入完成後，就執行。文檔載入完成指的是：DOM樹載入完成後，就可以操作DOM了，不用等到所有的外部資源都載入完成。

DOM對象和jQuery對象

jQuery對象:

jQuery選擇器拿到DOM對象後又對其做了封裝，讓其具有了jQuery方法的jQuery對象，說白了，就是把DOM對象重新包裝了一下。

jQuery對象轉換為DOM對象

第一種方式：

 

var btn1 = $btn[0];

 

// 此時就把jQuery對象$btn轉換成了DOM對象btn1 （推薦使用此方式）第二種方式

var btn2 = $btn.get(0);// 此時就把jQuery對象$btn轉換成了DOM對象btn2

DOM對象轉換為jQuery

使用$(domObject)包裹就可以包裝成一個jQuery對象

jQuery選擇器

jQuery選擇器是jQuery強大的體現，它提供了一組方法，讓我們更加方便的獲取到頁面中的元素。語法和css的選擇符保持一致。

基本選擇器

"#"

Id選擇器

--示例$(“#btnShow”).css(“color”, “red”);選擇id為btnShow的一個元素（返回值為jQuery對象）

 

"."

類選擇器

--示例$(“.liItem”).css(“color”, “red”);選擇含有類liItem的所有元素

 

"element"

標簽選擇器

--示例$(“li”).css(“color”, “red”);選擇標簽名為li的所有元素

 

"空格"

層級選擇器(後代選擇器)

--示例$(“#j_wrap li”).css(“color”, “red”);選擇id為j_wrap的元素的所有後代元素li

 

">"

子代選擇器

--示例$(“#j_wrap > ul > li”).css(“color”, “red”);選擇id為j_wrap的元素的所有子元素ul的所有子元素li

基本過濾選擇器

":eq(index)"

選擇匹配到的元素中索引號為index的一個元素，index從0開始

 

--示例$(“li:eq(2)”).css(“color”, ”red”);選擇li元素中索引號為2的一個元素

":odd"

選擇匹配到的元素中索引號為奇數的所有元素，index從0開始

 

--示例$(“li:odd”).css(“color”, “red”);選擇li元素中索引號為奇數的所有元素

":even"

選擇匹配到的元素中索引號為偶數的所有元素，index從0開始

 

--示例$(“li:odd”).css(“color”, “red”);選擇li元素中索引號為偶數的所有元素

 

篩選（方法）

find(selector)

查找指定元素的所有後代元素（子子孫孫）

--示例$(“#j_wrap”).find(“li”).css(“color”, “red”);選擇id為j_wrap的所有後代元素li

 

children()

查找指定元素的直接子元素（親兒子元素）

--示例$(“#j_wrap”).children(“ul”).css(“color”, “red”);選擇id為j_wrap的所有子代元素ul

 

siblings()

查找所有兄弟元素（不包括自己）

--示例$(“#j_liItem”).siblings().css(“color”, “red”);選擇id為j_liItem的所有兄弟元素

 

parent()

查找父元素（親的）

--示例$(“#j_liItem”).parent(“ul”).css(“color”, “red”);選擇id為j_liItem的父元素

 

eq(index)

查找指定元素的第index個元素，index是索引號，從0開始

--示例$(“li”).eq(2).css(“color”, “red”);選擇所有li元素中的第二個

 

jQuery各大版本的引用

 

官網jquery壓縮版引用地址:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

jquery-3.0.0
官網jquery壓縮版引用地址:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

jquery-2.1.4
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

jquery-2.1.1
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

jquery-2.0.0
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>

jquery-1.11.3
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

jquery-1.11.1
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

jquery-1.10.2
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

jquery-1.9.1
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

jquery-1.8.3
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

jquery-1.7.2
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

jquery-1.6.4
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

jquery-1.5.2
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.5.2/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>

jquery-1.4.4
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.4.4/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

jquery-1.4.2
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.2.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

jquery-1.3.2
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.3.2.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.3.2.min.js"></script>

jquery-1.2.3
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.2.3/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.2.3.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.2.3.min.js"></script>

 


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

-Advertisement-
Play Games
更多相關文章
  • CSS的再深入（更新中···）
    在上一章我們提到了一個新的概念，叫做塊級樣式，講到這裡就要科普一下： 標簽又分為兩種： （1）塊級標簽 元素特征：會獨占一行，無論內容多少，可以設置寬高··· （2）內斂標簽（又叫做行內標簽） 元素特征：根據內容的多少占用空間大小，它的上下margin不起作用 （塊級：P h1- h6 div ul ...
  • javascript（九）事件冒泡 onmouseenter onmouseenter 預設事件 和 鍵盤事件
    1 事件冒泡 子元素觸發的事件，會往上（父元素）傳遞； 例子： 冒泡事件是預設事件，但有些情況，冒泡事件是一種麻煩的事情。如： 這時候需要把預設事件去掉 cancelBubble = false 或者 stopPropagation(); 2 onmouseenter/onmouseleave 和o ...
  • 高級佈局
    一.文檔流 1.概念 2.BFC(Block formatting context) 3.BFC規則 內部的Box會在垂直方向,一個接一個地放置。 Box自身垂直方向的位置由margin top決定，屬於同一個BFC的兩個相鄰Box的margin會發生重疊。 Box自身水平方向的位置由margin左 ...
  • Vue.js庫的第一天的學習
    一，vue.js簡介 Vue.js可以作為一個js庫來使用，也可以用它全套的工具來構建系統界面，這些可以根據項目的需要靈活選擇 所以說， vue.js是一套構建用戶界面的漸進式框架 Vue.js的核心庫只關註視圖層，Vue的目標通過儘可能簡單的API實現相應的數據綁定， 在這一點上Vue.js類似於 ...
  • 多個Img標簽之間的間隙處理方法
    1.多個標簽寫在一行 效果前： 效果後： 2.將要閉合標簽的地方與開始標簽的地方重合 3.使用註釋頭尾相連 4.在img標簽的父級上寫：font-size:0; 推薦是用這個方法。這個方法我已經實踐簡單實用 效果： 5.使用display：block(img是內聯元素) 效果: 6.使用letter ...
  • javascript基礎修煉(7)——Promise，非同步，可靠性
    開發者的javascript造詣取決於對【動態】和【非同步】這兩個詞的理解水平。 一. 別人是開發者，你也是 技術是【 非同步編程】這個話題中非常重要的，它一度讓我感到熟悉又陌生，我熟悉其所有的 並能夠在編程中相對熟練地運用，卻對其中原理和軟體設計思想感到陌生，即便我讀了很多源碼分析和教程也一度很難理解 ...
  • CSS的再一次深入（更新中···）
    全面我們學了6個選擇器，今天再來學習兩個選擇器，分別是通配符選擇器和並集選擇器： 1.通配符選擇器： *{ } 表示body里所有的標簽都被選中 2.並集選擇器: 選中的標簽之間用逗號隔開，表示這幾個標簽都被選中 *選擇器 有好處也有弊端 好處 就是省事，弊端，就是因為太省事了，加大了瀏覽器的負荷。 ...
  • 00HTML
    一.概述 超文本標記語言（Hyper Text Markup Language），HTML是一門描述性的語言.基本語法： <標簽> 內容 </標簽>** 在一個網頁中，HTML是網頁的結構，CSS是網頁的外觀，JS是網頁的行為。 二.文檔結構 1.文檔聲明DOCTYPE 文檔聲明用於識別HTML的版 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類