<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><styletype="text/css">div,span,p{width:140px;height:140px;margin:5px;background:#aaa;border:#0001pxsolid;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><scripttype="text/javascript"src="js/jquery-1.7.2.js"></script><scripttype="text/javascript">$(function(){//相当于window.onload//使用id选择器选择id=btn1的元素$("#btn1")，并且添加点击事件$("#btn1").click(function(){//alert("btn1click...");$("#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><inputtype="button"value="选择id为one的元素"id="btn1"/><inputtype="button"value="选择class为mini的所有元素"id="btn2"/><inputtype="button"value="选择元素名是div的所有元素"id="btn3"/><inputtype="button"value="选择所有的元素"id="btn4"/><inputtype="button"value="选择所有的span元素和id为two的元素"id="btn5"/><br><br><divclass="one"id="one">id为one,class为one的div<divclass="mini">class为mini</div></div><divclass="one"id="two"title="test">id为two,class为one,title为test的div<divclass="mini"title="other">class为mini,title为other</div><divclass="mini"title="test">class为mini,title为test</div></div><divclass="one"><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini"></div></div><divclass="one"><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini"title="tesst">class为mini,title为tesst</div></div><divclass="none">style的display为"none"的div</div><divclass="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<inputtype="hidden"size="8"></div><spanid="span">^^span元素^^</span></body></html>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>UntitledDocument</title><scripttype="text/javascript"src="js/jquery-1.7.2.js"></script><scripttype="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:firsttr: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><inputtype="checkbox"name="test"/><inputtype="checkbox"name="test"/><inputtype="checkbox"name="test"/><inputtype="checkbox"name="test"/><inputtype="checkbox"name="test"/><inputtype="checkbox"name="test"/><button>您选中的个数</button></body></html>