時(shí)間：2023-06-06 13:33:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-06-06 13:33:02 來源：網(wǎng)站運(yùn)營
5.jQuery 快速網(wǎng)頁交互開發(fā)- jQ常用方法：
在線咨詢
<head> <style> * { margin: 0; padding: 0; } .box { width: 1000px; height: 80px; border: 1px solid #333; margin-top: 10px; } .box p, .box h2 { float: left; width: 80px; height: 80px; margin-right: 20px; background-color: #ccc; } </style></head><body> <div class="box"> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <h2>h2</h2> <h2>h2</h2> <h2>h2</h2> </div> <div class="box"> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <h2>h2</h2> <h2>h2</h2> <h2>h2</h2> </div> <div class="box"> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <h2>h2</h2> <h2>h2</h2> <h2>h2</h2> </div> <script src="js/jquery-1.12.4.min.js"></script> <script> // 獲取所有的 p 標(biāo)簽 var $ps = $("p") var $box = $(".box") </script></body>$ps.click(function () { console.log($(this).css("background-color","red").html("哈哈")) })$ps.click(function () { // 讓點(diǎn)擊的自己 顏色變紅色 $(this).css("background-color", "red") // 自己變紅色 .siblings().css("background-color", "gold") // 兄弟變金色 })$ps.click(function () { // 讓點(diǎn)擊的自己 顏色變紅色 $(this).css("background-color", "red") // 自己變紅色 .siblings().css("background-color", "gold") // 兄弟變金色 .parent().css("background-color", "pink") // 父級變粉色 .siblings().css("background-color", "blue") // 父級的兄弟變藍(lán)色 .children().css("background-color", "yellowgreen") // 父級的兄弟的子級變黃綠色 })<head> <style> * { margin: 0; padding: 0; } .box { width: 1000px; height: 80px; border: 1px solid #333; margin-top: 10px; background-color: #fff; } .box p, .box span { float: left; width: 80px; height: 80px; margin-right: 20px; background-color: #ccc; } .box span { background-color: pink; } </style></head><body> <div class="box" id="box1"> <p></p> <p></p> <p></p> <p> <!-- <span></span> --> </p> <span></span> <span></span> <span></span> </div> <div class="box"> <p></p> <p></p> <p></p> <p></p> <span></span> <span></span> <span></span> </div> <div class="box"> <p></p> <p></p> <p></p> <p></p> <span></span> <span></span> <span></span> </div> <script src="js/jquery-1.12.4.min.js"></script> <script> // 獲取元素 var $box1 = $("#box1") var $box = $(".box") var $child = $box.children() </script></body>// find() 方法查找后代中的 span 元素 $box1.find("span").css({ "width": 50, "height": 50 })$child.click(function () { // 讓自己變紅色，讓下一個兄弟變天藍(lán)色 $(this).css("background-color", "red") .next().css("background-color", "skyblue") })$child.click(function () { // 讓自己變紅色，讓上一個兄弟變藍(lán)色 $(this).css("background-color", "red") .prev().css("background-color", "blue") })$child.click(function () { // 讓自己后面所有兄弟變黃色 $(this).nextAll("p").css("background-color", "yellow") })$child.click(function () { // 讓自己變紅色，讓前面所有兄弟變藍(lán)色，讓后面所有兄弟變黃色 $(this).css("background-color", "red") .prevAll().css("background-color", "blue") })$child.click(function () { // 讓自己變紅色，祖先級變天藍(lán)色 $(this).css("background-color", "red") .parents("div").css("background-color", "skyblue") })<!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> </head><body> <input type="text"> <input type="button" value="發(fā)送"> <script src="js/jquery-1.12.4.min.js"></script> <script> // 獲取元素 var $btn = $("input:button") // 添加按鈕的點(diǎn)擊事件 $btn.click(function () { // 定義一個變量存儲時(shí)間的數(shù)字 var n = 5; // 讓按鈕被禁用 // 替換按鈕的文字內(nèi)容 $(this).prop("disabled",true).val(n + "s 后重新發(fā)送") // 每隔 1s 更改倒計(jì)時(shí)內(nèi)容 // 通過定時(shí)器進(jìn)行每隔 1s 減時(shí)間效果 var timer = setInterval(() => { n--; // 文字內(nèi)容發(fā)生變化 // 定時(shí)器內(nèi)部的this指向的默認(rèn)為 window $(this).val(n + "s 后重新發(fā)送") // 判斷如果時(shí)間到了 0 ，就要停止定時(shí)器 if (n <= 0) { clearInterval(timer) // 5s 結(jié)束后，需要讓文字恢復(fù) 發(fā)送 // 讓按鈕取消禁用 $(this).val("重新發(fā)送").prop("disabled",false) } },1000) }) </script></body></html><!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> <link rel="stylesheet" href="index.css"></head><body> <!--版心 --> <div class="w"> <!-- 左側(cè) --> <div class="leftBox"> <!-- 上 --> <div class="top"> <img src="img/m1.jpg"> </div> <ul> <li class="active"> <img src="img/s1.jpg" msrc="m1.jpg" bsrc="b1.jpg"> </li> <li> <img src="img/s2.jpg" msrc="m2.jpg" bsrc="b2.jpg"> </li> <li> <img src="img/s3.jpg" msrc="m3.jpg" bsrc="b3.jpg"> </li> </ul> </div> <!-- 右側(cè) --> <div class="rightBox"> <img src="img/b1.jpg" alt=""> </div> </div> <script src="lib/jquery-1.12.4.js"></script> <script> // 獲取元素 var $imgs = $(".leftBox ul li img"); var $mimg = $(".leftBox .top img") var $bimg = $(".rightBox img") // 1.給小圖的圖片添加鼠標(biāo)移上事件，切換類名 $imgs.mouseenter(function () { // 排他操作 // 給圖片自己的父級添加類名,讓父級的兄弟取消類名 $(this).parent().addClass("active").siblings().removeClass("active") // 2.更改中圖和大圖的路徑 // 存儲路徑中的前綴 var path = "img/"; // 中圖和大圖的路徑存在了對應(yīng)小圖的自定義屬性中 var msrc = path + $(this).attr("msrc"); var bsrc = path + $(this).attr("bsrc"); // 直接設(shè)置給對應(yīng)的圖片 $mimg.attr("src", msrc) $bimg.attr("src", bsrc) }) </script></body></html>* { margin: 0; padding: 0;}ul { list-style: none;}/* 版心 */.w { width: 1120px; margin: 0 auto;}/* 左側(cè)盒子 */.leftBox { width: 400px; float: left;}.leftBox .top { width: 400px; border:1px solid #ccc;}.leftBox .top img { width: 400px;}.leftBox ul { width: 188px; margin: 10px auto;}.leftBox ul li { float: left; width: 54px; height: 54px; border:1px solid #fff;}.leftBox ul li.active { border-color: red;}.leftBox ul li + li { margin-left: 10px;}/* 右側(cè)盒子 */.rightBox { float: left; margin-left:10px; width: 500px; height: 500px; border:1px solid #ccc; overflow: hidden;}關(guān)鍵詞：方法,交互
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
