17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
生活随笔
收集整理的這篇文章主要介紹了
17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 一、Jquery介紹:
- 1. JavaScript 庫:
- 2 jQuery的概念
- 3. jQuery的優點
- 二、jQuery 的基本使用:
- 1. jQuery 的下載
- 2. 體驗jQuery
- 3. jQuery的入口函數
- 4. jQuery中的頂級對象$
- 5. jQuery 對象和 DOM 對象
- 6. jQuery 對象和 DOM 對象轉換
- 三、jQuery選擇器:
- 1. 基礎選擇器
- 2. 層級選擇器
- 3. 篩選選擇器
- 4. 其他:
- 5. 案例:
- 5.1 案例:新浪下拉菜單:
- 5.2 案例：淘寶服飾精品案例:
- 四、jQuery 樣式操作:
- 1. 方法1: 操作 css 方法
- 2. 方法2: 設置類樣式方法
- 3. 案例：tab 欄切換:
- 五、jQuery 效果:
- 1. 顯示隱藏:
- 1.1 show:
- 1.2 hide:
- 1.3 toggle:
- 1.4 代碼演示:
- 2. 滑入滑出
- 2.1 下滑: slideDown
- 2.2 上滑: slideUp
- 2.3 滑動切換: slideToggle
- 2.4 代碼演示:
- 3.事件切換:
- 3.1 語法:
- 3.2 案例: hover事件和停止動畫排列:
- 4.動畫隊列及其停止方法:
- 4.1 動畫或效果隊列:
- 4.2 停止排隊:
- 5. 淡入淡出
- 5.1 淡入:fadeIn
- 5.2 淡出:fadeOut
- 5.3 淡入淡出:fadeToggle
- 5.3 漸進:fadeTo
- 5.4 代碼演示:
- 5.4 案例: 高亮選擇:
- 6. 自定義動畫
- 6.1 語法:
- 6.2 參數:
- 7. 案例：王者榮耀手風琴效果
- 7.1 分析:
- 7.2 實現:
一、Jquery介紹:
1. JavaScript 庫:
JavaScript庫: 即library, 是一個封裝好的特定的集合(方法和函數). 從封裝一大推函數角度理解庫, 就是在這個庫中，封裝了很多預先定義好的函數在里面，比如動畫animate、hide、show，比如獲取元素等.
簡單理解： 就是一個JS 文件，里面對原生js代碼進行了封裝，存放到里面. 這樣可以快速高效的使用這些封裝好的功能了;
比如 jQuery，就是為了快速方便的操作DOM，里面基本都是函數(方法);
常見庫:
- juery;
- Prototype;
- YUI;
- Dojo;
- Ext JS;
- 移動端的zepto;
2 jQuery的概念
jQuery總體概況如下 :
- jQuery 是一個快速、簡潔的 JavaScript 庫，其設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情;
- j 就是 JavaScript； Query 查詢； 意思就是查詢js，把js中的DOM操作做了封裝，可以快速的查詢使用里面的功能;
- jQuery 封裝了 JavaScript 常用的功能代碼，優化了 DOM 操作、事件處理、動畫設計和 Ajax 交互;
- 學習jQuery本質： 就是學習調用這些函數(方法);
- jQuery 出現的目的是加快前端人員的開發速度，可以非常方便的調用和使用它，從而提高開發效率;
3. jQuery的優點
- 輕量級. 核心文件才幾十kb，不會影響頁面加載速度;
- 跨瀏覽器兼容，基本兼容了現在主流的瀏覽器;
- 鏈式編程、隱式迭代;
- 對事件、樣式、動畫支持，大大簡化了DOM操作;
- 支持插件擴展開發. 有著豐富的第三方的插件，例如: 樹形菜單、日期控件、輪播圖等;
- 免費、開源;
二、jQuery 的基本使用:
1. jQuery 的下載
jQuery的官網地址： https://jquery.com/，官網即可下載最新版本；
各個版本的下載：[https://code.jquery.com/](https://code.jquery.com/)版本介紹：
- 1x ：兼容 IE 678 等低版本瀏覽器， 官網不再更新;
- 2x ：不兼容 IE 678 等低版本瀏覽器， 官網不再更新;
- 3x ：不兼容 IE 678 等低版本瀏覽器， 是官方主要更新維護的版本;
2. 體驗jQuery
步驟：
- 引入jQuery文件；
- 文檔最末尾插入 script 標簽，書寫體驗代碼；
- (‘div’).hide() 可以隱藏盒子
3. jQuery的入口函數
jQuery中常見的兩種入口函數：
- 第一種: 簡單易用；
- 第二種: 繁瑣，但是也可以實現
總結:
- 等著 DOM 結構渲染完畢即可執行內部代碼，不必等到所有外部資源加載完成，jQuery 完成了封裝;
- 相當于原生 js 中的 DOMContentLoaded;
- 不同于原生 js 中的 load 事件是等頁面文檔、外部的 js 文件、css文件、圖片加載完畢才執行內部代碼;
- 更推薦使用第一種方式;
4. jQuery中的頂級對象$
- $ 是 jQuery 的別稱，在代碼中可以使用 jQuery 代替，但一般為了方便，通常都直接使用 $ ;
- $ 是jQuery的頂級對象，相當于原生JavaScript中的 window.把元素利用$ 包裝成jQuery對象，就可以調用jQuery 的方法;
5. jQuery 對象和 DOM 對象
使用 jQuery 方法和原生JS獲取的元素是不一樣的，總結如下 :
- 用原生 JS 獲取來的對象就是 DOM 對象
- jQuery 方法獲取的元素就是 jQuery 對象；
- jQuery 對象本質是: 利用$對DOM 對象包裝后產生的對象(偽數組形式存儲);
注意:
- 只有 jQuery 對象才能使用 jQuery 方法, DOM 對象則使用原生的 JavaScirpt 方法.
6. jQuery 對象和 DOM 對象轉換
DOM 對象與 jQuery 對象之間是可以相互轉換的. 因為原生js 比 jQuery 更大，原生的一些屬性和方法 jQuery沒有封裝. 要想使用這些屬性和方法需要把jQuery對象轉換為DOM對象才能使用.
// 1.DOM對象轉換成jQuery對象，方法只有一種 var box = document.getElementById('box'); // 獲取DOM對象 var jQueryObject = $(box); // 把DOM對象轉換為 jQuery 對象// 2.jQuery 對象轉換為 DOM 對象有兩種方法： // 2.1 jQuery對象[索引值] var domObject1 = $('div')[0]// 2.2 jQuery對象.get(索引值) var domObject2 = $('div').get(0)總結：實際開發比較常用的是把DOM對象轉換為jQuery對象, 這樣能夠調用功能更加強大的jQuery中的方法
三、jQuery選擇器:
原生 JS 獲取元素方式很多，很雜，而且兼容性情況不一致，因此 jQuery 做了封裝，使獲取元素統一標準;
隱式迭代就是把匹配到哦所有元素內部進行循環遍歷一遍;
1. 基礎選擇器
$("選擇器") // 里面選擇器直接寫 CSS 選擇器即可，但是要加引號| ID選擇器 | $("#id"); | 獲取指定ID的元素 |
| 全選擇器 | $("*") | 匹配所有的元素 |
| 類選擇器 | $(“class”) | 獲取同一類class的元素 |
| 標簽選擇器 | $(“div”) | 獲取同一類標簽的所有元素 |
| 并集選擇器 | $(“div,p,li”) | 獲取多個元素 |
| 交集選擇器 | $(“li.current”) | 交集選擇器 |
2. 層級選擇器
?層級選擇器最常用的兩個分別為：后代選擇器和子代選擇器;
| 子代選擇器 | $(“ul>li”) | 使用>號, 獲取親子層級的元素; 注意, 并不會獲取孫子層級的元素 |
| 后代原則器 | $(“ul li”) | 使用空格, 代表后代選擇器, 獲取ul下所有li元素, 包括孫子等 |
基礎選擇器和層級選擇器案例代碼
<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>3. 篩選選擇器
?篩選選擇器，顧名思義就是在所有的選項中選擇滿足條件的進行篩選選擇.常見如下 :
| :first | $(“li:first”) | 獲取第一個li元素 |
| :last | $(“li:last”) | 獲取最后一個li元素 |
| :eq(index | $(“li:eq(2)”) | 獲取li元素中索引為2的li元素, 索引號從0開始 |
| :odd | $(“li:odd”) | 獲取li元素中索引號為奇數的元素 |
| :even | $(“li:even”) | 獲取li元素中索引號為偶數的元素 |
案例代碼:
<body><ul><li>多個里面篩選幾個</li><li>多個里面篩選幾個</li><li>多個里面篩選幾個</li><li>多個里面篩選幾個</li><li>多個里面篩選幾個</li><li>多個里面篩選幾個</li></ul><ol><li>多個里面篩選幾個</li><li>多個里面篩選幾個</li><li>多個里面篩選幾個</li><li>多個里面篩選幾個</li><li>多個里面篩選幾個</li><li>多個里面篩選幾個</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中的通過一個節點找另外一個節點, 父、子、兄以外有所加強;
| parent() | $(“li”).parent(); | 查找父級 |
| chileren(selector) | $(“ul”).children(“li”); | 相當于$(“ul>li”), 最近一級(親兒子) |
| find(selector) | $(“ul”).find(“li”); | 相當于$(“ul li”), 后代選擇器 |
| siblings(selector) | $(".first").siblings(“li”) | 查找兄弟節點, 不包括自己本身 |
| nextAll([expr]) | $(".first").nextAll() | 查找當前元素之后所有的同輩元素 |
| prevAll([expr]) | $(’.last’).prevAll() | 查找當前元素之前所有的同輩元素 |
| hasClass(class) | $(“div”).hasClass(“protected”) | 檢查當前元素是否含有某個特定的類,如果有,則返回true |
| eq(index) | $(“li”).eq(2); | 相當于$(“li:eq(2)”); index從0開始 |
4. 其他:
- jQuery 設置樣式
- jQuery 里面的排他思想
- 隱式迭代:
- 鏈式編程:
5. 案例:
5.1 案例:新浪下拉菜單:
<head><title>新浪下拉菜單</title><script src="./jquery-3.5.0.min.js"></script><style>* {margin: 0;padding: 0;}li{list-style: none;}a {text-decoration: none;font-size: 14px;}.nav {margin: 100px;}.nav>li {position: relative;float: left;width: 80px;height: 41px;text-align: center;}.nav li a{display: block;width: 100%;height: 100%;line-height: 41px;color: #333;}.nav>li>a:hover {background-color: #eee;}.nav ul {display: none;position: absolute;top: 41px;left: 0;width: 100%;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.nav ul li {border-bottom: 1px solid #FECC5B;}.nav ul li a:hover {background-color: #FFF5DA;}</style><script>$(function() {// 鼠標經過$(".nav>li").mouseover(function() {$(this).children('ul').show()})// 鼠標離開$(".nav>li").mouseleave(function() {$(this).children('ul').hide()})})</script> </head> <body><ul class="nav"><li><a href="#">微博</a><ul><li> <a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li> <a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li> <a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li> <a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li></ul> </body>5.2 案例：淘寶服飾精品案例:
思路分析:
- 核心原理: 鼠標經過左側盒子某個小li，就讓內容區盒子相對應圖片顯示，其余的圖片隱藏;
- 需要得到當前小li 的索引號，就可以顯示對應索引號的圖片
- jQuery 得到當前元素索引號 $(this).index()
- 中間對應的圖片，可以通過 eq(index) 方法去選擇
- 顯示元素 show() 隱藏元素 hide()
實現:
<head><title>淘寶精品</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}a {text-decoration: none;}.wrapper {width: 250px;height: 248px;margin: 100px auto 0;border: 1px solid pink;border-right: 0;overflow: hidden;}#left,#content {float: left;}#left li {background: url(images/lili.jpg) repeat-x;}#left li a {display: block;width: 48px;height: 27px;border-bottom: 1px solid pink;line-height: 27px;text-align: center;color: #000;}#left li a:hover {background-image: url(./images/abg.gif);}#content {border-left: 1px solid pink;border-right: 1px solid pink;}</style><script src="../jquery-3.5.0.js"></script><script>$(function() {$('#left li').mouseover(function() {// 獲取li的索引號var index = $(this).index();// 讓對應的圖片顯示出來, 其他的隱藏$('#content div').eq(index).show().siblings().hide()})})</script> </head> <body><div class="wrapper"><ul id="left"><li><a href="#">女靴</a></li><li><a href="#">雪地靴</a></li><li><a href="#">冬裙</a></li><li><a href="#">呢大衣</a></li><li><a href="#">毛衣</a></li><li><a href="#">棉服</a></li><li><a href="#">女褲</a></li><li><a href="#">羽絨服</a></li><li><a href="#">牛仔褲</a></li></ul><div id="content"><div><a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/女褲.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/羽絨服.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/牛仔褲.jpg" width="200" height="250" /></a></div></div></div> </body>四、jQuery 樣式操作:
? jQuery中常用的樣式操作有兩種：css() 和 設置類樣式方法
1. 方法1: 操作 css 方法
jQuery 可以使用 css 方法來修改簡單元素樣式； 也可以操作類，修改多個樣式;
常用以下三種形式 :
- 參數只寫屬性名，則是返回屬性值
- 參數是屬性名，屬性值，逗號分隔，是設置一組樣式，屬性必須加引號，值如果是數字可以不用跟單位和引號:
注意：css() 多用于樣式少時操作，多了則不太方便
2. 方法2: 設置類樣式方法
作用等同于以前的 classList，可以操作類樣式， 注意操作類里面的參數不要加點;
常用的三種設置類樣式方法：
- 添加類
- 刪除類:
- 切換類:
注意：
- 設置類樣式方法比較適合樣式多時操作，可以彌補css()的不足;
- 原生 JS 中 className 會覆蓋元素原先里面的類名，jQuery 里面類操作只是對指定類進行操作，不影響原先的類名;
3. 案例：tab 欄切換:
思路分析:
- 點擊上部的li，當前li 添加current類，其余兄弟移除類;
- 點擊的同時，得到當前li 的索引號;
- .讓下部里面相應索引號的item顯示，其余的item隱藏;
實現:
<head><title>tab欄切換</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.tab {width: 978px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none;}</style><script src="./jquery-3.5.0.js"></script><script>$(function() {$('.tab_list li').click(function() {$(this).addClass('current').siblings().removeClass('current');// 獲取索引號var index = $(this).index();// 讓下部里面相應搜索引號的item顯示, 其余隱藏$('.tab_con .item').eq(index).show().siblings().hide();});})</script> </head> <body><div class="tab"><div class="tab_list"><ul><li class="current">商品介紹</li><li>規格與包裝</li><li>售后保障</li><li>商品評價（50000）</li><li>手機社區</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介紹模塊內容</div><div class="item">規格與包裝模塊內容</div><div class="item">售后保障模塊內容</div><div class="item">商品評價（50000）模塊內容</div><div class="item">手機社區模塊內容</div></div></div> </body>五、jQuery 效果:
jQuery 封裝了很多動畫效果，最為常見的如下：
- 顯示隱藏：show() / hide() / toggle() ;
- 劃入畫出：slideDown() / slideUp() / slideToggle() ;
- 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
- 自定義動畫：animate() ;
注意:
- 動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行;
- jQuery提供另一個方法，可以停止動畫排隊: stop();
1. 顯示隱藏:
顯示隱藏動畫，常見有三個方法: show() / hide() / toggle() ;
1.1 show:
語法規范如下:
顯示語法規范:
顯示參數:
- 參數都可以省略, 無動畫直接顯示;
- speed: 三種預定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示動畫時長的毫秒數值(如:1000);
- easing: (Optional)用來指定切換效果, 默認是"swing", 可用參數"linear";
- fn: 回調函數, 在動畫完成時執行的函數, 每個元素執行 一次;
1.2 hide:
隱藏語法規范:
hide([speed, [easing], [fn]])隱藏參數:
- 參數都可以省略, 無動畫直接顯示;
- speed: 三種預定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示動畫時長的毫秒數值(如:1000);
- easing: (Optional)用來指定切換效果, 默認是"swing", 可用參數"linear";
- fn: 回調函數, 在動畫完成時執行的函數, 每個元素執行 一次;
1.3 toggle:
切換語法規范:
toggle([speed, [easing], [fn]])切換參數:
- 參數都可以省略, 無動畫直接顯示;
- speed: 三種預定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示動畫時長的毫秒數值(如:1000);
- easing: (Optional)用來指定切換效果, 默認是"swing", 可用參數"linear";
- fn: 回調函數, 在動畫完成時執行的函數, 每個元素執行 一次;
1.4 代碼演示:
<body><button>顯示</button><button>隱藏</button><button>切換</button><div></div><script>$(function() {$("button").eq(0).click(function() {$("div").show(1000, function() {alert(1);});})$("button").eq(1).click(function() {$("div").hide(1000, function() {alert(1);});})$("button").eq(2).click(function() {$("div").toggle(1000);})// 一般情況下，都不加參數直接顯示隱藏就可以了});</script> </body>2. 滑入滑出
滑入滑出動畫，常見有三個方法：slideDown() / slideUp() / slideToggle() ;? 語法規范如下:
2.1 下滑: slideDown
下滑效果語法規范:
slideDown([speed, [easing], [fn]])下滑效果參數:
- 參數都可以省略;
- speed: 三種預定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示動畫時長的毫秒數值(如:1000);
- easing: (Optional)用來指定切換效果, 默認是"swing", 可用參數"linear";
- fn: 回調函數, 在動畫完成時執行的函數, 每個元素執行 一次;
2.2 上滑: slideUp
下滑效果語法規范:
slideUp([speed, [easing], [fn]])上滑效果參數:
- 參數都可以省略;
- speed: 三種預定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示動畫時長的毫秒數值(如:1000);
- easing: (Optional)用來指定切換效果, 默認是"swing", 可用參數"linear";
- fn: 回調函數, 在動畫完成時執行的函數, 每個元素執行 一次;
2.3 滑動切換: slideToggle
** 滑動切換效果語法規范:**
slideToggle([speed, [easing], [fn]])滑動切換效果參數:
- 參數都可以省略;
- speed: 三種預定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示動畫時長的毫秒數值(如:1000);
- easing: (Optional)用來指定切換效果, 默認是"swing", 可用參數"linear";
- fn: 回調函數, 在動畫完成時執行的函數, 每個元素執行 一次;
2.4 代碼演示:
<body><button>下拉滑動</button><button>上拉滑動</button><button>切換滑動</button><div></div><script>$(function() {$("button").eq(0).click(function() {// 下滑動 slideDown()$("div").slideDown();})$("button").eq(1).click(function() {// 上滑動 slideUp()$("div").slideUp(500);})$("button").eq(2).click(function() {// 滑動切換 slideToggle()$("div").slideToggle(500);});});</script> </body>3.事件切換:
jQuery中添加了一個新事件 hover() ; 功能類似 css 中的偽類 :hover
3.1 語法:
hover([over,]out) // 其中over和out為兩個函數- over:鼠標移到元素上要觸發的函數（相當于mouseenter）
- out:鼠標移出元素要觸發的函數（相當于mouseleave）
- 如果只寫一個函數，則鼠標經過和離開都會觸發它
3.2 案例: hover事件和停止動畫排列:
// 1.一般寫法 // 鼠標經過 $(".nav>li").mouseover(function() {$(this).children('ul').slideDown(200); }) // 鼠標離開 $(".nav>li").mouseleave(function() {$(this).children('ul').slideUp(200); })// 2. jq的hover // 事件切換 hover; 鼠標經過的符合寫法 $(".nav>li").hover(function() {$(this).children('ul').slideDown(200); }, function() {$(this).children('ul').slideUp(200); })// 3. jq的hover; 如果只寫一個函數, name鼠標經過離開都會觸發這個函數 $(".nav>li").hover(function() {$(this).children('ul').slideToggle(200); })4.動畫隊列及其停止方法:
4.1 動畫或效果隊列:
動畫或效果一旦觸發就會執行, 如果連續多次觸發 就造成多個動畫或者效果排隊執行;
4.2 停止排隊:
stop()- stop() 方法用于停止動畫或效果;
- stop() 寫到動畫或者效果的前面， 相當于停止結束上一次的動畫;
總結: 每次使用動畫之前，先調用 stop() ,在調用動畫;
$(".nav>li").hover(function() {$(this).children('ul').stop()slideToggle(200); })5. 淡入淡出
淡入淡出動畫，常見有四個方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
語法規范如下:
5.1 淡入:fadeIn
淡入效果語法規范:
fadeIn([speed, [easing], [fn]])淡入切換效果參數:
- 參數都可以省略;
- speed: 三種預定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示動畫時長的毫秒數值(如:1000);
- easing: (Optional)用來指定切換效果, 默認是"swing", 可用參數"linear";
- fn: 回調函數, 在動畫完成時執行的函數, 每個元素執行 一次;
5.2 淡出:fadeOut
淡出效果語法規范:
fadeIn([speed, [easing], [fn]])淡出切換效果參數:
- 參數都可以省略;
- speed: 三種預定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示動畫時長的毫秒數值(如:1000);
- easing: (Optional)用來指定切換效果, 默認是"swing", 可用參數"linear";
- fn: 回調函數, 在動畫完成時執行的函數, 每個元素執行 一次;
5.3 淡入淡出:fadeToggle
淡入淡出效果語法規范:
fadeToggle([speed, [easing], [fn]])淡入淡出切換效果參數:
- 參數都可以省略;
- speed: 三種預定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示動畫時長的毫秒數值(如:1000);
- easing: (Optional)用來指定切換效果, 默認是"swing", 可用參數"linear";
- fn: 回調函數, 在動畫完成時執行的函數, 每個元素執行 一次;
5.3 漸進:fadeTo
漸進效果語法規范:
fadeTo(speed, opactity, [easing], [fn])漸進切換效果參數:
- opactity: 透明度必須寫, 取0~1之間;
- speed: 必須寫, 三種預定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示動畫時長的毫秒數值(如:1000);
- easing: (Optional)用來指定切換效果, 默認是"swing", 可用參數"linear";
- fn: 回調函數, 在動畫完成時執行的函數, 每個元素執行 一次;
5.4 代碼演示:
<body><button>淡入效果</button><button>淡出效果</button><button>淡入淡出切換</button><button>修改透明度</button><div></div><script>$(function() {$("button").eq(0).click(function() {// 淡入 fadeIn()$("div").fadeIn(1000);})$("button").eq(1).click(function() {// 淡出 fadeOut()$("div").fadeOut(1000);})$("button").eq(2).click(function() {// 淡入淡出切換 fadeToggle()$("div").fadeToggle(1000);});$("button").eq(3).click(function() {// 修改透明度 fadeTo() 這個速度和透明度要必須寫$("div").fadeTo(1000, 0.5);});});</script> </body>5.4 案例: 高亮選擇:
需求分析:
- 鼠標未進入, 6張圖片不透明:
- 鼠標進入其中一個li, 該li為不透明, 其他li的透明度變為-.5;
代碼實現:
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}body {background: #000;}.wrap {margin: 100px auto 0;width: 630px;height: 394px;padding: 10px 0 0 10px;background: #000;overflow: hidden;border: 1px solid #fff;}.wrap li {float: left;margin: 0 10px 10px 0;}.wrap img {display: block;border: 0;}</style><script src="jquery.min.js"></script><script>$(function() {//鼠標進入的時候,其他的li標簽透明度：0.5$(".wrap li").hover(function() {$(this).siblings().stop().fadeTo(400, 0.5);}, function() {// 鼠標離開，其他li 透明度改為 1$(this).siblings().stop().fadeTo(400, 1);})});</script> </head><body><div class="wrap"><ul><li><a href="#"><img src="images/01.jpg" alt="" /></a></li><li><a href="#"><img src="images/02.jpg" alt="" /></a></li><li><a href="#"><img src="images/03.jpg" alt="" /></a></li><li><a href="#"><img src="images/04.jpg" alt="" /></a></li><li><a href="#"><img src="images/05.jpg" alt="" /></a></li><li><a href="#"><img src="images/06.jpg" alt="" /></a></li></ul></div> </body>6. 自定義動畫
自定義動畫非常強大，通過參數的傳遞可以模擬以上所有動畫，方法為：animate() ;
6.1 語法:
animate(params, [speed], [easing], [fn])6.2 參數:
- params: 想要更改的樣式屬性, 以對象形式傳遞, 必須寫. 屬性名可以不用帶引號, 如果是復合屬性則需要采取駝峰命名法.
- speed: 三種預定速度之一的字符串(‘slow’, ‘normal’, or ‘fast’)或表示動畫時長的毫秒數值(如:1000);
- easing: (Optional)用來指定切換效果, 默認是"swing", 可用參數"linear";
- fn: 回調函數, 在動畫完成時執行的函數, 每個元素執行 一次;
7. 案例：王者榮耀手風琴效果
7.1 分析:
- 鼠標經過某個小li 有兩步操作：
- 當前小li 寬度變為 224px， 同時里面的小圖片淡出，大圖片淡入
- 其余兄弟小li寬度變為69px， 小圖片淡入， 大圖片淡出
7.2 實現:
<head><title>王者榮耀手風琴效果</title><style>*{margin: 0;padding: 0;}ul {list-style: none;}img {display: block;}.king {width: 852px;margin: 100px auto;background: url(./images/bg.png) no-repeat;overflow: hidden;padding: 10px;}.king ul {overflow: hidden;}.king li {position: relative;float: left;width: 69px;height: 69px;margin-right: 10px;}.king li.current {width: 224px;}.king li.current .big {display: block;}.king li.current .small {display: none;}.big {width: 224px;display: none;}.small {position: absolute;top: 0;left: 0;width: 69px;height: 69px;border-radius: 5px;}</style><script src="../jquery-3.5.0.js"></script><script>$(function() {// 鼠標經過li有兩步操作$(".king li").mouseenter(function() {// 1. 當前li, 寬度變為224px, 同時小圖片淡出,大圖片淡入$(this).stop().animate({width: 224}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();// 2. 其余兄弟li寬度變為69px, 小圖片淡入, 大圖片淡出$(this).siblings("li").stop().animate({width: 69}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();})})</script> </head> <body><div class="king"><ul><li class="current"><a href="#"><img src="./images/m1.jpg" alt="" class="small"><img src="./images/m.png" alt="" class="big"></a></li><li><a href="#"><img src="./images/l1.jpg" alt="" class="small"><img src="./images/l.png" alt="" class="big"></a></li><li><a href="#"><img src="./images/c1.jpg" alt="" class="small"><img src="./images/c.png" alt="" class="big"></a></li><li><a href="#"><img src="./images/w1.jpg" alt="" class="small"><img src="./images/w.png" alt="" class="big"></a></li><li><a href="#"><img src="./images/z1.jpg" alt="" class="small"><img src="./images/z.png" alt="" class="big"></a></li><li><a href="#"><img src="./images/h1.jpg" alt="" class="small"><img src="./images/h.png" alt="" class="big"></a></li><li><a href="#"><img src="./images/t1.jpg" alt="" class="small"><img src="./images/t.png" alt="" class="big"></a></li></ul></div> </body>總結
以上是生活随笔為你收集整理的17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CentOS6u9 Oracle11g
- 下一篇： linux上json文件格式化的查看工具