<script type="text/javascript">$(function() {$(".demo").click(function() {//类选择器alert("jQuery Demo");});});</script></head><body><p class="demo">jQuery Demo</p></body></html>
2，jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。
3，基本选择器。
| 选择器 | 描述 | 返回 | 实例 |
| #id | 根据给定id匹配一个元素 | 单个元素 | $("#test") |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(".test") |
| element | 根据元素名匹配元素 | 集合元素 | $("p") |
| * | 匹配所有的元素 | 集合元素 | $("*") |
| selector1..selectorn | 合并元素后一起返回 | 集合元素 | $("div,span,p") |
测试html和css
<body><div class="one" id="one">id为one，class为one的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">class="one" id="two" title="test"的div<div class="mini" title="other">class="mini" title="other"</div><div class="mini" title="test">class="mini" title="test"</div></div><div class="one"><div class="mini">class="mini"</div><div class="mini">class="mini"</div><div class="mini">class="mini"</div><div class="mini"></div></div><div class="one"><div class="mini">class="mini"</div><div class="mini">class="mini"</div><div class="mini">class="mini"</div><div class="mini" title="tesst">class="mini" title="tesst"</div></div><div style="display:none;" class="none">style="display:none;" class="none"</div><div class="hide">class="hide"</div><div>包含Input的type为hidden的div<input type="hidden" size="8"></div><span id="mover">正在执行动画的span元素</span></body>
<style type="text/css">div {width:450px;height:140px;margin:5px;background: :#aaa;border:#000 1px solid;float:left;font-size:17px;font-family:Verdana;}div.mini{width:210px;height:55px;background-color: :#aaa;font-size: 12px;}div.hide{display:none;}</style>
-1，改变id为one的元素的背景色。
$(function() {//id选择器$("#one").css("background", "#bbffaa");});
-2，改变class为mini的元素的背景色。
$(function() {//id选择器$("#one").css("background", "#bbffaa");//类选择器$(".mini").css("background", "#bbffaa");});
-3，改变所有div的背景色
$(function() {//id选择器$("#one").css("background", "#bbffaa");//类选择器$(".mini").css("background", "#bbffaa");//元素选择器$("div").css("background", "#bbffaa");});
-4，改变所有元素的背景色
$(function() {//id选择器$("#one").css("background", "#bbffaa");//类选择器$(".mini").css("background", "#bbffaa");//元素选择器$("div").css("background", "#bbffaa");//all$("*").css("background", "#bbffaa");});
-5，所有span元素和id为two的元素。
$(function() {//id选择器//$("#one").css("background", "#bbffaa");//类选择器//$(".mini").css("background", "#bbffaa");//元素选择器//$("div").css("background", "#bbffaa");//all//$("*").css("background", "#bbffaa");$("span, #two").css("background", "#bbffaa");});
4，层次选择器
| 选择器 | 描述 | 返回 | 实例 |
| $("a b") | 选取a元素中的所有b元素 | 集合元素 | $("div span")选取div里的所有span元素 |
| $("parent>child") | 选取parent元素下的child子元素 | 集合元素 | $("div>span")选取div元素下元素名是span的子元素 |
| $("prev + next") | 紧接在prev元素后的next元素 | 集合元素 | $(".one+div")class为one的下一个div同辈元素 |
| $("prev~s") | 选取prev元素后的所有s元素 | 集合元素 | $("#two~div")选取id为two的所有div同辈元素 |
-1，改变body内所有div的背景颜色
$(function() {//改变body内所有div的背景颜色$("body div").css("background", "#bbffaa");});
-2，改变body内子div元素的背景颜色
$(function() {$("body>div").css("background", "#bbffaa");});
-3，改变class为one的下一个div同辈元素背景颜色
$(function() {$(".one + div").css("background", "#bbffaa");});
-4，改变id为two的元素后所有div同辈元素
$(function() {$("#two ~ div").css("background", "#bbffaa");});
可以使用next和nextAll代替后两个选择器
5，过滤选择器
| 选择器 | 描述 | 返回 | 实例 |
| :first | 选取第一个元素 | 单个元素 | $("div:first")选取第一个div元素 |
| :last | 选取最后一个元素 | 单个元素 | $("div:last")选取最后一个div元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $("input:not(myClass)")选取class不是myClass的input元素 |
| :even | 选取所有索引是偶数的元素，索引从0开始 | 集合元素 | $("input:even")选取索引是偶数的input元素 |
| :odd | 选取所有索引是奇数的元素，索引从0开始 | 集合元素 | $("input:odd")选取索引是奇数的input元素 |
| :eq(index) | 选取索引等于index的元素 | 单个元素 | $("input:eq(1)")选取索引为1的input元素 |
| :gt(index) | 选取索引大于index的元素 | 集合元素 | $("input:gt(1)")选取索引大于1的元素 |
| :lt(index) | 选取索引小于index的元素 | 集合元素 | $("input:lt(1)")选取索引小于1的元素 |
| :animated | 选取所有执行动画的元素 | 集合元素 | $("div:animated")选取正在执行动画的div元素 |
| :focus | 选取当前获取焦点的元素 | 集合元素 | $(":focus")选取当前脚垫元素 |
-1，改变第一个div元素的背景色
$(function() {$("div:first").css("background", "#bbffaa");});
-2，改变最后一个div的背景色
$(function() {$("div:last").css("background", "#bbffaa");});
-3，改变class不是one的所有div背景颜色
$(function() {$("div:not(.one)").css("background", "#bbffaa");});
-4，改变索引值为偶数的所有div背景颜色
$(function() {$("div:even").css("background", "#bbffaa");});
6，内容选择器
7，属性选择器