<body> 一.基本选择器 1.ID选择器:$("#temp").addClass("bgred"); 2.类选择器:$(".temp").addClass("bgred"); 3.合选择器:$("#temp,#test").addClass("bgred"); 二.层次选择器: 1.后代选择器:$("form label").addClass("bgred");//只要label的上级有form则会应用上样式 2.孩子选择器:$("form > label").addClass("bgred");//当label的父标签是form则会应用上样式 3.兄弟选择器:$("form + label").addClass("bgred");//当form元素和label元素互为兄弟则会label元素应用上样式 4.兄弟链选择器(自己起的名字):$("form ~ label").addClass("bgred");//所有与form元素同级的label元素则会应用上样式 二.滤镜选择器: 1.位置控制滤镜 $("#dataTable tr:first").addClass("bgred"); $("#dataTable tr:last").addClass("bggreen"); $("#dataTable tr:odd").addClass("bggreen"); $("#dataTable tr:even").addClass("bggreen"); $("#dataTable tr:eq(1)").addClass("bgred"); $("#dataTable td:empty").addClass("bgred"); $("#dataTable td:parent").addClass("bgred"); $("#dataTable tr:hidden").show().addClass("bgred"); $("#dataTable tr:visible").addClass("bgred"); $("#dataTable tr:visible").hide(); 2.内容控制滤镜 $("div.temp:contains('博客')").addClass("bgred"); $("div.temp:has(p)").addClass("bgred");//针对标签 $("div.temp:not(.withp)").addClass("bgred"); 三.表单选择器: 1.内容滤镜 $("#loginForm :text").addClass("bgred"); $("#loginForm :password").addClass("bgred"); 2.功能滤镜 $("#loginForm input:enabled").addClass("bggreen"); $("#loginForm select option:selected").addClass("bggreen"); 3.属性滤镜 $("#loginForm input[class][name=nickname]").addClass("bgred"); 四.函数 alert($("form input").attr("name"));//获取第一个匹配的元素 $("form input").attr("value","茶叶");//修改所有有value这个属性的元素的value值为茶叶 $("form input").attr("value",function(){return this.name}); $("form input").removeAttribute("value"); $("form input").removeClass("test"); $("form input").toggleClass("bgred");//交替样式 alert($("#content").css("background-color")); $("#content").css("background-color","green"); $("#content").css( { "background-color":"green", "color":"gray" } ); alert($("#temp").html()); $("#temp").html("<h1>大乡里</h1>"); alert($("#temp").text()); $("#temp").text("<h1>大乡里</h1>"); $("#temp p").filter(".lovecn").addClass("bgred"); $("#temp p").filter( function(){ return $(this).hasClass("lovecn"); }).addClass("bggreen"); $("#btnTest").click(function(event) { $("#temp p").each(function() { if (!$(this).hasClass("lovecn")) { $(this).addClass("bggreen"); } }) }); //对比: $("input").filter(".lovecn").addClass("bgred"); $("form").find(".lovecn").addClass("bgred"); $(document).ready(function() { $("#dataTable tr:odd").addClass("bgred"); $("#dataTable tr:even").addClass("bggreen"); $("#dataTable tr").mouseover(function() { $(this).addClass("bgwhite"); }); $("#dataTable tr").mouseout(function() { $(this).removeClass("bgwhite"); }); }); $("#content .lovecn").next().end().addClass("bgred");//灾难恢复,回滚 $("#content .lovecn").next().andSelf().addClass("bgred");//把之前获得的元素加入next中获得的元素 </body>