jQuery基本用法

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中 $("Hello,").appendTo("#div1"); // 将内容heyuanbo添加到div1中 $("#div1").append("heyuanbo"); } ); $("#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:

jQuery Demo1

click

First button Second button

1. move on
2. Second element, second list
3. Third element, second list
4. Li with child ul
   • Child One
   • child two

学号	姓名	年龄
1001	a贺圆波	21
2003	b张三丰	51
1002	c刘德华	41

 

================================================

界面：