jquery练习(一)
来源：互联网 发布：价格表制作软件 编辑：程序博客网 时间：2024/05/21 11:04
<!doctype html><html><head> <meta charset="utf-8"> <script src="../js/libs/jquery-1.6.2.min.js"></script></head><body><div><p>字段单击事件1</p><p>字段单击事件2</p><p>字段单击事件3</p></div><hr /><!-- 表格1--><table border="1" ><tr><td>第1个</td><td>第2个</td></tr><tr><td>第3个</td><td>第4个</td></tr><tr><td>第5个</td><td>第6个</td></tr><tr><td>第7个</td><td>第8个</td></tr><tr><td>第9个</td><td>第10个</td></tr></table><br /><hr /><!-- 表格2--><table border="1" ><tr><td>第1个</td><td>第2个</td></tr><tr><td>第3个</td><td>第4个</td></tr><tr><td>第5个</td><td>第6个</td></tr><tr><td>第7个</td><td>第8个</td></tr><tr><td>第9个</td><td>第10个</td></tr></table><input type="button" id="b1" name="b1" value="button1" /><input type="button" id="b2" name="b2" value="button2" /><div title="nini">北京欢迎你</div><hr /><div><input type="text" name="stu1" id="stu2" value="不能编辑的文本框"disabled="disabled"/><br /><select id="xuanze"><option value="2013">电视</option><option value="2014">手机</option><option value="2015">望远镜</option><option value="2016">笔记本</option><option value="2017">U盘</option></select></div><input type="button" id="b4" name="b4" value="button4" /><p id="select2">获取下拉列表的值</p><hr /><div class="wuxulibiao"><ul id="city2"><li id="1001">北京</li><li id="1002">上海</li><li id="1003">长沙</li><li id="1004">杭州</li><li id="1005" xuan="ninixixihaha">广州</li></ul><ul id="city3"><li id="1006">香港</li><li id="1007">澳门</li><li id="1008">湖南</li><li id="1009">洛阳</li></ul></div><p class="dobleclick">双击事件</p><input type="button" id="b5" name="b5" value="button5" /><hr /><input type="button" id="b6" name="b6" value="button6" /><hr /><input type="button" id="b7" name="b7" value="button7" /></body></html><script type="text/javascript">/*$("p").each(function(index,domEle){$(domEle).click(function (){alert($(domEle).html());});});*/$("table:eq(0) tr:even").css("background","red");$("table:eq(1) tr:odd").css("background","green");$("#b1").click(function(){$("div[title='nini']").css("color","red");});/////////////////////$("#b2").click(function(){$("div[title='nini']").css("color","black");}); $("#b4").click(function(){$.each($("select option:selected"),function(index,domEle){alert($(this).val()+"====="+$(domEle).text());});}); $("#select2").click(function(){$.each($("#xuanze option:selected"),function(index,domEle){alert($(domEle).val()+"====="+$(domEle).html());});});$("#b5").click(function(){$(".dobleclick").append($("#city2"));});$(".dobleclick").click(function(){$(".dobleclick").append("123xixihaha你好吗？");});$("#b6").click(function(){alert($("#1005").attr("xuan"));});$("#b7").click(function(){var $tj=$("<li></li>");$tj.attr("id","1100");$tj.attr("key","xuannini");$tj.text("巴黎、伦敦");$("#city3").append($tj);});</script>
运行效果：
