<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          Web前端： JQuery最強總結（每個要點都附帶完全案例 詳細代碼?。?/h2>
				
           2021-4-1      前端達人      
          
			
          
			
          
				
          
    Web前端基礎：

          


          
    Web前端工具：

          



          
    概念

          

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

          

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

          

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

          

          
    知識框架

          

          
    在這里插入圖片描述

          

          
    安裝

          

          
    版本問題

          

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

          

          
    該總結中所用版本為1.1的版本

          

          
    下載

          

          
    jQuery有兩個版本:

          

          生成環境使用的和開發測試環境使用的。 
Production version - 用于實際的網站中，已被精簡和壓縮。
Development version - 用于測試和開發(未壓縮，是可讀的代碼) 

            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 


          

          

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

          

          
    這里給個國內的下載地址：
          
JQuery 下載

          

          
    jQuery的使用

          

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

          

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

            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 


          

          

          
    jQuery語法結構

          

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

            

    
          • 
        1
    
            • 


          

          

          
    基礎語法

          

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

            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 


          

          

          
    文檔就緒事件

          

          
    文檔就緒事件，實際就是文件加載事件。

          

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

          

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

          

          
    寫法一：

          

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

            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 


          

          

          
    寫法二：

          

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

            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 


          

          

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

          

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

          

          
    jQuery選擇器

          

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

          

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

          

          
    元素/標簽選擇器

          

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

          

          <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、標簽選擇器: //獲取所有的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對象轉換為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 應該是唯一的，所以在頁面中選取唯一的元素需要通過 #id 選擇器。

          

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

          

          
    $("#p1")

          

          
    class 選擇器

          

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

          

          
    全局選擇器

          

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

          

          
    并集選擇器

          

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

          

          
    后代選擇器

          

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

          

          
    子選擇器

          

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

          

          
    相鄰選擇器

          

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

          

          
    同輩選擇器

          

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

          

          
    屬性選擇器

          

          
    
          
        jQuery中的事件
    
          

          頁面對不同訪問者的響應叫做事件
事件處理程序指的是當 HTML 中發生某些事件時所調用的方法 
    
            

        
          • 
            1
        
            • 

        
          • 
            2
        
            • 

    
          

          
    
          
        常用DOM事件列表
    
          
    
          
        
          
            
                
          
                    
                        鼠標事件
                    
                    
                        鍵盤事件
                    
                    
                        事件
                    
                    
                        文檔/窗口事件
                    
                
          
                      
            
                
          
                    
                        click
                    
                    
                        keydown
                    
                    
                        submit
                    
                    
                        load
                    
                
          
                
          
                    
                        dblclick
                    
                    
                        keyup
                    
                    
                        change
                    
                    
                    
                
          
                
          
                    
                        mouseover
                    
                    
                    
                    
                        focus
                    
                    
                    
                
          
                
          
                    
                        mouseout
                    
                    
                    
                    
                        blur
                    
                    
                    
                
          
                
          
                    
                        hover
                    
                    
                    
                    
                    
                    
                    
                
          
                      
        
          
    
          
    
          
        常用的 jQuery 事件方法
    
          
    
          
        在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法
    
          
    
          
        
          
    
          
轉自：csdn論壇

          

          
    
          

          

          
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合