jQuery 选择器 笔记

    <p class="demo">Click me</p>
    <script type="text/javascript">
    $("p").click(function(event) {
        alert("Click!");
    });
    </script>

获取不存在的元素,返回的永远是对象

if($("#tt").length > 0){
    //do sth.
}

或者 转化为DOM

if($("#tt")[0]){
    //do sth.
}

基础选择器

层次选择器

" " 后代选择 ">" 子选择
"+" 连续一个弟弟选择 "~" 后续所有弟弟选择 (这两个用得少)
$(".one + div") 等价于 $(".one").next("div")
$("#prev ~ div") 等价于 $("#prev").nextAll("div")

$("#prev").siblings("div") 所有兄弟节点

过滤选择器

基本过滤

:first 第一个
:last 最后一个
:not(selector) 去除与里面选择器匹配的元素
:even 取偶数
:odd 取奇数
:eq(index) 取索引(从零开始) :gt :lt (不包括本身)
:header 取标题 h1 h2 h3
:animated 正在动画的元素
:focus 焦点元素

内容过滤

:has(selector) 含有选择器匹配元素的元素
:contains(text) 取含有文本"text"的元素
:empty 取无文本或者子元素的空元素
:parent 取含文本或者子元素的元素

可见性过滤

:hidden 取不可见元素
:visible 取可见元素

属性过滤选择器

[attr] 有此属性
[attr=value] $("div[title=test]") test没有引号
[attr!=value]
[attr^=value] 以其开始^
[attr$=value] 以其结束$
[attr*=value] 含有value*
[attr¦=value] 属性为value或以value后带一个- ¦
[attr~=value] 空格分隔的值中含有value ~
[attr1][attr2][attr3=value] 复合选择器

子元素过滤

稍复杂

:nth-child
(index/even/odd/equation)
(index从1起)与eq不同
:first-child 第一个儿子
:last-child 最后一个
:only-child 若是唯一子元素,则选取

表单过滤器

:enabled 选可用
:disabled 选不可用
:checked 选中(单选框,复选框)
:selected 选中(下拉列表)

表单选择器

P61

jquery 1.9里面已经删除了toggle(fn1, fn2)函数:

练习

    <div>
        <ul>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">佳能</a><i>(30440)</i></li>
        </ul>
        <div class="showmore">
            <a href="more.html"><span>显示全部品牌</span></a>
        </div>
    </div>
    var $category = $("ul li:gt(5):not(:last)");
    var $toggleBtn = $("div.showmore > a");
    $category.hide();
    $toggleBtn.click(
        function() 
        {
            if ($category.is(':hidden')) 
            {
                $category.show();
                $(this).find('span').text("精简显示品牌");
            }
            else 
            {
                $category.hide();
                $(this).find('span').text("显示全部品牌");
            }
                return false;
        }
    );