JQuery 選擇器、DOM節(jié)點(diǎn)操作練習(xí)實(shí)例
一、練習(xí)一
1、需求效果分析:
2、代碼示例:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery-1.9.1/jquery.js"></script> <script type="text/javascript"> $(function () { //方法一:jQuery //$("p").click(function () { // alert(this.textcontent); // //alert($(this).html()); //}); //方法二:jQuery--for循環(huán) for (var i = 0; i < $("p").length; i++) { $("p")[i].onclick = function () { alert($(this).html()); }; }; }); //方法三:JavaScript中的for循環(huán) /*window.onload = function () { var temp = document.getElementsByTagName("p"); for (var i = 0; i < temp.length; i++) { temp[i].onclick = function () { alert(this.innerHTML); }; }; }*/ </script> </head> <body> <p>隔壁 Java 老師 很肥</p> <p>隔壁Java 老師 很胖</p> <p>隔壁Java 老師 很呆萌</p> <p>隔壁Java 老師 愛(ài)撿肥皂</p> <p>隔壁Java 老師 愛(ài)撒嬌</p> <p>隔壁Java 老師 裝嫩</p> <p>隔壁Java 老師 腎虛</p> <p>隔壁Java 老師 等等</p> <p>隔壁Java 老師 很肥</p> <p>隔壁Java 老師 很肥</p> <p>隔壁Java 老師 很肥</p> <p>隔壁Java 老師 很肥</p> <p>隔壁Java 老師 很肥</p> <p>隔壁Java 老師 很肥</p> <p>隔壁Java 老師 很肥</p> <p>隔壁Java 老師 很肥</p> <p>隔壁Java 老師 很肥</p> <p>隔壁Java 老師 很肥</p> <p>隔壁Java 老師 很肥</p> <p>隔壁Java 老師 很肥</p> </body> </html>
二、練習(xí)二
1、效果分析:
2、代碼示例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> p { display: none; border: 1px solid red; } </style> <script src="jquery-1.9.1/jquery.js"></script> <script type="text/javascript"> $(function () { $("li").click(function () { debugger; $("li>p").hide(); $(this.children).show(); }); }); </script> </head> <body> <ul> <li> 中國(guó) <p>臺(tái)灣</p> <p>釣魚(yú)島</p> <p>北京</p> </li> <li> 米國(guó) <p>華盛頓</p> <p>洛杉磯</p> </li> <li> 韓國(guó) <p>首爾</p> <p>釜山</p> <p>濟(jì)州島</p> </li> </ul> </body> </html>
三、練習(xí)三
1、效果分析
2、代碼示例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> .box { border: 1px solid #aaccff; padding: 10px; margin: 10px; } .box1 { border: 1px solid #aacc66; padding: 10px; margin: 10px; } .red { color: Red; } p { padding: 10px; margin: 10px; } </style> <script src="jquery-1.9.1/jquery.js"></script> <script type="text/javascript"> $(function () { $("#mybox").click(function () { $("#mybox").css("border", "5px dotted green"); }); //$(".box").click(function () { // $(".red").css("border", "5px dotted green"); //}); $(".box1").click(function () { $("div").css("border", "5px dotted green"); }); $(".box").click(function () { $("#mybox,p").css("border", "5px dotted green"); }); $("div[class='box red']").click(function () { $(this).siblings().hide(); $(".box3").show(); }); }); function find1() { $(".red").css("border", "5px dotted green"); }; </script> </head> <body> <div id="mybox" class="box1"> 點(diǎn)擊我讓所有id為mybox的元素邊框該為:5px dotted green=》提示 $().css("border","5px dotted green") </div> <div class="box" onclick="find1();"> 點(diǎn)擊我讓所有class=red的元素邊框該為:5px dotted green </div> <div class="box1 red" onclick="find2();"> 點(diǎn)擊我讓所有div的元素邊框該為:5px dotted green </div> <div class="box" onclick="find3();"> 點(diǎn)擊我讓id為mybox的元素、p元素邊框該為:5px solid green </div> <div class="box red" onclick="find4(this);"> 點(diǎn)擊我隱藏除了我以外所有的兄弟元素 </div> <p>我是段落...</p> </body> </html>
以上這篇JQuery 選擇器、DOM節(jié)點(diǎn)操作練習(xí)實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- jQuery中each()、find()和filter()等節(jié)點(diǎn)操作方法詳解(推薦)
- jQuery DOM插入節(jié)點(diǎn)操作指南
- jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法詳解
- jQuery DOM刪除節(jié)點(diǎn)操作指南
- 淺談事件冒泡、事件委托、jQuery元素節(jié)點(diǎn)操作、滾輪事件與函數(shù)節(jié)流
- jQuery中 DOM節(jié)點(diǎn)操作方法大全
- 有關(guān)jquery與DOM節(jié)點(diǎn)操作方法和屬性記錄
- jquery對(duì)dom節(jié)點(diǎn)的操作【推薦】
- JQuery常見(jiàn)節(jié)點(diǎn)操作實(shí)例分析
相關(guān)文章
jQuery+css+html實(shí)現(xiàn)頁(yè)面遮罩彈出框
面遮罩彈出框已經(jīng)不是一個(gè)陌生的話題了,實(shí)現(xiàn)的方法大同小異多種多樣,今天用jQuery實(shí)現(xiàn)頁(yè)面遮罩彈出框,主要用的技術(shù)有JQuery,css和html,感興趣的朋友可以參考下哈2013-03-03jQuery實(shí)現(xiàn)購(gòu)物車全功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)購(gòu)物車全功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01easyui中combotree循環(huán)獲取父節(jié)點(diǎn)至根節(jié)點(diǎn)并輸出路徑實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇easyui中combotree循環(huán)獲取父節(jié)點(diǎn)至根節(jié)點(diǎn)并輸出路徑實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11jQuery開(kāi)發(fā)者都需要知道的5個(gè)小技巧
JQuery是個(gè)不錯(cuò)的框架,以下總結(jié)了5個(gè)每個(gè)網(wǎng)站開(kāi)發(fā)者都應(yīng)該知道的小技巧,都是一些非常不錯(cuò)的,經(jīng)常能用得到的。2010-01-01jQuery簡(jiǎn)單實(shí)現(xiàn)頁(yè)面元素置頂時(shí)懸浮效果示例
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)頁(yè)面元素置頂時(shí)懸浮效果的方法,涉及jQuery針對(duì)頁(yè)面元素樣式的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-08-08

jquery css 設(shè)置table的奇偶行背景色示例