自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

技術(shù)越來越新，我對老朋友JQUERY還是一如既往熱愛

作者：淺羽Eric
開發(fā) 前端
所以本文帶大家一起回憶那些jQuery的點點滴滴，也為我們前端知識打個牢固的技術(shù)基礎(chǔ)。

[[353003]]

 前言

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

1、了解jQuery

「背景：」

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

「宗旨：」

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

「簡介：」

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

2、jQuery的基本功能

「功能：」

1.訪問和操作DOM元素

2.控制頁面樣式

3.對頁面事件的處理

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

5.大量插件在頁面中的運用

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

「流程：」

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

  1. jQuery其實就是一個JavaScript文件，因此，搭建jQuery開發(fā)環(huán)境十分簡單 
  2. <script type="text/javascript" src="js/jquery-1.8.2.js"></script> 
  3. jar包\jQuery 

4、jQuery選擇器

「分類：」

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

「基本選擇器：」

  1. 基本選擇器是jQuery中使用最頻繁的選擇器，它由元素ID、Class、元素名、多個選擇符組成，通過基本選擇器可以實現(xiàn)大多數(shù)頁面元素的查找 
  • 案例：通過不同的選擇器來控制頁面元素的展示


「層次選擇器：」

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

案例：通過不同的選擇器來控制頁面元素的展示


「過濾選擇器：」

  • 過濾選擇器根據(jù)某類過濾規(guī)則進行元素的匹配，書寫時都以冒號(:)開頭

簡單過濾器是使用最廣泛的一種，ps：隔行變色


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

 

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


子元素過濾選擇器，注意：nth-child索引從1開始

 表單選擇器，專為表單量身打造，通過它可以在頁面中快速定位某表單對象


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


「選擇器綜合案例：」

整體如下：



代碼如下

  1. <!DOCTYPE html> 
  2. <html> 
  3.  <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>選擇</title> 
  6.   <style type="text/css"> 
  7.    body{font-size:13px} 
  8.           #all{border:solid 1px #666;width:320px;overflow:hidden} 
  9.           #all #head{background-color:#eee;padding:8px;height:18px;cursor:hand} 
  10.           #all #head h3{padding:0px;margin:0px;float:left} 
  11.           #all #head span{float:right;margin-top:3px} 
  12.           #all #content{padding:8px} 
  13.           #all #content ul {list-style-type:none;margin:0px;padding:0px} 
  14.           #all #content ul li{ float:left;width:95px;height:23px;line-height:23px} 
  15.           #all #btn{float:right;padding-top:5px;padding-bottom:5px} 
  16.   </style> 
  17.   <script type="text/javascript" src="../js/jquery-1.8.2.js"> 
  18.   </script> 
  19.   <script type="text/javascript"> 
  20.    $(function(){ 
  21.      
  22.    }) 
  23.   </script> 
  24.  </head> 
  25.  <body> 
  26.   <div id="all"> 
  27.    <div id="head"> 
  28.     <h3>學(xué)科分類</h3> 
  29.     <span><img src="../img/close.gif"/></span> 
  30.    </div> 
  31.    <div id="content"> 
  32.     <ul> 
  33.      <li> 
  34.       <a href="#">JavaEE</a><i> (1110) </i></li> 
  35.      <li> 
  36.       <a href="#">PHP</a><i> (230) </i></li> 
  37.      <li> 
  38.       <a href="#">BIG</a><i> (1430) </i></li> 
  39.      <li> 
  40.       <a href="#">Android</a><i> (1560) </i></li> 
  41.      <li> 
  42.       <a href="#">IOS</a><i> (870) </i></li> 
  43.      <li> 
  44.       <a href="#">H5</a><i> (1460) </i></li> 
  45.      <li> 
  46.       <a href="#">VR</a><i> (1450) </i></li> 
  47.      <li> 
  48.       <a href="#">小程序</a><i> (1780) </i></li> 
  49.      <li> 
  50.       <a href="#">演講</a><i> (930) </i></li> 
  51.      <li> 
  52.       <a href="#">PPT</a><i> (3450) </i></li> 
  53.      <li> 
  54.       <a href="#">Word</a><i> (980) </i></li> 
  55.      <li> 
  56.       <a href="#">其他</a><i> (3230) </i></li> 
  57.     </ul> 
  58.     <div id="btn"> 
  59.      <a href="#">簡化</a> 
  60.     </div> 
  61.    </div> 
  62.   </div> 
  63.  </body> 
  64. </html> 

 5、jQuery對象和DOM對象

「關(guān)系：」

  • jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象
  • 注意：jQuery對象是包裝DOM對象后產(chǎn)生的，但是jQuery無法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery里的方法

「具體轉(zhuǎn)換：」

jQuery和DOM對象互轉(zhuǎn)

  1. DOM轉(zhuǎn)換成jQuery 
  2.  
  3. var username = document.getElementById("username"); 
  4.  
  5. var $username = jQuery(username); 
  6.  
  7. jQuery轉(zhuǎn)換成DOM 
  8.  
  9. var $username = jQuery("#username"); 
  10.  
  11. var username = $username[0];  //jQuery對象是一個數(shù)組對象 

結(jié)語

本篇關(guān)于jQuery的的介紹就先到這里結(jié)束了，后續(xù)會出jQuery動畫、Ajax、jQuery操作DOM以及jQuery事件的文章，敬請期待，謝謝大家支持!

 

責(zé)任編輯：姜華 來源： 淺羽的IT小屋
jQuery
相關(guān)推薦

2011-11-18 15:28:59

聯(lián)想筆記本

2021-04-15 13:48:08

視頻監(jiān)控視頻分析智能安防

2020-12-24 10:46:13

Nova8Vlog華為

2021-01-06 10:30:29

編程軟件數(shù)據(jù)

2017-12-26 15:34:55

2010-11-11 13:41:47

2021-07-15 09:52:16

工信部5G應(yīng)用通信技術(shù)

2024-02-21 09:44:33

Rust前端

2022-05-17 09:17:45

JS 代碼越來越難讀

2021-08-03 11:09:41

智能手機功能技術(shù)

2017-10-27 12:28:14

云端遷移云計算

2022-05-27 11:44:53

JS代碼

2022-01-10 08:41:35

Windows 11Windows微軟

2021-06-15 06:56:17

安卓系統(tǒng)應(yīng)用手機卡頓

2022-03-22 16:48:04

云技術(shù)開源應(yīng)用云服務(wù)

2023-03-02 08:00:55

包管理工具pnpm 包

2018-08-23 07:24:40

MEC多接入邊緣計算網(wǎng)絡(luò)邊緣

2010-07-08 09:03:20

openSUSE 11Fedora

2019-10-28 15:10:31

懶人剪輯運動相機移動應(yīng)用

2021-05-18 15:12:06

開源軟件云服務(wù)
點贊
收藏

51CTO技術(shù)棧公眾號