JQuery学习笔记-基本选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){//相当于window.onload //使用id选择器选择id=btn1的元素$("#btn1")，并且添加点击事件 $("#btn1").click(function(){ //alert("btn1 click..."); $("#one").css("background", "#ffbadb");//选择id为one的元素并改变其背景颜色 }); $("#btn2").click(function(){ $(".mini").css("background", "#ffbadb");//选择class为mini的元素并改变其背景颜色 }); $("#btn3").click(function(){ $("div").css("background", "#ffbadb");//选择元素名为div的元素并改变其背景颜色 }); $("#btn4").click(function(){ $("*").css("background", "#ffbadb");//选择所有的元素并改变其背景颜色 }); $("#btn5").click(function(){ $("span, #two").css("background", "#ffbadb");//选择span元素和id为two的元素并改变其背景颜色 }); }) </script> </head> <body> <input type="button" value="选择 id 为 one 的元素" id="btn1" /> <input type="button" value="选择 class 为 mini 的所有元素" id="btn2" /> <input type="button" value="选择元素名是 div 的所有元素" id="btn3" /> <input type="button" value="选择所有的元素" id="btn4" /> <input type="button" value="选择所有的 span 元素和id为two的元素" id="btn5" /> <br><br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"> </div> <span id="span">^^span元素^^</span> </body> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function() { //1. 点击所有的 p 节点, 能够弹出其对应的文本内容 /* 1. jQuery 对象可以进行隐式迭代: $("p").click(function(){...}); 为选取的所有的 p 节点都添加了 click 响应函数. jQuery 对象本身就是一个 DOM 对象的数组 2. 在响应函数中, this 是一个 DOM 对象. 若想使用 jQuery 对象的方法需要把其包装为 jQuery 对象: 使用 $() 把 this 包起来. 3. text() 方法时一个读写的方法: 不加任何参数, 读取文本值; 加参数为属性节点添加文本值(文本节点) (和 text() 类似的方法: attr(), val()) */ $("p").click(function() { alert($(this).text()); $(this).text("^^" + $(this).text()); //alert(this.firstChild.nodeValue); }); //2. 使第一个 table 隔行变色 $("table:first tr:even").css("background", "#ffaacc"); //3. 点击 button, 弹出 checkbox 被选中的个数 $("button").click(function() { alert($(":checkbox:checked").length); }); }); </script> </head> <body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <table> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> </table> <br> <hr> <br>. <table> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> </table> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <button>您选中的个数</button> </body> </html>

相关阅读