【锋利的Jquery】读书笔记二

一.jquery选择器

基本选择器

层次选择器

过滤选择器

基本过滤

内容过滤

可见性过滤

属性过滤

子元素过滤

first  : 获取单个元素       $("div:first").css("background","red");

first-child   ：获取集合 获取每一个父元素的第一个元素    $("div:first-child").css("background","red");

以下类似

last 与last-child   nth-child 与 eq

==============================================

：parent    选取含有子元素或者文本元素  $("div:parent").css("background","aquamarine");

：parents

表单属性过滤

：checked   单选框 复选框

：selected  下拉框

表单选择器

不一一举例。之讲解一些自己经常误解的

<script type="text/javascript">
$(function(){
//注意区分类似这样的选择器
//虽然一个空格，却截然不同的效果.
var $t_a = $('.test :hidden');   //后代选择器
var $t_b = $('.test:hidden');     //过滤选择器
var len_a = $t_a.length;
var len_b = $t_b.length;
$("<p>$('.test :hidden')的长度为"+len_a+"</p>").appendTo("body");
$("<p>$('.test:hidden')的长度为"+len_b+"</p>").appendTo("body");
})
</script>

二. 模板文件

<body>

<button id="reset">手动重置页面元素</button>
<input id="isreset" type="checkbox" checked="checked"><label for="isreset">点击下列按钮时先自动重置页面</label><br><br>
<h3>基本选择器.</h3>

<!-- 控制按钮 -->
<input id="btn1" type="button" value="选择 id为 one 的元素.">
<input id="btn2" type="button" value="选择 class 为 mini 的所有元素.">
<input id="btn3" type="button" value="选择 元素名是 div 的所有元素.">
<input id="btn4" type="button" value="选择 所有的元素.">
<input id="btn5" type="button" value="选择 所有的span元素和id为two的元素.">

<br><br>

<!-- 测试的元素 -->
<div class="one" id="one">
    id为one,class为one的div
    <div class="mini">class为mini</div>

</div>

<div title="test" class="one" id="two">
    id为two,class为one,title为test的div.
    <div title="other" class="mini">class为mini,title为other</div>
    <div title="test" class="mini">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 title="tesst" class="mini">class为mini,title为tesst</div>
</div>

<div class="none" style="display:none;">

    style的display为"none"的div
</div>

<div class="hide">class为"hide"的div</div>

<div>

    包含input的type为"hidden"的div<input type="hidden" size="8">
</div>

<span id="mover" style="height: 70.5px; overflow: hidden; padding-top: 0px; padding-bottom: 0px; margin-top: 2.5px; margin-bottom: 2.5px; display: block;">正在执行动画的span元素.</span>

</body>

三

四. 举个栗子

<script type="text/javascript">
$(function(){                                     //  等待DOM加载完毕.
    var $category = $('ul li:gt(5):not(:last)');             //  获得索引值大于5的品牌集合对象(除最后一条)
    $category.hide();                                //  隐藏上面获取到的jQuery对象。
    var $toggleBtn = $('div.showmore > a');             //  获取“显示全部品牌”按钮
    $toggleBtn.click(function(){
          if($category.is(":visible")){
                $category.hide();                            //  隐藏$category
                $(this).find('span')
                    .css("background","url(img/down.gif) no-repeat 0 0")
                    .text("显示全部品牌");                  //改变背景图片和文本
                $('ul li').removeClass("promoted");            // 去掉高亮样式
          }else{
                $category.show();                            //  显示$category
                $(this).find('span')
                    .css("background","url(img/up.gif) no-repeat 0 0")
                    .text("精简显示品牌");                  //改变背景图片和文本
                $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
                    .addClass("promoted");                //添加高亮样式
          }
        return false;                              //超链接不跳转
    })
})
</script>