1.使用id获取表签 2.使用class样式获取标签 3.使用标签关系获取标签 eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="./easy-ui/jquery.min.js"></script> </head> <style type = "text/css"> .li1{ background-color: chocolate; width:200px; } dt{ font-weight:bold; } </style> <body> <h3>一个定义列表</h3> <!--dl dt dd ul li--> <dl id="dl1"> <dt>描述dl、dt、dd、ul、li作用</dt> <dd> <ul> <li id="li1" class="li1"><span>dl:定义一个列表</span></li> <li class="li2"><span>dt:定义列表中的项目</span></li> <li><span>dd:对该项目的描述</span></li> <li><span>ul:定义无序列表</span></li> <li><span>li:列表项目</span></li> </ul> <ol> <li><span>ol:定义有序列表</span></li> </ol> </dd> </dl> </body> <script type = "text/javascript"> //对标签做监听事件 $(function(){ /**1.使用id获取表签*/ //使用监听代理，好处：即使是通过脚本生成的内容也能被监听到 $("#dl1").on("click",".li1",function(){ alert("您点击了第一个li列表项"); }); /**2.使用class样式获取标签*/ $(".li2").click(function(){ alert("您点击了第二个li列表项") }); /**3.使用标签关系获取标签*/ $("#dl1 dd:first ul:eq(0) li:eq(2) span").click(function(){ alert($(this).text()); }); /**判断标签是否存在*/ if($("#ol1").length == 0){ var li = "<li style='background-color: red;width:400px;'><span>由于不存在id=ol1的标签，因此加载的时候多出此一列</span></li>"; $("ol").append(li); } </script> </html>可以提炼的知识： 1.dl dt dd ul ol li的用法 2.事件代理：特别处理是对于脚本生成的代码监听特别有用 3.给标签、class样式添加新的样式 4.jquery对标签的系列操作
