其中选择器都已经注释，需要测试哪个打开注释即可观察效果！！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script> <script type="text/javascript"> $(function(){ //标签选择器 //$("p").css("color","red"); //类选择器 //$(".p1").css("background","red"); //ID选择器 //$("#box").css("border","1px solid black").css("height","400px"); //并集选择器 //$("p,span").css("color","blue"); //全局选择器 //$("*").css("color","pink"); //后代选择器 //$("#box p").css("color","red"); //子选择器： //$("#box>p").css("color","red"); //相邻元素选择器 //$(".p2+p").css("color","red"); //同辈元素选择器 //$(".p2~p").css("color","red"); //属性选择器 //给包含name的元素表单里面赋值 //$("[name]").val("已经赋值"); //选择name属性的值为text的赋值 //$("[name='text']").val("已经赋值"); //给name属性的值不是text的赋值 //$("[name!='text']").val("已经赋值"); //给name属性的值以p开头的 //$("[name^='p']").val("已经赋值"); //给name属性的值以e结尾的 //$("[name$='e']").val("已经赋值"); //给name属性的值包含e的 //$("[name*='e']").val("已经赋值"); //给包含type属性等于password和name=phone的input属性赋值 //$("input[name='password'][type='password']").val("已经赋值"); //过滤性选择器 //第一个p元素的字体为红色 //$("p:first").css("color","red"); //最后一个p元素的字体为红色 //$("p:last").css("color","red"); //p里面class不是p3的字体为红色 //$("p:not(.p3)").css("color","red"); //p里面偶数的字体为红色(从0开始) //$("p:even").css("color","red"); //p里面奇数的字体为红色(从1开始) //$("p:odd").css("color","red"); //p里面索引等于3的字体为红色(从0开始) //$("p:eq(3)").css("color","red"); //p里面索引大于2的字体为红色(从0开始) //$("p:gt(3)").css("color","red"); //p里面索引小于2的字体为红色(从0开始) //$("p:lt(3)").css("color","red"); //将网页中的所有标题颜色 //$(":header").css("color","red"); //获取网页中聚焦点的元素 //$("[name='password']").focus(); //$(":focus").css("color","red"); }) </script> </head> <body> <header> 这是头部分 </header> <div id="box"> <p class="p1"> 第一个p标签 <span>这是p1里面的span标签</span> <p>这是p1里面的p标签</p> </p> <p class="p2">第二个p标签</p> <p class="p3">第三个p标签</p> <p class="p4">第四个p标签</p> <p class="p5">第五个p标签</p> <span> 这是一个span标签 <p>这是span里面的p标签</p> </span> <h2>这是一个h2标签</h2> 属性选择器： 用户名：<input type="text" name="text" value="" /> 密码：<input type="password" name="password" value="" /> 电话：<input type="text" name="phone" value="" /> 电子邮件：<input type="text" name="email" value="" /> </div> </body> </html>
