2 《锋利的jQuery》jQuery选择器

tip1：jquery检查某个元素是否存在：if($("#tt").length>0){}或者if($("#tt")[0]){}

先说css选择器有：

标签选择器：td,a

ID选择器：#note{}

类选择器：.dream{}  ,  div.note{}

群组选择器：td,p,div.a{}

后代选择器：#links a{}

通配选择器：*{}

以上六种常用css选择器几乎所有浏览器都支持。此外CSS中还有：

伪类选择器：E:Pseudo-Elements{ CssRules }

子选择器：E>F{ CssRules }

临近选择器：E+F{ CssRules }

属性选择器：E[attr]{ CssRules }

遗憾的是，主流浏览器并非完全支持。

jquery选择器的写法与css选择器的写法十分相似，但，css选择器找到元素后是添加样式，而jquery选择器找到元素后是添加行为。jquery中涉及操作css样式的部分比单纯的css功能更为强大，并且拥有跨浏览器的兼容性。

jquery选择器的优势：

1、简洁的写法

2、支持css1、css2的全部和css3的部分选择器，同时有少量独有的选择器

3、完善的处理机制：

（无须像js一样判断元素是否存在。）

jquery选择器分为：基本选择器、层次选择器、过滤选择器和表单选择器。

1、基本选择器
$(“#test”); 选取id为test的元素
$(“.test”); 选取所有class为test的元素
$(“p”); 选取所有的<p>元素
$(“*”); 选取所有的元素

$(“div,span,p.myClass”); 选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素
2、层次选择器
$(“div span”); 选取<div>里的所有的<span>元素（后代元素）
$(“div>span”); 选取<div>元素下元素名是<span>的子元素 （注意：子元素和后代元素的区别）
$(‘.one+div’); 选取class为one的下一个<div> 或者$(“.one”).next(“div”); (推荐使用)
$(‘#two~div’); 选取id为two的元素后面的所有<div>兄弟元素。或者$(“#prev”).nextAll(“div”);(推荐使用)
$(“#prev”).siblings(“div”); 所有同辈元素
3、过滤选择器

基本过滤选择器：
$(“div:first”); 选取所有<div>元素中的第1个<div>元素
$(“div:last”); 选取所有<div>元素中最后一个<div>元素
$(“input:not(.myClass)”); 选取class不是myClass的<input>元素
$(“input:even”); 选取索引是偶数的<input>元素
$(“input:odd”); 选取索引是奇数的<input>元素
$(“input:eq(1)”); 选取索引等于1的<input>元素

$("input:gt(1)");选取索引号大于1的<input>元素

$("input:lt(1)");选取索引号小于1的<input>元素
$(“:header”); 选取网页中所有的<h1>,<h2>,<h3>……
$(“div:animated” ); 选取正在执行动画的<div>元素

$(":focus")选取当前获取焦点的元素

内容过滤选择器：
$(“div:contains(‘我’)”); 选取含有文本“我”的<div>元素
$(“div:empty”); 选取不包含子元素（包括文本元素）的<div>空元素
$(“div:has(p)”); 选取含有<p>元素的<div>元素。$(“div:has(.class)”)
$(“div:parent”); 选取拥有子元素（包括文本元素）的<div>元素

可见性过滤选择器
$(“:hidden”); 选取所有不可见的元素。包括<input type=”hidden”>,<div style=”display:none;”>和<div style=”visibility:hidden;”>等元素。如果只想选取<input>元素，可以使用$(“input:hidden”)例：$(‘div:hidden’).show(3000);  //show()功能是显示元素，3000是时间，单位是毫秒
$(“div:visible”); 选取所有可见的<div>元素

属性过滤选择器：
$(“div[id]”); 选取拥有属性id的元素
$(“div[title=test]”); 选取属性title为“test”的<div>元素
$(“div[title!=test]”); 选取属性title不等于“test”的<div>元素（注意：没有属性title的<div>元素也会被选取）
$(“div[title^=test]”); 选取属性title以“test”开始的<div>元素
$(“div[title$=test]”); 选取属性title以“test”结束的<div>元素
$(“div[title*=test]”); 选取属性title含有“test”的<div>元素
$(“div[id][title$=’test’]”); 选取拥有属性id，并且属性title以“test“结束的<div>元素
4、表单选择器
$(“#form1:enabled”); 选取id为“form1“的表单内的所有可用元素
$(“#form2:disabled”); 选取id为“form2“的表单内的所有不可用元素
$(“input:checked”); 选取所有被选中的<input>元素

$("select option:selecetd");选取所有被选中的选项元素
例子：
$("input[name='c']:checked").length;
$("#tb tbody tr:even").css("background-color","#888");
。。。。。还有其他一些选择器浏览器无反应，是否是由于css3操作的原因
选择器中的一些注意事项：
（1）选择器中含有".""#""("或"]"等特殊字符 用"\"转义比如：
<div id="id#b">bb</div> 获取方法：$("#id\#b")
<div id="id[1]">bb</div> 获取方法：$("#id\[1\]")
（2）1.3以上版本不再使用@，比如$("div[@title='test']");正确的写法是$("div[title='test']");
（3）选择器中含有空格。var $t_a=$(".test :hidden");和 var $t_b=$(".test:hidden")区别

案例：

.SubCategoryBox { width: 700px; }
.SubCategoryBox ul { width: 700px; display: inline-block; }
.SubCategoryBox ul li { width: 200px; float: left; height: 30px; line-height: 30px; padding-left: 20px; }
.showmore { width: 700px; text-align: center; height: 40px; line-height: 35px; margin-top: 20px; }
.showmore span { height: 35px; padding: 0px 40px; border: 1px solid #ddd; display: inline-block; background: url(arrow_down.gif) no-repeat scroll 10px center; }
.promoted { color: #ff0000; }

<div class="fz">
    <div class="SubCategoryBox">
        <ul>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">索尼</a><i>(27220)</i></li>
            <li><a href="#">三星</a><i>(20808)</i></li>
            <li><a href="#">尼康</a><i>(17821)</i></li>
            <li><a href="#">松下</a><i>(12289)</i></li>
            <li><a href="#">卡西欧</a><i>(8242)</i></li>
            <li><a href="#">富士</a><i>(14894)</i></li>
            <li><a href="#">柯达</a><i>(9520)</i></li>
            <li><a href="#">宾得</a><i>(2195)</i></li>
            <li><a href="#">理光</a><i>(4114)</i></li>
            <li><a href="#">奥林巴斯</a><i>(12205)</i></li>
            <li><a href="#">明基</a><i>(1466)</i></li>
            <li><a href="#">爱国者</a><i>(3091)</i></li>
            <li><a href="#">其它品牌相机</a><i>(7275)</i></li>
        </ul>
        <div class="showmore">
            <a href="more.html"><span>显示全部品牌</span></a>
        </div>
    </div>
</div>

<script>
    $(function () {
        var $category = $("ul li:gt(5):not(:last)");
        $category.hide();
        var $toggleBtn = $("div.showmore>a");
        $toggleBtn.click(function () {
            if ($category.is(":visible")) {
                //元素隐藏
                $category.hide();
                $(".showmore a span")
                        .css("background", "url(arrow_down.gif) no-repeat scroll 10px center")
                        .text("显示全部品牌");
                $("ul li").removeClass("promoted");
            } else {
                //元素显示
                $category.show();
                $(".showmore a span")
                        .css("background", "url(arrow_up.gif) no-repeat scroll 10px center")
                        .text("精简显示品牌");
                $("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
                        .addClass("promoted");
            }
            return false;
        })
    })
</script>

注：图片未加。。。