jQuery 笔记之一选择器

两天的旅程结束了,回来应该跟大家分享jQuery的学习心得了,首先分享的是jQuery的选择器,正如jQuery手册介绍的那样,jQuery的选择器非常强大,使你可以轻松选取页面中任何一个对象。

 

以下是一个具体的例子,该篇笔记也将会围绕这个例子展开叙述。

 

一个网站中有10种的文章分类,我们设计一个类似WordPress显示各文章分类的名称及其文章数量的栏目,当用户进入一个页面时,默认显示前面5个分类的名称以及最后一个分类——其他分类,用户可以通过单击“显示全部分类”按钮来显示全部分类,同时一些推荐的分类会加下划线显示,按钮中的文字会改变为“显示部分分类”,再次单击“显示部分分类”后会回到之前的页面状态。

 

首先为了实现这个功能,我们需要写出相应的 html

<div class="CategoryBox">
    <h2>分类列表</h2>
    <ul>
        <li><a href="#">互联网(55)</a></li>
        <li><a href="#">前端(22)</a></li>
        <li><a href="#">css(10)</a></li>
        <li><a href="#">jQuery(12)</a></li>
        <li><a href="#">后台(28)</a></li>
        <li><a href="#">Php(10)</a></li>
        <li><a href="#">jsp(6)</a></li>
        <li><a href="#">.net(5)</a></li>
        <li><a href="#">CMS(9)</a></li>
        <li><a href="#">其他分类(3)</a></li>   
    </ul>
    <div class="more">
        <a href="more.html"><span>显示全部分类</span></a>
    </div>
</div>

 

在Html写后好再添加一些简单的css,然后就可以开始jQuery的编写。

 

下面的代码将实现页面加载完毕后选取相应的对象并隐藏,这里选取的是第6个分类到第9个分类4个对象,因为需要控制隐藏和显示的便是这四个分类。

var $category = $('ul li:gt(4):not(:last)');
$category.hide();

 

$('ul li:gt(4):not(:last)')的意思便是获取索引值大于4的li元素并且去掉最后一个,需要注意的是索引值是从0开始,所以这样便可以获取第6到第9个分类。

 

下面将会获取“显示全部分类”按钮,并且给该按钮添加一个事件,单击该按钮后显示所有分类

var $toggleBtn = $('.more a');
$toggleBtn.click(function() {
    $category.show();
    return false;
});

 

.show()是用于显示元素的动画,另外由于给超链接添加onclick事件,因此需要添加return false语句阻止该超链接跳转。

 

写到这里,我们不难发现,jQuery的选择器跟css选择器有相近之处,其原理都是先以选择器选择对象,再添加操作,不过jQuery的选择器明显比css的丰富和简便得多,这也是使用jQuery能大大提高网站开发效率的重要原因。

 

接着上面的例子,根据文章开头设定的条件,在单击“显示全部分类”的按钮后,部分推荐的分类会添加下划线,同时按钮中的文字会变成“显示部分分类”,因此我们还需要在.show()和return false之间添加以下代码:

$('.more a span').text("显示部分分类");
$('ul li').filter(":contains('前端'),:contains('css'),:contains('jQuery'),:contains('CMS')").addClass("feature");

 

.text()用于改变对象中的文字,filter()可以用于选出推荐对象,这里推荐的是前端,CSS,jQuery,CMS,然后使用addClass()为它们添加“feature”类,因为我已预先写feature类的css,所以以上推荐对象在单击按钮后便会加上下划线。至此,可以说基本完成了这次需要的jQuery,当然用户单击“显示部分分类”后的效果还没有写上相应的jQuery。但有了前面的一段jQurey代码,相信写出单击“显示部分分类”后的代码应该不难。

 

在单击“显示部分分类”后的效果中其中一个是需要去掉推荐分类的下划线效果,我们可以使用removeClass(),用法与addClass相同。

 

现在余下的问题是如何把两段代码写在一起,由于用户在两个事件上单击的是同一个按钮,因此事件仍然是在刚才的按钮元素上,要使两种状态在一个元素上进行,我们可以使用判断:

if(元素显示状态 ) {
//隐藏元素
}else{
//显示元素
}

 

整个完整的jQuery代码如下:

$(document).ready(function() {
        var $category = $('ul li:gt(4):not(:last)');
        $category.hide();
        var $toggleBtn = $('.more a');
        $toggleBtn.click(function() {
            if($category.is(":visible")) {
                $category.hide();
                $('.more a span')
                    .text("显示全部分类");
                $('ul li').removeClass("feature");
            }else{
                $category.show();
                $('.more a span')
                    .text("显示部分分类");
                $('ul li').filter(":contains('前端'),:contains('css'),:contains('jQuery'),:contains('CMS')")
                    .addClass("feature");
            }
            return false;
        });
});

 

上面的判断语句,用法与一般的高级编程语言相近,但放在jQuery这个以轻便闻名的js库中不免显得繁琐,其实在jQuery中有更为轻便的方法去实现上面的例子,即toggle()方法,代码如下:

$(document).ready(function(){
        var $category = $('ul li:gt(4):not(:last)');
        $category.hide();
        var $toggleBtn = $('.more a');
        $toggleBtn.toggle(function(){
            $category.show();
            $('.more a span')
                .text("显示部分分类");
            $('ul li').filter(":contains('前端'),:contains('css'),:contains('jQuery'),:contains('CMS')")
                .addClass("feature");
        },function(){
            $category.hide();
            $('.more a span')
                .text("显示全部分类");
            $('ul li').removeClass("feature");
        });
});

 

具体的效果可以看demo note-selector

 

由于学习过几年的c语言,因此在系统地学习jQuery一段时间后,明显感受到jQuery的简便,之前曾担心在没有js基础下先学习jQuery会破坏对原生js的认识和理解,但学习jQuery后反而因为jQuery的简便而更容易的理解原生的js,相信大家如果也用心学习jQuery,必将收获良多。

本文由 Kayo Lee 发表,本文链接:https://kayosite.com/jquery-study-notes-one-selector.html

评论列表

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail