Web前端： JQuery最強(qiáng)總結(jié)（每個(gè)要點(diǎn)都附帶完全案例 詳細(xì)代碼！）

2021-4-1    前端達(dá)人

Web前端基礎(chǔ)：

Web前端工具：

概念

jQuery是一個(gè)JavaScript函數(shù)庫。jQuery是一個(gè)輕量級(jí)的"寫的少，做的多"的JavaScript庫。 jQuery庫包含以下功能:

  • HTML 元素選取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函數(shù)
  • JavaScript 特效和動(dòng)畫
  • HTML DOM 遍歷和修改
  • A JAX
  • Utilities

提示: 除此之外，jQuery還提供了大量的插件。
目前網(wǎng)絡(luò)上有大量開源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的擴(kuò)展。

知識(shí)框架

在這里插入圖片描述

安裝

版本問題

jQuery版本有很多，分為1.x 2.x 3.x
1.x版本:能夠兼容IE678瀏覽器
2.x版本:不兼容IE678瀏覽器
1.x和2.x版本jquery都不再更新版本了，現(xiàn)在只更新3.x版本。 3.x版本:不兼容IE678，更加的精簡(在國內(nèi)不流行，因?yàn)閲鴥?nèi)使用jQuery的主要目的就是兼容IE678)
國內(nèi)多數(shù)網(wǎng)站還在使用1.x的版本

該總結(jié)中所用版本為1.1的版本

下載

jQuery有兩個(gè)版本: 

生成環(huán)境使用的和開發(fā)測試環(huán)境使用的。 
Production version - 用于實(shí)際的網(wǎng)站中，已被精簡和壓縮。
Development version - 用于測試和開發(fā)(未壓縮，是可讀的代碼) 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

以上兩個(gè)版本都可以從 jquery.com 中下載。

這里給個(gè)國內(nèi)的下載地址：
JQuery 下載

jQuery的使用

jQuery 庫是一個(gè) JavaScript 文件，我們可以直接在 HTML頁面中通過script 標(biāo)簽引用它，跟引用自己的 外部JavaScript腳本文件一樣的語法。 

//將第一步中下載好的jQuery資源包進(jìn)行解壓，然后就可以飲用解壓好的.js文件 <head> <script src="jquery-1.11.1.js"></script> </head>了。 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    •

jQuery語法結(jié)構(gòu) 

jQuery 語法是通過選取 HTML 元素，并對(duì)選取的元素執(zhí)行某些操作(actions) 

    

    
  • 
        1
    
    •

基礎(chǔ)語法 

$(selector).action() 說明:美元符號(hào)定義 jQuery 選擇符(selector)"查詢"和"查找" HTML 元素 
    jQuery 的 action() 執(zhí)行對(duì)元素的操作 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    •

文檔就緒事件

文檔就緒事件，實(shí)際就是文件加載事件。

這是為了防止文檔在完全加載(就緒)之前運(yùn)行 jQuery 代碼，即在 DOM 加載完成后才可以對(duì) DOM 進(jìn)行操作。

如果在文檔沒有完全加載之前就運(yùn)行函數(shù)，操作可能失敗。 所以我們盡可能將所有的操作都在文檔加載完畢之后實(shí)現(xiàn)。

寫法一： 

$(function(){ // 開始寫 jQuery 代碼... }); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

寫法二： 

$(document).ready(function(){ // 開始寫 jQuery 代碼... }); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

jQuery的ready方法與JavaScript中的onload相似，但是也有區(qū)別 :

區(qū)別 window.onload $(document).ready()
執(zhí)行次數(shù) 只能執(zhí)行一次，如果執(zhí)行第二次，第一次的執(zhí)行會(huì)被覆蓋 可用執(zhí)行多次，不會(huì)覆蓋之前的執(zhí)行
執(zhí)行時(shí)機(jī) 必須等待網(wǎng)易全部加載挖完畢(包括圖片等)，然后再執(zhí)行包裹的代碼 只需要等待網(wǎng)頁中的DOM結(jié)果加載完 畢就可以執(zhí)行包裹的代碼
簡寫方式 無 $(function(){ });

jQuery選擇器

jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"(或選擇)HTML 元素。 它基于已經(jīng)存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。

jQuery 中所有選擇器都以美元符號(hào)開頭:$()。

元素/標(biāo)簽選擇器

Query 元素選擇器基于元素/標(biāo)簽名選取元素。
語法:$("標(biāo)簽名稱") 

<div>div1</div> <div>div2</div> <div>div3</div> <script type="text/javascript" src="js/jquery-1.11.1.js" > <script> //文檔就緒事件:  $(document).ready(function(){ //編寫jQuery  }); $(function(){ //1、標(biāo)簽選擇器: //獲取所有的div元素(集合) var divList=$("div"); console.log(divList);//jQuery的對(duì)象  console.log(divList.length); for(var i=0;i<divList.length;i++){ console.log(divList[i]);//js的對(duì)象  //將js對(duì)象轉(zhuǎn)換為jQuery的對(duì)象  console.log($(divList[i])); } }); </script> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    •

id 選擇器

jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。

頁面中元素的 id 應(yīng)該是唯一的，所以在頁面中選取唯一的元素需要通過 #id 選擇器。

通過 id 選取元素語法如下:

$("#p1")

class 選擇器

jQuery 類選擇器可以通過指定的 class 查找元素
$(".mydiv")

全局選擇器

匹配所有元素
$("*")

并集選擇器

將每一個(gè)選擇器匹配到的元素合并后一起返回
$("div,ul,li,.mydiv")

后代選擇器

在給定的祖先元素下匹配所有的后代元素
$("form input"

子選擇器

在給定的父元素下匹配所有的子元素
$("form > input")

相鄰選擇器

匹配所有緊接在 prev 元素后的 next 元素
$("label + input")

同輩選擇器

匹配 prev 元素之后的所有 siblings 元素
$("form ~ input")

屬性選擇器

jQuery中的事件 

頁面對(duì)不同訪問者的響應(yīng)叫做事件
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時(shí)所調(diào)用的方法 
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    •

常用DOM事件列表

鼠標(biāo)事件 鍵盤事件 事件 文檔/窗口事件
click keydown submit load
dblclick keyup change
mouseover focus
mouseout blur
hover

常用的 jQuery 事件方法

在 jQuery 中，大多數(shù) DOM 事件都有一個(gè)等效的 jQuery 方法


轉(zhuǎn)自：csdn論壇


藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔