2021-08-04 jQuery基础整理 17-30 代码复制即可运行
生活随笔
收集整理的這篇文章主要介紹了
2021-08-04 jQuery基础整理 17-30 代码复制即可运行
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
17. jQuery 操作樣式方法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery</title> </head> <script src="public/jquery-1.9.1.min.js"></script> <script>$(function () {//1.逐個設置$("div").css("width" , "100px");$("div").css("height" , "100px");$("div").css("background" , "red");//2.鏈式設置//注意點：鏈式操作如果大于三步建議分開$("div").css("width" , "100px").css("height" , "100px").css("background" , "blue");//3.批量設置//推薦$("div").css({width : "100px",height : "100px",background : "yellow"});//4.獲取CSS樣式值console.log($("div").css("width"));}); </script> <body><div></div> </body> </html>18. jQuery的尺寸和位置操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery</title> </head> <script src="public/jquery-1.9.1.min.js"></script> <style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;border: 50px solid #000;margin-left: 50px;position: relative;}.son{width: 100px;height: 100px;background: blue;left: 50px;top: 50px;position:absolute;} </style> <script>$(function () {var btn = document.getElementsByTagName("button");//監(jiān)聽獲取btn[0].onclick = function () {//獲取元素的寬度alert($(".father").width());//獲取元素距離窗口的偏移位// offset([coordinates])alert($(".son").offset().left);//獲取元素距離地位元素的偏移位//注意：position()只能獲取，不能設置// position()alert($(".son").position().left);}//監(jiān)聽設置btn[1].onclick = function () {//設置元素的寬度//$(".father").width("500px")$(".son").offset({left:10});}}); </script> <body><div class="father"><div class="son"></div></div><button>獲取</button><button>設置</button> </body> </html>19.jQuery 的scrollTob方法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery</title> </head> <script src="public/jquery-1.9.1.min.js"></script> <style>*{margin: 0;padding: 0;}.scroll{width: 200px;height: 200px;border: 1px solid #000;overflow: auto;} </style> <script>$(function () {var btn = document.getElementsByTagName("button");//監(jiān)聽獲取btn[0].onclick = function () {//獲取滾動的偏移位//alert($(".scroll").scrollTop());//獲取網頁滾動的偏移位//注意點：為了保證瀏覽器的兼容，需要按照如下寫法alert($("html").scrollTop()+$("body").scrollTop());}btn[1].onclick = function () {//設置滾動的偏移位//$(".scroll").scrollTop(50);//設置網頁滾動的偏移位//注意點：為了保證瀏覽器的兼容，需要按照如下寫法alert($("html,body").scrollTop(500));}}); </script> <body><div class="scroll">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div</div><button>獲取</button><button>設置</button><br><br><br><br><br> </body> </html>20. jQuery事件綁定
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery</title> </head> <script src="public/jquery-1.9.1.min.js"></script> <script>$(function () {/*jquery中有兩種綁定事件方式1.eventName（fn）編碼效率略高 部分事件jQuery沒有實現 所以不能添加2.on（eventName，fn）編碼效率略低 所有js事件都可以添加注意點可以添加多個相同或不同類型的事件，不會覆蓋*/// $("button").click(function () {// alert("hello")// })// $("button").click(function () {// alert("0000")// })// $("button").mouseleave(function () {// alert("1111")// })// $("button").mouseenter(function () {// alert("2222")// })$("button").on("click",function () {alert("hello")})$("button").on("click",function () {alert("hello333")})$("button").on("mouseleave",function () {alert("hello4444")})$("button").on("mouseenter",function () {alert("hello66666")})}); </script> <body><button>我是按鈕</button> </body> </html>21. jQuery事件解綁
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery</title> </head> <script src="public/jquery-1.9.1.min.js"></script> <script>$(function () {function text1() {alert("hello")}function text2() {alert("0000")}$("button").click(text1);$("button").click(text2);$("button").mouseleave(function () {alert("1111")})$("button").mouseenter(function () {alert("2222")})//off方法如果不傳遞參數，會移除所有事件//$("button").off();//off方法如果傳遞一個參數，會移除所有指定類型的事件//$("button").off("click");//off方法如果傳遞兩個參數，會移除指定類型的指定事件$("button").off("click",text1);}); </script> <body><button>我是按鈕</button> </body> </html>22. jQuery事件冒泡和默認行為
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery</title> </head> <script src="public/jquery-1.9.1.min.js"></script> <style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;}.son{width: 100px;height: 100px;background: blue;} </style> <script>$(function () {/*1.什么是事件冒泡2.如何阻止事件冒泡3.什么是默認行為4.如何阻止默認行為*/// $(".son").click(function (event) {// alert("son");// //return false;// event.stopPropagation();// })// $(".father").click(function () {// alert("father")// })$("a").click(function (event) {alert("彈出注冊框");// return false;event.preventDefault();})}); </script> <body><div class="father"><div class="son"></div></div><a href="http://www.baidu.com">注冊</a><form action="http://www.taobao.com"><input type="text"><input type="submit"></form> </body> </html>23. jQuery自動事件觸發(fā)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery</title> </head> <script src="public/jquery-1.9.1.min.js"></script> <style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;}.son{width: 100px;height: 100px;background: blue;} </style> <script>$(function () {$(".son").click(function (event) {alert("son");})$(".father").click(function () {alert("father")})// $(".father").trigger("click");//$(".father").triggerHandler("click");/*如果利用trigger自動觸發(fā)事件，會觸發(fā)事件冒泡*///$(".son").trigger("click");/*如果利用triggerHandler自動觸發(fā)事件，不會觸發(fā)事件冒泡*///$(".son").triggerHandler("click");$("input[type='submit']").click(function () {alert("submit")})/*如果利用trigger自動觸發(fā)事件，會觸發(fā)默認行為*/// $("input[type='submit']").trigger("click");/*如果利用triggerHandler自動觸發(fā)事件，不會觸發(fā)默認行為*///$("input[type='submit']").triggerHandler("click");//注意：要想觸發(fā)a標簽的默認行為 需要在a標簽里在加一個標簽$("span").click(function () {alert("a")})$("span").trigger("click");}); </script> <body><div class="father"><div class="son"></div></div><a href="http://www.baidu.com"><span>注冊</span></a><form action="http://www.taobao.com"><input type="text"><input type="submit"></form> </body> </html>24. jQuery自定義事件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery</title> </head> <script src="public/jquery-1.9.1.min.js"></script> <style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;}.son{width: 100px;height: 100px;background: blue;} </style> <script>$(function () {// $(".son").click(function (event) {// alert("son");// })/*想要自定義事件必須滿足兩個條件1.事件必須是通過on來綁定的2.事件必須通過trigger來觸發(fā)*/$(".son").on("myClick",function () {alert("aaa")})$(".son").trigger("myClick");}); </script> <body><div class="father"><div class="son"></div></div><a href="http://www.baidu.com"><span>注冊</span></a><form action="http://www.taobao.com"><input type="text"><input type="submit"></form> </body> </html>25. jQuery事件命名空間
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery</title> </head> <script src="public/jquery-1.9.1.min.js"></script> <style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;}.son{width: 100px;height: 100px;background: blue;} </style> <script>$(function () {/*想要事件的命名空間有效，必須滿足兩個條件1.事件是通過on綁定的2.通過trigger觸發(fā)事件*/$(".son").on("click.zs",function () {alert("aaa")})$(".son").on("click.ls",function () {alert("bbb")})$(".son").trigger("click.zs");}); </script> <body><div class="father"><div class="son"></div></div><a href="http://www.baidu.com"><span>注冊</span></a><form action="http://www.taobao.com"><input type="text"><input type="submit"></form> </body> </html>26. jQuery事件命名空間面試題
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery</title> </head> <script src="public/jquery-1.9.1.min.js"></script> <style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;}.son{width: 100px;height: 100px;background: blue;} </style> <script>$(function () {$(".father").on("click.ls",function () {alert("aaa")})$(".father").on("click",function () {alert("ccc")})$(".son").on("click.ls",function () {alert("bbb")})/*利用trigger觸發(fā)了元素帶命名空間的事件那么父元素帶相同命名空間的事件也會被觸發(fā)而父元素沒有沒有命名空間的元素不會被觸發(fā)*///$(".son").trigger("click.ls")/*利用trigger觸發(fā)子元素不帶命名空間的事件那么子元素所有相同類型的事件和父元素所有相同類型的事件都會被觸發(fā)*/$(".son").trigger("click")}); </script> <body><div class="father"><div class="son"></div></div><a href="http://www.baidu.com"><span>注冊</span></a><form action="http://www.taobao.com"><input type="text"><input type="submit"></form> </body> </html>27. jQuery事件委托
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery</title> </head> <script src="public/jquery-1.9.1.min.js"></script> <style> </style> <script>$(function () {/*1.什么是事件委托請別人幫忙做事情，然后將做完的結果反饋給我們*/$("button").click(function () {$("ul").append("<li>我是新增li</li>")})/*在jQuery中，如果通過核心函數找到的元素不止一個那么在添加事件的時候，jQuery會遍歷所有找到的元素給所有找到的元素添加事件*/// $("ul>li").click(function () {// alert($(this).html())// })/*以下代碼的含義，讓ul幫li監(jiān)聽click事件之所以能夠監(jiān)聽，是因為入口函數執(zhí)行的時候ul就已經存在了，所以能夠添加事件之所以this是li，是因為我們點擊的是li，而li沒有click事件所以事件冒泡傳遞給了ul，ul響應了事件，既然事件是從li傳遞過來的所以ul必然指定this是誰*/$("ul").delegate("li","click",function () {alert($(this).html())})}); </script> <body> <ul><li>我是第一個li</li><li>我是第二個li</li><li>我是第三個li</li> </ul> <button>新增li</button> </body> </html>28. jQuery移入移出事件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery</title> </head> <script src="public/jquery-1.9.1.min.js"></script> <style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;}.son{width: 100px;height: 100px;background: blue;} </style> <script>$(function () {/*mouseover/mouseout 子元素被移入移除也會觸發(fā)父元素的事件*/// $(".father").mouseover(function () {// console.log("father移入了");// })// $(".father").mouseout(function () {// console.log("father移出了");// })/*mouseenter/mouseleave 子元素被移入移除不會觸發(fā)父元素的事件推薦使用*/// $(".father").mouseenter(function () {// console.log("father移入了");// })// $(".father").mouseleave(function () {// console.log("father移出了");// })// $(".father").hover(function () {// console.log("father移入了");// },function () {// console.log("father移出了");// })$(".father").hover(function () {console.log("father移入yichu了");})}); </script> <body> <div class="father"><div class="son"></div> </div> </body> </html>29. 電影排行榜（移入移出事件練習）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery</title> </head> <script src="public/jquery-1.9.1.min.js"></script> <style>*{margin: 0;padding: 0;}.box{width: 300px;height: 450px;margin: 50px auto;border: 1px solid #000;}.box>h1{font-size: 20px;line-height: 35px;color: deeppink;padding-left: 10px;border-bottom: 1px dashed #ccc;}ul>li{list-style: none;padding: 5px 10px;border: 1px dashed #ccc;}ul>li:nth-child(-n+3) span{background: deeppink;}ul>li>span{display: inline-block;width: 20px;height: 20px;background: #ccc;text-align: center;line-height: 20px;margin-right: 10px;}.content{overflow: hidden;margin-top: 5px;display: none;}.content>img{width: 80px;height: 120px;float: left;}.content>p{width: 180px;height: 120px;float: right;font-size: 12px;line-height: 20px;}.current .content{display: block;} </style> <script>$(function () {/*//1.監(jiān)聽li的移入事件$("li").mouseenter(function () {$(this).addClass("current")})//2.監(jiān)聽li的移出事件$("li").mouseleave(function () {$(this).removeClass("current")})*/$("li").hover(function () {$(this).addClass("current")},function () {$(this).removeClass("current")})}); </script> <body> <div class="box"><h1>電影排行榜</h1><ul><li><span>1</span>電影名稱<div class="content"><img src="https://img0.baidu.com/it/u=3643222036,2137679457&fm=26&fmt=auto&gp=0.jpg"><p>痞性十足的冷鋒（吳京飾）屢屢惹禍，有人說他是流氓，是痞子， 也有人說他是英雄，是傳奇，在一次行動中冷鋒違抗軍令打死了恐怖分子，要被開除出隊，卻意外得到了神秘部隊戰(zhàn)狼的接納，但本想換個地方繼續(xù)惹禍的他卻跳進了另外一個深淵，冷傲的戰(zhàn)狼副隊長，擦出曖昧火花的性感女隊長（余男飾），心計頗深腹黑的毒梟，枉死的隊友，雇傭兵跨過邊境線入侵中國，一切都使他陷入了麻煩中。一切都在考驗這個團隊的毒瘤冷鋒，他不知該何去何從。</p></div></li><li><span>2</span>電影名稱<div class="content"><img src="https://img0.baidu.com/it/u=3643222036,2137679457&fm=26&fmt=auto&gp=0.jpg"><p>痞性十足的冷鋒（吳京飾）屢屢惹禍，有人說他是流氓，是痞子， 也有人說他是英雄，是傳奇，在一次行動中冷鋒違抗軍令打死了恐怖分子，要被開除出隊，卻意外得到了神秘部隊戰(zhàn)狼的接納，但本想換個地方繼續(xù)惹禍的他卻跳進了另外一個深淵，冷傲的戰(zhàn)狼副隊長，擦出曖昧火花的性感女隊長（余男飾），心計頗深腹黑的毒梟，枉死的隊友，雇傭兵跨過邊境線入侵中國，一切都使他陷入了麻煩中。一切都在考驗這個團隊的毒瘤冷鋒，他不知該何去何從。</p></div></li><li><span>3</span>電影名稱<div class="content"><img src="https://img0.baidu.com/it/u=3643222036,2137679457&fm=26&fmt=auto&gp=0.jpg"><p>痞性十足的冷鋒（吳京飾）屢屢惹禍，有人說他是流氓，是痞子， 也有人說他是英雄，是傳奇，在一次行動中冷鋒違抗軍令打死了恐怖分子，要被開除出隊，卻意外得到了神秘部隊戰(zhàn)狼的接納，但本想換個地方繼續(xù)惹禍的他卻跳進了另外一個深淵，冷傲的戰(zhàn)狼副隊長，擦出曖昧火花的性感女隊長（余男飾），心計頗深腹黑的毒梟，枉死的隊友，雇傭兵跨過邊境線入侵中國，一切都使他陷入了麻煩中。一切都在考驗這個團隊的毒瘤冷鋒，他不知該何去何從。</p></div></li><li><span>4</span>電影名稱<div class="content"><img src="https://img0.baidu.com/it/u=3643222036,2137679457&fm=26&fmt=auto&gp=0.jpg"><p>痞性十足的冷鋒（吳京飾）屢屢惹禍，有人說他是流氓，是痞子， 也有人說他是英雄，是傳奇，在一次行動中冷鋒違抗軍令打死了恐怖分子，要被開除出隊，卻意外得到了神秘部隊戰(zhàn)狼的接納，但本想換個地方繼續(xù)惹禍的他卻跳進了另外一個深淵，冷傲的戰(zhàn)狼副隊長，擦出曖昧火花的性感女隊長（余男飾），心計頗深腹黑的毒梟，枉死的隊友，雇傭兵跨過邊境線入侵中國，一切都使他陷入了麻煩中。一切都在考驗這個團隊的毒瘤冷鋒，他不知該何去何從。</p></div></li><li><span>5</span>電影名稱<div class="content"><img src="https://img0.baidu.com/it/u=3643222036,2137679457&fm=26&fmt=auto&gp=0.jpg"><p>痞性十足的冷鋒（吳京飾）屢屢惹禍，有人說他是流氓，是痞子， 也有人說他是英雄，是傳奇，在一次行動中冷鋒違抗軍令打死了恐怖分子，要被開除出隊，卻意外得到了神秘部隊戰(zhàn)狼的接納，但本想換個地方繼續(xù)惹禍的他卻跳進了另外一個深淵，冷傲的戰(zhàn)狼副隊長，擦出曖昧火花的性感女隊長（余男飾），心計頗深腹黑的毒梟，枉死的隊友，雇傭兵跨過邊境線入侵中國，一切都使他陷入了麻煩中。一切都在考驗這個團隊的毒瘤冷鋒，他不知該何去何從。</p></div></li></ul> </div> </body> </html>30. tab選項卡
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery</title> </head> <script src="public/jquery-1.9.1.min.js"></script> <style>*{margin: 0;padding: 0;}.box{width: 440px;height: 298px;border: 1px solid #000;margin: 50px auto;}.nav>li{list-style: none;width: 110px;height: 50px;background: orange;text-align: center;line-height: 50px;float: left;}.nav>.current{background: #ccc;}.content>li{list-style: none;display: none;}.content .show{display: block;}.content>li>img{width: 440px;height: 248px;} </style> <script>$(function () {/*//1.監(jiān)聽選項卡的移入事件$(".nav>li").mouseenter(function () {//1.1 修改被移入的選項卡的顏色$(this).addClass("current");//1.2獲取當前移入選項卡的索引var index = $(this).index();//1.3根據索引找到對應的圖片var li = $(".content>li").eq(index);//1.4顯示找到的圖片li.addClass("show")})//2.監(jiān)聽選項卡的移出事件$(".nav>li").mouseleave(function () {//1.1 修改被移入的選項卡的顏色$(this).removeClass("current");//1.2獲取當前移出選項卡的索引var index = $(this).index();//1.3根據索引找到對應的圖片var li = $(".content>li").eq(index);//1.4隱藏找到的圖片li.removeClass("show")})*/$(".nav>li").mouseenter(function () {//1.1 修改被移入的選項卡的顏色$(this).addClass("current");//1.2還原其他兄弟選項卡的背景顏色$(this).siblings().removeClass("current");//1.3獲取當前移入選項卡的索引var index = $(this).index();//1.4根據索引找到對應的圖片var li = $(".content>li").eq(index);//隱藏非當前的其它圖片li.siblings().removeClass("show");//1.5顯示對應的圖片li.addClass("show");})}); </script> <body> <div class="box"><ul class="nav"><li class="current">Css</li><li>jQuery</li><li>java</li><li>C++</li></ul><ul class="content"><li class="show"><img src="https://img1.baidu.com/it/u=253337507,2981296721&fm=26&fmt=auto&gp=0.jpg"></li><li><img src="https://img1.baidu.com/it/u=3694053003,1912698683&fm=26&fmt=auto&gp=0.jpg"></li><li><img src="https://img1.baidu.com/it/u=4268324981,3384091170&fm=26&fmt=auto&gp=0.jpg"></li><li><img src="https://img1.baidu.com/it/u=1977046168,368269341&fm=26&fmt=auto&gp=0.jpg"></li></ul> </div> </body> </html>總結
以上是生活随笔為你收集整理的2021-08-04 jQuery基础整理 17-30 代码复制即可运行的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 音视频多模态研究点
- 下一篇： ORA-12805: parallel