jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
生活随笔
收集整理的這篇文章主要介紹了
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
day01 - jQuery
學(xué)習(xí)目標(biāo)：
能夠說出什么是 jQuery
能夠說出 jQuery 的優(yōu)點(diǎn)
能夠簡單使用 jQuery
能夠說出 DOM 對(duì)象和 jQuery 對(duì)象的區(qū)別
能夠?qū)懗龀Ｓ玫?jQuery 選擇器
能夠操作 jQuery 樣式
能夠?qū)懗龀Ｓ玫?jQuery 動(dòng)畫
1.1. jQuery 介紹
1.1.1 JavaScript 庫
? JavaScript庫：即 library，是一個(gè)封裝好的特定的集合（方法和函數(shù)）。從封裝一大堆函數(shù)的角度理解庫，就是在這個(gè)庫中，封裝了很多預(yù)先定義好的函數(shù)在里面，比如動(dòng)畫animate、hide、show，比如獲取元素等。
簡單理解： 就是一個(gè)JS 文件，里面對(duì)我們原生js代碼進(jìn)行了封裝，存放到里面。這樣我們可以快速高效的使用這些封裝好的功能了。
比如 jQuery，就是為了快速方便的操作DOM，里面基本都是函數(shù)（方法）。
? 常見的JavaScript 庫：jQuery、Prototype、YUI、Dojo、Ext JS、移動(dòng)端的zepto等，這些庫都是對(duì)原生 JavaScript 的封裝，內(nèi)部都是用 JavaScript 實(shí)現(xiàn)的，我們主要學(xué)習(xí)的是 jQuery。
1.1.2 jQuery的概念
? jQuery總體概況如下 :
-
jQuery 是一個(gè)快速、簡潔的 JavaScript 庫，其設(shè)計(jì)的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。
-
j 就是 JavaScript； Query 查詢； 意思就是查詢js，把js中的DOM操作做了封裝，我們可以快速的查詢使用里面的功能。
-
jQuery 封裝了 JavaScript 常用的功能代碼，優(yōu)化了 DOM 操作、事件處理、動(dòng)畫設(shè)計(jì)和 Ajax 交互。
-
學(xué)習(xí)jQuery本質(zhì)： 就是學(xué)習(xí)調(diào)用這些函數(shù)（方法）。
-
jQuery 出現(xiàn)的目的是加快前端人員的開發(fā)速度，我們可以非常方便的調(diào)用和使用它，從而提高開發(fā)效率。
1.1.3 jQuery的優(yōu)點(diǎn)
1.2. jQuery 的基本使用
1.2.1 jQuery 的下載
? jQuery的官網(wǎng)地址： https://jquery.com/，官網(wǎng)即可下載最新版本。
各個(gè)版本的下載：https://code.jquery.com/
? 版本介紹：
1x ：兼容 IE 678 等低版本瀏覽器， 官網(wǎng)不再更新
2x ：不兼容 IE 678 等低版本瀏覽器， 官網(wǎng)不再更新
3x ：不兼容 IE 678 等低版本瀏覽器， 是官方主要更新維護(hù)的版本
1.2.2. 體驗(yàn)jQuery
? 步驟：
- 引入jQuery文件。
- 在文檔最末尾插入 script 標(biāo)簽，書寫體驗(yàn)代碼。
- $(‘div’).hide() 可以隱藏盒子。
1.2.3. jQuery的入口函數(shù)
? jQuery中常見的兩種入口函數(shù)：
// 第一種: 簡單易用。 $(function () { ... // 此處是頁面 DOM 加載完成的入口 }) ; // 第二種: 繁瑣，但是也可以實(shí)現(xiàn) $(document).ready(function(){... // 此處是頁面DOM加載完成的入口 });? 總結(jié)：
1.2.4. jQuery中的頂級(jí)對(duì)象$
1.2.5. jQuery 對(duì)象和 DOM 對(duì)象
? 使用 jQuery 方法和原生JS獲取的元素是不一樣的，總結(jié)如下 :
注意：
只有 jQuery 對(duì)象才能使用 jQuery 方法，DOM 對(duì)象則使用原生的 JavaScirpt 方法。
1.2.6. jQuery 對(duì)象和 DOM 對(duì)象轉(zhuǎn)換
? DOM 對(duì)象與 jQuery 對(duì)象之間是可以相互轉(zhuǎn)換的。因?yàn)樵鷍s 比 jQuery 更大，原生的一些屬性和方法 jQuery沒有給我們封裝. 要想使用這些屬性和方法需要把jQuery對(duì)象轉(zhuǎn)換為DOM對(duì)象才能使用。
// 1.DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象，方法只有一種 var box = document.getElementById('box'); // 獲取DOM對(duì)象 var jQueryObject = $(box); // 把DOM對(duì)象轉(zhuǎn)換為 jQuery 對(duì)象// 2.jQuery 對(duì)象轉(zhuǎn)換為 DOM 對(duì)象有兩種方法： // 2.1 jQuery對(duì)象[索引值] var domObject1 = $('div')[0]// 2.2 jQuery對(duì)象.get(索引值) var domObject2 = $('div').get(0) <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="jquery.min.js"></script> </head><body><video src="mov.mp4" muted></video><script>// 1. DOM對(duì)象轉(zhuǎn)換為 jQuery對(duì)象// (1) 我們直接獲取視頻，得到就是jQuery對(duì)象// $('video');// (2) 我們已經(jīng)使用原生js 獲取過來 DOM對(duì)象var myvideo = document.querySelector('video');// $(myvideo).play(); jquery里面沒有play 這個(gè)方法// 2. jQuery對(duì)象轉(zhuǎn)換為DOM對(duì)象// myvideo.play();$('video')[0].play()$('video').get(0).play()</script> </body></html>總結(jié)：實(shí)際開發(fā)比較常用的是把DOM對(duì)象轉(zhuǎn)換為jQuery對(duì)象，這樣能夠調(diào)用功能更加強(qiáng)大的jQuery中的方法。
1.3. jQuery 選擇器
? 原生 JS 獲取元素方式很多，很雜，而且兼容性情況不一致，因此 jQuery 給我們做了封裝，使獲取元素統(tǒng)一標(biāo)準(zhǔn)。
1.3.1. 基礎(chǔ)選擇器
$("選擇器") // 里面選擇器直接寫 CSS 選擇器即可，但是要加引號(hào)
?
1.3.2. 層級(jí)選擇器
? 層級(jí)選擇器最常用的兩個(gè)分別為：后代選擇器和子代選擇器。
?
基礎(chǔ)選擇器和層級(jí)選擇器案例代碼
<body><div>我是div</div><div class="nav">我是nav div</div><p>我是p</p><ul><li>我是ul 的</li><li>我是ul 的</li> <li>我是ul 的</li></ul><script>$(function() {console.log($(".nav"));console.log($("ul li"));})</script> </body>1.3.3. 篩選選擇器
? 篩選選擇器，顧名思義就是在所有的選項(xiàng)中選擇滿足條件的進(jìn)行篩選選擇。常見如下 :
案例代碼
<body><ul><li>多個(gè)里面篩選幾個(gè)</li><li>多個(gè)里面篩選幾個(gè)</li><li>多個(gè)里面篩選幾個(gè)</li><li>多個(gè)里面篩選幾個(gè)</li><li>多個(gè)里面篩選幾個(gè)</li><li>多個(gè)里面篩選幾個(gè)</li></ul><ol><li>多個(gè)里面篩選幾個(gè)</li><li>多個(gè)里面篩選幾個(gè)</li><li>多個(gè)里面篩選幾個(gè)</li><li>多個(gè)里面篩選幾個(gè)</li><li>多個(gè)里面篩選幾個(gè)</li><li>多個(gè)里面篩選幾個(gè)</li></ol><script>$(function() {$("ul li:first").css("color", "red");$("ul li:eq(2)").css("color", "blue");$("ol li:odd").css("color", "skyblue");$("ol li:even").css("color", "pink");})</script> </body>另: jQuery中還有一些篩選方法，類似DOM中的通過一個(gè)節(jié)點(diǎn)找另外一個(gè)節(jié)點(diǎn)，父、子、兄以外有所加強(qiáng)。
偏重于記憶，演示代碼略。
案例：新浪下拉菜單：
1.3.4 知識(shí)鋪墊
- jQuery 設(shè)置樣式
- jQuery 里面的排他思想
- 隱式迭代
- 鏈?zhǔn)骄幊?/li>
1.3.5 案例：淘寶服飾精品案例
思路分析:
1.核心原理：鼠標(biāo)經(jīng)過左側(cè)盒子某個(gè)小li，就讓內(nèi)容區(qū)盒子相對(duì)應(yīng)圖片顯示，其余的圖片隱藏。
2.需要得到當(dāng)前小li 的索引號(hào)，就可以顯示對(duì)應(yīng)索引號(hào)的圖片
3.jQuery 得到當(dāng)前元素索引號(hào) $(this).index()
4.中間對(duì)應(yīng)的圖片，可以通過 eq(index) 方法去選擇
5.顯示元素 show() 隱藏元素 hide()
? 代碼實(shí)現(xiàn):
1.4. jQuery 樣式操作
? jQuery中常用的樣式操作有兩種：css() 和 設(shè)置類樣式方法
1.4.1. 方法1: 操作 css 方法
? jQuery 可以使用 css 方法來修改簡單元素樣式； 也可以操作類，修改多個(gè)樣式。
? 常用以下三種形式 :
// 1.參數(shù)只寫屬性名，則是返回屬性值 var strColor = $(this).css('color');// 2. 參數(shù)是屬性名，屬性值，逗號(hào)分隔，是設(shè)置一組樣式，屬性必須加引號(hào)，值如果是數(shù)字可以不用跟單位和引號(hào) $(this).css(''color'', ''red'');// 3. 參數(shù)可以是對(duì)象形式，方便設(shè)置多組樣式。屬性名和屬性值用冒號(hào)隔開， 屬性可以不用加引號(hào) $(this).css({ "color":"white","font-size":"20px"}); //如果是復(fù)合屬性則必須采取駝峰命名法，如果值不是數(shù)字，則需要加引號(hào)? 注意：
1）css() 多用于樣式少時(shí)操作，多了則不太方便。
2）如果是復(fù)合屬性則必須采取駝峰命名法，如果值不是數(shù)字，則需要加引號(hào)
1.4.2. 方法2: 設(shè)置類樣式方法
? 作用等同于以前的 classList，可以操作類樣式， 注意操作類里面的參數(shù)不要加點(diǎn)。
? 常用的三種設(shè)置類樣式方法：
// 1.添加類 $("div").addClass("current");// 2.刪除類 $("div").removeClass("current");// 3.切換類：如果已經(jīng)存在current類，則去除該類；如果不存在current類，則加上該類 $("div").toggleClass("current");? 注意：
1.4.3. 案例：tab 欄切換
思路分析:
1.點(diǎn)擊上部的li，當(dāng)前l(fā)i 添加current類，其余兄弟移除類。
2.點(diǎn)擊的同時(shí)，得到當(dāng)前l(fā)i 的索引號(hào)
3.讓下部里面相應(yīng)索引號(hào)的item顯示，其余的item隱藏
? 代碼實(shí)現(xiàn)：
1.5. jQuery 效果
? jQuery 給我們封裝了很多動(dòng)畫效果，最為常見的如下：
- 顯示隱藏：show() / hide() / toggle() ;
- 劃入畫出：slideDown() / slideUp() / slideToggle() ;
- 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
- 自定義動(dòng)畫：animate() ;
注意：
動(dòng)畫或者效果一旦觸發(fā)就會(huì)執(zhí)行，如果多次觸發(fā)，就造成多個(gè)動(dòng)畫或者效果排隊(duì)執(zhí)行。
jQuery為我們提供另一個(gè)方法，可以停止動(dòng)畫排隊(duì)：stop() ;
1.5.1. 顯示隱藏
? 顯示隱藏動(dòng)畫，常見有三個(gè)方法：show() / hide() / toggle() ;
? 語法規(guī)范如下:
代碼演示
1.5.2. 滑入滑出
? 滑入滑出動(dòng)畫，常見有三個(gè)方法：slideDown() / slideUp() / slideToggle() ;
? 語法規(guī)范如下:
代碼演示
<body><button>下拉滑動(dòng)</button><button>上拉滑動(dòng)</button><button>切換滑動(dòng)</button><div></div><script>$(function() {$("button").eq(0).click(function() {// 下滑動(dòng) slideDown()$("div").slideDown();})$("button").eq(1).click(function() {// 上滑動(dòng) slideUp()$("div").slideUp(500);})$("button").eq(2).click(function() {// 滑動(dòng)切換 slideToggle()$("div").slideToggle(500);});});</script> </body>1.5.3 淡入淡出
? 淡入淡出動(dòng)畫，常見有四個(gè)方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
? 語法規(guī)范如下:
代碼演示
案例:高亮顯示
代碼演示：
1.5.4 自定義動(dòng)畫
? 自定義動(dòng)畫非常強(qiáng)大，通過參數(shù)的傳遞可以模擬以上所有動(dòng)畫，方法為：animate() ;
? 語法規(guī)范如下:
代碼演示
1.5.5 停止動(dòng)畫排隊(duì)
? 動(dòng)畫或者效果一旦觸發(fā)就會(huì)執(zhí)行，如果多次觸發(fā)，就造成多個(gè)動(dòng)畫或者效果排隊(duì)執(zhí)行。
? 停止動(dòng)畫排隊(duì)的方法為：stop() ;
- stop() 方法用于停止動(dòng)畫或效果。
- stop() 寫到動(dòng)畫或者效果的前面， 相當(dāng)于停止結(jié)束上一次的動(dòng)畫。
? 總結(jié): 每次使用動(dòng)畫之前，先調(diào)用 stop() ,在調(diào)用動(dòng)畫。
1.5.6. 事件切換
? jQuery中為我們添加了一個(gè)新事件 hover() ; 功能類似 css 中的偽類 :hover 。介紹如下
語法
hover([over,]out) // 其中over和out為兩個(gè)函數(shù)- over:鼠標(biāo)移到元素上要觸發(fā)的函數(shù)（相當(dāng)于mouseenter）
- out:鼠標(biāo)移出元素要觸發(fā)的函數(shù)（相當(dāng)于mouseleave）
- 如果只寫一個(gè)函數(shù)，則鼠標(biāo)經(jīng)過和離開都會(huì)觸發(fā)它
hover事件和停止動(dòng)畫排列案例(新浪下拉菜單案例優(yōu)化)
1.5.7. 案例：王者榮耀手風(fēng)琴效果
思路分析:
1.鼠標(biāo)經(jīng)過某個(gè)小li 有兩步操作：
2.當(dāng)前小li 寬度變?yōu)?224px， 同時(shí)里面的小圖片淡出，大圖片淡入
3.其余兄弟小li寬度變?yōu)?9px， 小圖片淡入， 大圖片淡出
? 代碼實(shí)現(xiàn):
1.6. 今日總結(jié)
總結(jié)
以上是生活随笔為你收集整理的jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： React中的fragment和Stri
- 下一篇： Web框架——Flask系列之设置和读取