学习笔记（八）——jQuery（二）
生活随笔
收集整理的這篇文章主要介紹了
学习笔记（八）——jQuery（二）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 一、class 操作
- 二、Tab 欄切換
- 三、JQ 動畫
- 四、元素操作
- 4.1、html() 、$()和 empty()
- 4.2、屬性獲取、設置、移除
- 4.3、補充：獲取boolean類型的屬性
一、class 操作
| addClass( ) | 為每個匹配的元素添加指定的類名 |
| removeClass( ) | 從所有匹配的元素中刪除全部或者指定的類 |
| hasClass( ) | 檢查當前的元素是否含有某個特定的類，如果有，則返回true |
| toggleClass( ) | 如果存在（不存在）就刪除（添加）一個類 |
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Class操作</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script><style>#box{height: 200px;width: 200px;margin-top: 10px;background-color: green;}.fontsize20{font-size: 20px;}.fontcolor{color: aqua;}</style></head><body><input type="button" id="addClass" value="添加類"><input type="button" id="hasClass" value="判斷類"><input type="button" id="removeClass" value="移除類"><input type="button" id="toggleClass" value="切換類"><div id="box">鳳兮鳳兮歸故鄉，遨游四海求其凰</div><script type="text/javascript">$("#addClass").click(function(){//給id為box的div添加類$("#box").addClass("fontcolor fontsize20");});$("#hasClass").click(function () {//判斷元素是否有class，有則返回true，否則falseconsole.log($("#box").hasClass("fontsize20"));});$("#removeClass").click(function () {//給id為box的div移除類$("#box").removeClass("fontcolor fontsize20");});$("#toggleClass").click(function () {//如果元素有某個class，則移除掉，否則添加$("#box").toggleClass("fontcolor");});</script></body> </html>結果：
二、Tab 欄切換
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Class操作</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}.wrapper {width: 1000px;height: 475px;margin: 0 auto;margin-top: 100px;}.tab {border: 1px solid #ddd;border-bottom: 0;height: 36px;width: 320px;}.tab li {position: relative;float: left;width: 80px;height: 34px;line-height: 34px;text-align: center;cursor: pointer; /*鼠標指針放在一個元素邊界范圍內時所用的光標形狀*/border-top: 4px solid #fff;}.tab span {position: absolute;right: 0;top: 10px;background: #ddd;width: 1px;height: 14px;overflow: hidden;}.products {width: 1002px;border: 1px solid #ddd;height: 476px;}.products .main {float: left;/* 隱藏 */display: none;}.products .main.selected {/* 顯示 */display: block;}.tab li.active {border-color: red;border-bottom: 0;}</style></head><body><div class="wrapper"><ul class="tab"><li class="tab-item active">椰子</li><li class="tab-item">air max</li><li class="tab-item">aj1</li><li class="tab-item">aj雜</li></ul><div class="products"><div class="main selected"><a href="###"><img src="images/yz.jpg" alt=""/></a></div><div class="main"><a href="###"><img src="images/max.jpg" alt=""/></a></div><div class="main"><a href="###"><img src="images/aj1.jpg"/></a></div><div class="main"><a href="###"><img src="images/aj2.jpg"/></a></div></div></div><script type="text/javascript">//需求:給tab欄的每一 個1i標簽設置鼠標移入事件，當前1i添加active值， 其他的兄弟元素1i移除active// 找到當前tab欄 下標一致的div, 添加selected, 其他的兄弟元素div移除selected$(".tab>li").mouseenter(function () {//當前的1i添加active$(this).addClass("active").siblings().removeClass("active");//獲取當前1i的下標var index = $(this).index();$(".products>.main").eq(index).addClass("selected").siblings().removeClass("selected");});</script></body> </html>結果：
三、JQ 動畫
| hide() | 隱藏 |
| show() | 顯示 |
| toggle() | 切換 |
| slideDown() | 滑入 |
| slideUp() | 滑出 |
| fadeIn() | 淡入 |
| fadeOut() | 淡出 |
| animate() | 動畫 |
注意：
① 前七個函數：若直接調用函數，沒有動畫效果，如果想要有動畫效果，就需要提供參數；帶參數的話這些函數的參數均類似，這里就以 show 為例：
② animate()函數共有3個參數：
參數1：必須傳入，對象：代表的是需要做動畫的屬性 參數2：可選的，代表執行動畫的時長，毫秒值 參數3：可選的，勻速(linear)還是緩動(swing) 參數4：可選的，動畫執行完之后的回調函數示例 1：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>動畫</title><style>#box{width: 200px;height: 200px;background-color: aqua;display: none;}</style></head><body><input type="button" value="顯示" id="show"><input type="button" value="隱藏" id="hide"><input type="button" value="切換" id="toggle"><input type="button" value="滑入" id="slideDown"><input type="button" value="滑出" id="slideUp"><input type="button" value="淡入" id="fadeIn"><input type="button" value="淡出" id="fadeOut"><div id="box"></div><script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script><script>$("#show").click(function(){$("#box").show("slow",function(){console.log("動畫執行完畢");});});$("#hide").click(function(){$("#box").hide("slow",function(){});});// 切換：如果元素是隱藏狀態那么就設置顯示，如果是顯示狀態，就設置隱藏$("#toggle").click(function(){$("#box").toggle(600,function(){});});$("#slideDown").click(function(){// 滑入$("#box").slideDown(600);});$("#slideUp").click(function(){// 滑出$("#box").slideUp(600);});$("#fadeIn").click(function(){// 淡入$("#box").fadeIn(600);});$("#fadeOut").click(function(){// 淡入$("#box").fadeOut(600);});</script></body> </html>結果：
示例 2：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>動畫</title><style>#box1{width: 50px;height: 50px;background-color: aqua;color: #000;position: absolute;left: 0;top: 50px;}#box2{width: 50px;height: 50px;background-color: aqua;position: absolute;left: 0;top: 120px;}#box3{width: 50px;height: 50px;background-color: aqua;position: absolute;left: 0;top: 190px;}#border{width: 0px;height: 400px;border-left: 1px solid black;position: absolute;left: 400px;}</style></head><body><button id="btn">box移動</button><div id="box1">我在勻速移動</div><div id="box2">我在緩速移動</div><div id="box3">注意我的變化</div><div id="border"></div><script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script><script>$("#btn").click(function () {$("#box1").animate({left:400},3000,"linear");$("#box2").animate({left:400},3000,"swing");//注意可以嵌套，使div移動方向、大小等改變$("#box3").animate({left:400,width:100,height:100},3000,"linear",function(){$("#box3").animate({left:30,width:200,height:200},2000,"linear");});});</script></body> </html>結果：
四、元素操作
4.1、html() 、$()和 empty()
① html()
如果不帶參數，則是代表獲取內容；
如果傳入參數，則是設置內容；
如果內容中包含了標簽，會把標簽解析出來；
② $()
以創建標簽，但是創建標簽只存在內存中，如果需要在頁面上顯示，就需要追加；
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>動畫</title><style>img{width: 140px;height: 100px;}</style></head><body><input type="button" id="btnhtml" value="html()"/><input type="button" id="btn2" value="$()"/><input type="button" id="btn3" value="empty()"/><img src="https://i04piccdn.sogoucdn.com/81c412b6e9e216c1" alt="魯班七號"><div id="box"><p>p1<span>span</span></p></div><script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script><script>$("#btnhtml").click(function() {//不帶參數，則是代表獲取內容console.log($("#box").html());//傳入參數，則是設置內容$("#box").html("我是設置的內容");//會把原來的內容覆蓋//內容中包含了標簽，會把標簽解析出來$("#box").html("我是設置的內容是<a href='https://www. baidu.com'>百度一下</a>");});$("#btn2").click(function(){var link = $("<a href='https://www.baidu.com'>百度一 下</a>");// console .1og(link)$("#box").append(link);});$("#btn3").click(function( ){//清空標簽，并且把當前標簽上綁定的事F$("#box").empty();});</script></body> </html>結果：
4.2、屬性獲取、設置、移除
attr函數：
① 獲取屬性
獲取自帶屬性與自定義屬性；
若獲取的屬性是沒有的，則返回undefined；
② 設置屬性
若已經設置了屬性， 則更改這個屬性值；
如果標簽沒有這個屬性，則是添加；
也可以多個屬性同時操作；
removeAttr函數
① 移除單個屬性
② 移除多個屬性屬性名之間用空格隔開
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>元素操作</title><style>img{width: 240px;height: 150px;}</style></head><body><input type="button" id="btn4" value="獲取屬性" /><input type="button" id="btn5" value="設置屬性" /><input type="button" id="btn6" value="移除屬性" /><img src="https://i04piccdn.sogoucdn.com/81c412b6e9e216c1" alt="魯班七號"><script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script><script>//獲取屬性$("#btn4").click( function(){//獲取屬性console.log($("img").attr("src"));console.log($("img").attr("alt"));// console.log($("img").attr("aa"));//自帶屬性與自定義屬性都可以獲取// console.log($("img").attr("cc"));//如果要獲取的屬性是沒有的，則返回undefined});//設置屬性$(" #btn5" ).click(function(){//之前設置了src屬性， 更改這個屬性值$("img").attr("src","https://game.gtimg.cn/images/yxzj/coming/v2/skins//image/20210518/16213278673200.jpg");//如果標簽沒有這個屬性，則是添加// $("img").attr("aa","aaaa");//多個屬性同時操作// $("img").attr({src:"https://game.gtimg.cn/images/yxzj/coming/v2/skins//image/20210518/16213278673200.jpg",bbb:"bbb"});});//移除屬性$("#btn6").click(function(){//移除單個屬性$("img").removeAttr("src");//移除多個屬性屬性名之間用空格隔開$("img").removeAttr("alt aa");});</script></body> </html>結果：
4.3、補充：獲取boolean類型的屬性
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>元素操作</title><style>img{width: 240px;height: 150px;}</style></head><body><input type="button" id="btn7" value="按鈕" /><input type="checkbox" id="ckb1"><script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script><script>//獲取復選框的狀態$("#btn7").click(function(){// console.log($("#ckb1").attr("checked"));//undefined//除了本身標簽設置選中屬性之外，當用戶自己選擇之后再獲取拿到是undefinedconsole.log($("#ckb1").prop("checked"));});</script></body> </html>結果：
注意：獲取boolean類型的屬性，我們一般不用 attr函數，因為如果復習框剛開始沒有默認勾選狀態，獲取的值會是undefined。
在jquery1.6版本之后，對于checked、selected、disabled這類 boolean類型的屬性，不用attr函數，使用prop函數
想學習 jQuery 基本使用的話可以看我這兩篇博客：
學習筆記（七）——jQuery（一）
想了解更多關于 jQuery 的 API 使用話推薦查看：
jQuery API 中文文檔
總結
以上是生活随笔為你收集整理的学习笔记（八）——jQuery（二）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学习笔记（七）——jQuery（一）
- 下一篇： 爬虫学习笔记（二）——使用 reques