一、练习一
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循环 for (var i = 0; i < $(p).length; i++) { $(p)[i].onclick = function () { alert($(this).html()); }; }; }); //方法三：javascript中的for循环 /*window.onload = function () { var temp = document.getelementsbytagname(p); for (var i = 0; i p).hide(); $(this.children).show(); }); }); </script> </head> <body> <ul> <li> 中国 <p>台湾</p> <p>钓鱼岛</p> <p>北京</p> </li> <li> 米国 <p>华盛顿</p> <p>洛杉矶</p> </li> <li> 韩国 <p>首尔</p> <p>釜山</p> <p>济州岛</p> </li> </ul> </body> </html>
三、练习三
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 () { $(p).css(border, 5px dotted green); }); $(.box).click(function () { $(#mybox,p).css(border, 5px dotted green); }); $(p[class='box red']).click(function () { $(this).siblings().hide(); $(.box3).show(); }); }); function find1() { $(.red).css(border, 5px dotted green); }; </script> </head> <body> <p id="mybox" class="box1"> 点击我让所有id为mybox的元素边框该为：5px dotted green=》提示 $().css(border,5px dotted green) </p> <p class="box" onclick="find1();"> 点击我让所有class=red的元素边框该为：5px dotted green </p> <p class="box1 red" onclick="find2();"> 点击我让所有p的元素边框该为：5px dotted green </p> <p class="box" onclick="find3();"> 点击我让id为mybox的元素、p元素边框该为：5px solid green </p> <p class="box red" onclick="find4(this);"> 点击我隐藏除了我以外所有的兄弟元素 </p> <p>我是段落...</p> </body> </html>
相关推荐
jquery 选择器
jquery 选择器(prev ~ siblings)详解
jquery 选择器中一些细节
以上就是实例分享jquery 选择器、dom节点操作练习的详细内容。