偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

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

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

[[353003]]

 前言

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

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

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

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

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

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

「流程：」

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

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

4、jQuery選擇器

「分類：」

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

「基本選擇器：」

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


「層次選擇器：」

  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后面的所有兄弟元素 

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


「過濾選擇器：」

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

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


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

 

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


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

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


表單對(duì)象屬性過濾選擇器，通過表單中的某對(duì)象屬性特征獲取該類元素，如：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="#">簡(jiǎn)化</a> 
  60.     </div> 
  61.    </div> 
  62.   </div> 
  63.  </body> 
  64. </html> 

 5、jQuery對(duì)象和DOM對(duì)象

「關(guān)系：」

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

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

jQuery和DOM對(duì)象互轉(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對(duì)象是一個(gè)數(shù)組對(duì)象 

結(jié)語(yǔ)

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

 

責(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

2017-10-27 12:28:14

云端遷移云計(jì)算

2021-08-03 11:09:41

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

2022-05-27 11:44:53

JS代碼

2010-11-11 13:41:47

2022-01-10 08:41:35

Windows 11Windows微軟

2022-05-17 09:17:45

JS 代碼越來越難讀

2024-02-21 09:44:33

Rust前端

2021-07-15 09:52:16

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

2023-03-02 08:00:55

包管理工具pnpm 包

2021-06-15 06:56:17

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

2022-03-22 16:48:04

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

2021-04-02 13:00:51

大數(shù)據(jù)數(shù)據(jù)采集

2020-09-02 09:25:23

遷移公共云數(shù)據(jù)

2011-12-01 09:33:17

Google微軟

2023-02-21 09:29:57

ChatGPT人工智能
點(diǎn)贊
收藏

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