Web前端： 前端知識總結(jié)，

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

Web前端基礎(chǔ)：

Web前端工具：

概念

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

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

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

知識框架

在這里插入圖片描述

安裝

版本問題

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有兩個版本: 

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

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

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

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

jQuery的使用

jQuery 庫是一個 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 元素，并對選取的元素執(zhí)行某些操作(actions) 

    

    
  • 
        1
    
    •

基礎(chǔ)語法 

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

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    •

文檔就緒事件

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

這是為了防止文檔在完全加載(就緒)之前運(yùn)行 jQuery 代碼，即在 DOM 加載完成后才可以對 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í)行會被覆蓋 可用執(zhí)行多次，不會覆蓋之前的執(zhí)行
執(zhí)行時機(jī) 必須等待網(wǎng)易全部加載挖完畢(包括圖片等)，然后再執(zhí)行包裹的代碼 只需要等待網(wǎng)頁中的DOM結(jié)果加載完 畢就可以執(zhí)行包裹的代碼
簡寫方式 無 $(function(){ });

jQuery選擇器

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

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

元素/標(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的對象  console.log(divList.length); for(var i=0;i<divList.length;i++){ console.log(divList[i]);//js的對象  //將js對象轉(zhuǎn)換為jQuery的對象  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")

全局選擇器

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

并集選擇器

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

后代選擇器

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

子選擇器

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

相鄰選擇器

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

同輩選擇器

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

屬性選擇器

匹配包含給定屬性的元素 

$("div[id]");//獲取所有有id屬性的div的元素集合  $("div[class]");//獲取所有有class屬性的div的元素集合  $("input[name='userName']");//獲取所有input標(biāo)簽中name屬性是userName元素的集合  $("input[name^='user']");//獲取所有input標(biāo)簽中name屬性是user開頭的元素的集合  $("input[name$='user']");//獲取所有input標(biāo)簽中name屬性是user結(jié)尾的元素的集合  $("input[name*='user']");//獲取所有input標(biāo)簽中name屬性包含了user的元素的集合  $("input[id][name^='user']"); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    •

可見性選擇器

匹配所有的可見或不可見的元素
$("div:visible");
$("input:hidden");

所有選擇器的案例


<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>選擇器</title> <script type="text/javascript" src="js/jquery-1.11.1.js" ></script> <script> //1、標(biāo)簽選擇器： function htmlSelector(){ //獲取所有的div元素（集合） var divList=$("div"); console.log(divList);//jQuery的對象 console.log(divList.length); for(var i=0;i<divList.length;i++){ console.log(divList[i]);//js的對象 //將js對象轉(zhuǎn)換為jQuery的對象 console.log($(divList[i])); } } //2、id選擇器 function idSelector(){ //根據(jù)id獲取到的元素是惟一的，即使頁面上有重名的id，獲取的是第一個 var p=$("#p1"); console.log(p.html()); } //3、.class選擇器 function classSelector(){ var list=$(".mydiv"); console.log(list.length); } //4、 全局選擇器 function allSelector(){ var list=$("*");//包括了html、head、title.....所有標(biāo)簽 console.log(list.length); for(var i=0;i<list.length;i++){ console.log(list[i]);//js的對象 } } //5、并集選擇器 function andSelector(){ var list=$(".mydiv,p,li"); printList(list); } //6、后代選擇器:包括所有的后代，兒子和孫子輩都有 function subSelector(){ var list=$("form input"); printList(list); } //7、子選擇器：只有子元素 function sunSelector(){ var list=$("form>input"); printList(list); } //8、相鄰選擇器 function nextSelector(){ var list=$("label + input"); printList(list); } //9、同輩選擇器 function sublingsSelector(){ var list=$("form ~ div"); printList(list); } //10、屬性選擇器 function attrSelector(){ var list=$("div[id]");//獲取所有有id屬性的div的元素集合 list=$("div[class]");//獲取所有有class屬性的div的元素集合 list=$("input[name='userName']");//獲取所有input標(biāo)簽中name屬性是userName元素的集合 list=$("input[name^='user']");//獲取所有input標(biāo)簽中name屬性是user開頭的元素的集合 list=$("input[name$='user']");//獲取所有input標(biāo)簽中name屬性是user結(jié)尾的元素的集合 list=$("input[name*='user']");//獲取所有input標(biāo)簽中name屬性包含了user的元素的集合 list=$("input[id][name^='user']");//獲取所有input標(biāo)簽中既有id屬性又有name屬性以user開頭的元素的集合 printList(list); } //11、可見性選擇器 function seeSelector(){ //匹配所有的可見div元素 var list=$("div:visible"); //匹配所有的不可見div元素 var list=$("div:hidden"); //匹配所有的不可見input元素,樣式有display：none的元素和type=hidden的元素 list=$("input:hidden"); printList(list); } //文檔就緒事件：頁面加載完畢之后執(zhí)行： $(function(){ seeSelector(); }); //打印集合 function printList(list){ for(var i=0;i<list.length;i++){ console.log(list[i]); console.log(list[i].innerHTML);//非表單項(xiàng)元素使用該種方式輸出 console.log(list[i].value);//只有表單項(xiàng)元素才有value } } </script> </head> <body> <form> <label>用戶名：</label> <input type="hidden" name="userId" value="1001" /> <input style="display: none;" value="隱藏的input" /> <input id="userName" name="userName" value="jiaobaoyu" /><br /> <label>密碼：</label> <input name="userPass" type="password" value="1234567"/><br /> <fieldset> 電話：<input id="phone" name="phoneuser" value="13712345789"/><br /> 郵箱：<input name="emailuser" type="email" value="lina@sina.com" /> </fieldset> </form> 地址：<input name="addressuser1" value="北京" /><br /> <ul> <li>li111111</li> <li>li111111</li> <li>li111111</li> </ul> <p id="p1">p111111111111</p> <div id="div1" class="mydiv" style="display: none;" >div1</div> <div class="mydiv">div2</div> <div id="div3">div3</div> </body> </html>


jQuery中的事件 

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

        
  • 
            1
        
    • 

        
  • 
            2
        
    •

常用DOM事件列表

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

常用的 jQuery 事件方法

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

日歷

鏈接

個人資料

存檔