screen.css: /********************************** Use: Reset Styles for all browsers ***********************************/ body, p, blockquote { margin: 20px; padding: 0; } body { padding: 10px; font: normal 82.5% "Lucida Grande", Helvetica, Verdana, Arial; } .red { color: red; } .blue { color: blue; } .green { color: green; } .bg{ background:pink;} .hand { cursor:hand; text-decoration:underline;} .font{ font:italic; font-size:16px; } custom.js: // jquery基本用法 $(document).ready( function() { // 所有的li元素的文字颜色为红色,只有有ul子元素的那个li元素例外。 $("li").not(":has(ul)").css("color", "green").css("font-size", "20px"); // 为所有单元格加上手型样式和背景颜色,除了第一个 $("tr td:first-child").nextAll().addClass("hand").addClass("font"); // 让所有tr的第一个td,不能响应click事件 $("tr td:first-child").nextAll().click( function(){ alert($(this).html()); // 去掉样式 $(this).removeClass("font"); } ); // 表格排序 $("#student").tablesorter(); //$("#student").tableSorter({sortList: [[0,0], [1,0]]}); $("#btn1").click( function(){ // 将内容Hello添加到div1中 $("<font>Hello,</font>").appendTo("#div1"); // 将内容heyuanbo添加到div1中 $("#div1").append("<font color='red'>heyuanbo</font>"); } ); $("#btn2").click( function(){ alert($("div").find("button").html()); alert($("div > button").html()); $("button").each(function(i){ this.title = "title" + i; }); alert($("#btn1")[0].title); alert($("#btn2")[0].title); alert($("input[@type='text']").is("input")); alert($("input[@type='text']").parent().is("form")); // 删除所有拥有一个span子元素的元素 $("p").filter(function(index) { return $("span", this).length == 0; }) // 选择所有段落并删除那些类名不是selected的元素。 $("p").filter(".selected"); } ); // 自动隐藏与显示 $("a").toggle( function() { $(".stuff").animate({ height: 'hide', opacity: 'hide'}, 'slow'); }, function() { $(".stuff").animate({ height: 'show', opacity: 'show'}, 'slow'); } ); /* $("a").toggle( function() { $(".stuff").addClass('bg').hide('slow'); }, function() { $(".stuff").addClass('bg').show('fast'); } ); */ } ); jquery.html: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>jQuery Starterkit</title> <link href="screen.css" mce_href="screen.css" rel="stylesheet" type="text/css" /> <mce:script src="jquery-1.2.6.js" mce_src="jquery-1.2.6.js" type="text/javascript"></mce:script> <mce:script src="jquery.tablesorter.js" mce_src="jquery.tablesorter.js" type="text/javascript"></mce:script> <mce:script src="custom.js" mce_src="custom.js" type="text/javascript"></mce:script> </head> <body> <h3>jQuery Demo1</h3> <div id="div1"></div> <a href="#" mce_href="#">click</a> <div class="stuff"> <div class="buttons"> <button id="btn1" value="value1" />First button</button> <button id="btn2" value="value2" />Second button</button> </div> <ol id="orderedlist"> <li>move on</li> <li>Second element, second list</li> <li>Third element, second list</li> <li>Li with child ul <ul> <li>Child One</li> <li>child two</li> </ul> </li> </ol> </div> <form id="myForm"> <input type="text" /> </form> <table border="1" id="student"> <thead> <tr> <th>学号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>1001</td> <td>a贺圆波</td> <td>21</td> </tr> <tr> <td>2003</td> <td>b张三丰</td> <td>51</td> </tr> <tr> <td>1002</td> <td>c刘德华</td> <td>41</td> </tr> </tbody> </table> </body> </html> ================================================ 界面: