元素的样式设置 元素类样式的操作 开关灯效果 获取兄弟元素 当前元素的兄弟元素样式
生活随笔
收集整理的這篇文章主要介紹了
元素的样式设置 元素类样式的操作 开关灯效果 获取兄弟元素 当前元素的兄弟元素样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
元素的樣式設置
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.cls {width: 200px;height: 100px;background-color: crimson;}.cls2 {border:2px solid green;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){$("#btn").click(function(){// 為div設置類樣式,同時應用多個類樣式// $("#dv").addClass("cls");// $("#dv").addClass("cls").addClass("cls2");// $("#dv").addClass("cls cls2");// console.log($("#dv").addClass());// console.log($("#dv").addClass("cls"));// addClass()方法,括號里什么也沒有,返回來的仍然是這個對象// 即使在括號中設置內容,返回來的還是這個對象// removeClass()方法,同上// 移除類樣式// $("#dv").removeClass("cls");// $("#dv").removeClass("cls").removeClass("cls2");// $("#dv").removeClass("cls cls2");// console.log($("#dv").removeClass());// console.log($("#dv").removeClass("cls"));// css方法是不能添加或移除類樣式的// $("#dv").css("class","cls");});}); // 總結:設置元素的樣式可以使用css()方法,也可以使用addClass()或者是// removeClass()方法</script> </head> <body> <input type="button" value="顯示效果" id="btn"> <div id="dv" class=""></div></body> </html>元素類樣式的操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.cls {width: 200px;height: 100px;background-color: red;}.cls2 {border: 2px solid green;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){$("#btn").click(function(){// 判斷這個元素是否應用了某個類樣式if($("#dv").hasClass("cls cls2")){console.log("應用了");}else{console.log("沒有應用");}});});// hasClass()是判斷元素是否應用了這個類樣式的// addClass()添加類樣式// removeClass()移除類樣式</script> </head> <body> <input type="button" value="顯示效果" id="btn"> <div id="dv" class="cls cls2"></div></body> </html>開關燈效果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.cls {background-color: black;}</style><script src="jquery-1.12.1.js"></script><script>// $(function(){// $("#btn").click(function(){// // 判斷body是否應用了cls類樣式,如果應用了就移除,否則就添加// if($("body").hasClass("cls")){// $("body").removeClass("cls");// $("#btn").val("關燈");// }else{// $("body").addClass("cls");// $("#btn").val("開燈");// }// });// });// 第二種方式$(function(){$("#btn").click(function(){// 切換----類樣式$("body").toggleClass("cls");});});</script> </head> <body> <input type="button" value="關燈" id="btn"></body> </html>獲取兄弟元素的幾個方法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>ul {list-style-type: none;cursor: pointer;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){$("#three").click(function(){// 獲取某個li的下一個兄弟元素// $(this).next("li").css("backgroundColor","yellowgreen");// 獲取某個li的前一個兄弟元素// $(this).prev("li").css("backgroundColor","greenyellow");// 獲取某個li的后面的所有的兄弟元素// $(this).nextAll("li").css("backgroundColor","red");// 獲取某個li的前面的所有的兄弟元素// $(this).prevAll("li").css("backgroundColor","red");// 獲取當前的li的所有的兄弟元素$(this).siblings("li").css("backgroundColor","gray");});});</script> </head> <body> <ul id="uu"><li>鳳姐</li><li>芙蓉姐姐</li><li id="three">犀利哥</li><li>大力哥</li><li>小月月</li><li>小胖</li><li>小明</li><li>小紅</li> </ul></body> </html>當前元素的兄弟元素樣式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>ul {list-style-type: none;cursor: pointer;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){$("ul>li").mouseenter(function(){// 鼠標進入事件$(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");}).mouseleave(function(){// 鼠標離開事件$(this).parent().find("li").css("backgroundColor","");}).click(function(){// 點擊事件// $(this).prevAll("li").css("backgroundColor","yellow");// $(this).nextAll("li").css("backgroundColor","blue");// 斷鏈:對象調用方法之后,返回的已經不是當前的這個對象了,// 此時再調用方法,就出現了斷鏈// .end()方法是修復斷鏈,恢復斷鏈之前的狀態// 不推薦使用鏈式編程$(this).prevAll("li").css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");});});</script> </head> <body> <ul id="uu"><li>鳳姐</li><li>芙蓉姐姐</li><li>犀利哥</li><li>大力哥</li><li>小月月</li><li>小胖</li><li>小明</li><li>小紅</li> </ul></body> </html>?
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的元素的样式设置 元素类样式的操作 开关灯效果 获取兄弟元素 当前元素的兄弟元素样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 验证用户输入的是不是中文名字 淘宝精品案
- 下一篇： tab栏切换 动画的相关方法上 动画的相