日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 前言

最近在搭建完善自己的博客，需要用到一些頁(yè)面樣式之類的，就特意問(wèn)了一下女朋友一個(gè)問(wèn)題，關(guān)于Web前端開(kāi)發(fā)，jQuery現(xiàn)在過(guò)時(shí)了嘛?她毅然決然告訴我，那是我們前端現(xiàn)在的鄙視鏈。是的，不可否認(rèn)，現(xiàn)在框架盛行，jQuery早已被GitHub所遺棄。我依稀記得，兩年前，我學(xué)前端知識(shí)，覺(jué)得這個(gè)框架真的很好，以后有時(shí)間，一定要好好學(xué)一下它。也就這么點(diǎn)時(shí)間，它早已淡出了前端開(kāi)發(fā)者的視線。不過(guò)呢，我身為后端開(kāi)發(fā)，也就是一個(gè)新人于前端來(lái)說(shuō)，所以我還是很喜歡jQuery的思想，因?yàn)樽屛抑苯永斫釼ue/React的話，還是需要大量時(shí)間的，所以認(rèn)為jQuery是一個(gè)不錯(cuò)的過(guò)渡選擇，也可以學(xué)習(xí)下前端編程思想，我看中了它的人性化以及可讀性很強(qiáng)，對(duì)于我們來(lái)說(shuō)也很簡(jiǎn)單，所以本文帶大家一起回憶那些jQuery的點(diǎn)點(diǎn)滴滴，也為我們前端知識(shí)打個(gè)牢固的技術(shù)基礎(chǔ)。

1、了解jQuery

「背景：」

• Query查詢的意思，jQuery就是用javascript更方便的查詢和控制頁(yè)面組件

「宗旨：」

• 設(shè)計(jì)宗旨：Write Less，Do More，即提倡寫更少的代碼，做更多的事

「簡(jiǎn)介：」

• jQuery封裝JavaScript常用的功能代碼，提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動(dòng)畫設(shè)計(jì)和Ajax交互
• 支持鏈?zhǔn)綄懛?，?duì)css樣式支持接近完美
• 集JavaScript、CSS、DOM、Ajax于一體的強(qiáng)大框架體系

2、jQuery的基本功能

「功能：」

1.訪問(wèn)和操作DOM元素

2.控制頁(yè)面樣式

3.對(duì)頁(yè)面事件的處理

4.與Ajax技術(shù)的完美結(jié)合

5.大量插件在頁(yè)面中的運(yùn)用

3、搭建jQuery開(kāi)發(fā)環(huán)境

「流程：」

• 準(zhǔn)備兩份文件如下：

 
 
 
 

  
  
  
  
jQuery其實(shí)就是一個(gè)JavaScript文件，因此，搭建jQuery開(kāi)發(fā)環(huán)境十分簡(jiǎn)單 
  
  
  
  
 
  
  
  
  
jar包\jQuery 
 
 
 
 

4、jQuery選擇器

「分類：」

• 基本選擇器、層次選擇器、過(guò)濾選擇器(表單選擇器)

「基本選擇器：」

 
 
 
 

  
  
  
  
基本選擇器是jQuery中使用最頻繁的選擇器，它由元素ID、Class、元素名、多個(gè)選擇符組成，通過(guò)基本選擇器可以實(shí)現(xiàn)大多數(shù)頁(yè)面元素的查找 
 
 
 
 

• 案例：通過(guò)不同的選擇器來(lái)控制頁(yè)面元素的展示

「層次選擇器：」

 
 
 
 

  
  
  
  
層次選擇器通過(guò)DOM元素間的層次關(guān)系獲取元素，其主要的層次關(guān)系包括后代、父子、相鄰、兄弟關(guān)系，通過(guò)其中某類關(guān)系可以方便快捷地定位元素 
  
  
  
  
選擇器  功能描述 
  
  
  
  
ancestor descendant  根據(jù)祖先元素匹配所有的后代元素 
  
  
  
  
parent＞child  根據(jù)父元素匹配所有的子元素 
  
  
  
  
prev+next  匹配prev后的相鄰元素 
  
  
  
  
prev～siblings  匹配prev后面的所有兄弟元素 
 
 
 
 

案例：通過(guò)不同的選擇器來(lái)控制頁(yè)面元素的展示

「過(guò)濾選擇器：」

• 過(guò)濾選擇器根據(jù)某類過(guò)濾規(guī)則進(jìn)行元素的匹配，書寫時(shí)都以冒號(hào)(:)開(kāi)頭

簡(jiǎn)單過(guò)濾器是使用最廣泛的一種，ps：隔行變色

可見(jiàn)性過(guò)濾選擇器，根據(jù)元素是否可見(jiàn)的特征獲取元素，ps：尋找頁(yè)面被隱藏的元素

屬性過(guò)濾選擇器，根據(jù)元素的某個(gè)屬性獲取元素，如ID號(hào)或匹配屬性值的內(nèi)容，并以“[”號(hào)開(kāi)始，以“]”結(jié)束，ps：最后一個(gè)是復(fù)合屬性選擇器

子元素過(guò)濾選擇器，注意：nth-child索引從1開(kāi)始

 表單選擇器，專為表單量身打造，通過(guò)它可以在頁(yè)面中快速定位某表單對(duì)象

表單對(duì)象屬性過(guò)濾選擇器，通過(guò)表單中的某對(duì)象屬性特征獲取該類元素，如：enabled、disabled、checked、selected屬性

「選擇器綜合案例：」

整體如下：

代碼如下

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
  
  
  
  
  
   
  
  
  
  
   
  
  
  
  
   
  
  
  
  
   body{font-size:13px} 
  
  
  
  
          #all{border:solid 1px #666;width:320px;overflow:hidden} 
  
  
  
  
          #all #head{background-color:#eee;padding:8px;height:18px;cursor:hand} 
  
  
  
  
          #all #head h3{padding:0px;margin:0px;float:left} 
  
  
  
  
          #all #head span{float:right;margin-top:3px} 
  
  
  
  
          #all #content{padding:8px} 
  
  
  
  
          #all #content ul {list-style-type:none;margin:0px;padding:0px} 
  
  
  
  
          #all #content ul li{ float:left;width:95px;height:23px;line-height:23px} 
  
  
  
  
          #all #btn{float:right;padding-top:5px;padding-bottom:5px} 
  
  
  
  
   
  
  
  
  
   
  
  
  
  
   
  
  
  
  
  
  
  
  
  
  
  
  
  
  
   
  
  
  
  
    
  
  
  
  
    
學(xué)科分類