JQuery 初探

放暑假了,终于有时间能学点前端的东西了。JQuery就是我第一个选择,锋利的JQuery。这本书真的很好。下面以一个ToggleButton形式的小例子开场吧。


引入JQuery库

在网页上引用JQuery并不是一件难事,我们通常来说有两种方式。

  • 引用本地文件:将下载好的JQuery当做src即可,如下

    <script type="text/javascript" src="jquery-2.2.4.min.js"></script>

    注意:JQuery库的引用要放到javascript代码的前面,这样才能保证脚本的正确执行。所以不妨放到head标签里面吧。

  • 以CDN 的方式引用:说白了,就是一个网址链接。推荐一个网址JQuery CDN 大全.具体的使用可以如下:

    <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>

优缺点对比 采用本地JS 采用CDN方式
页面加载速度 稍慢(取决于当时的网速)
简易程度 略繁琐(尤其是目录较深的时候) 简单方便,一个网址即可

Toggle 使用原理

在一个网页中要想获得toggle的效果,我们可以通过对其的visible属性进行判断,由此实现不同的业务逻辑。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Toggle Button Demo</title>
    <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
</head>
<body>
    <h1 id="togglebtn">I am the title!</h1>
    <span>Toggle</span>
<script>
var $title = $("#togglebtn");
var $togglebutton = $("span");
$togglebutton.click(function(){
    if($title.is(":visible")){
        $togglebutton.text("Toggle Button Open!");
        $title.hide();
    }else{
        $title.show();
        $togglebutton.text("Toggle Button Close!");
    }
})
</script>
</body>
</html>

网页效果:

I am the title!

Toggle


点击toggle,就可以观察到不同的现实情况了。

复杂点的toggle使用

这里分享一个书中的小例子,关于商城产品列表的展开与关闭。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>列表项展开与关闭的效果</title>
    <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
    <!-- 使用CDN的方式加载会比较的慢,所以尽量采用本地js文件加载-->
    <!-- <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> -->
</head>
<body>

    <div class="SubCategoryBox">
    <ul>
        <li>
            <a href="#">列表项*</a>
        </li>
        <li>
            <a href="#">列表项*</a>
        </li>
        <li>
            <a href="#">尼康</a>
        </li>
        <li>
            <a href="#">列表项*</a>
        </li>
        <li>
            <a href="#">佳能</a>
        </li>
        <li>
            <a href="#">列表项*</a>
        </li>
        <li>
            <a href="#">列表项*</a>
        </li>
        <li>
            <a href="#">列表项*</a>
        </li>
        <li>
            <a href="#">列表项*</a>
        </li>
        <li>
            <a href="#">列表项*</a>
        </li>
        <li>
            <a href="#">列表项*</a>
        </li>
        <li>
            <a href="#">列表项*</a>
        </li>
        <li>
            <a href="#">列表项*</a>
        </li>
        <li>
            <a href="#">列表项*</a>
        </li>
        <li>
            <a href="#">列表项*</a>
        </li>
        <li>
            <a href="#">列表项*</a>
        </li>
        <li>
            <a href="#">列表项*</a>
        </li>
    </ul>
</div>
<div class="showmore">
    <a href="listoperation.html">
        <span>显示全部品牌</span>
    </a>
</div>
<script type="text/javascript">
        // 等待DOM加载完毕
        $(function(){
            // 获取索引值大于5的品牌集合对象,出最后一条外
            var $category = $('ul li:gt(5):not(:last)');
            // 隐藏上面获取到的JQuery对象
            $category.hide();
            // 获取“显示全部品牌”按钮
            var $toggleBtn = $('div.showmore > a');
            // 给按钮添加点击事件
            $toggleBtn.click(function(){
                // 如果元素显示,则启用第一个逻辑
                if($category.is(":visible")){
                    $category.hide();
                    $('.showmore a span').css("background","green").text("显示全部品牌");
                    $('ul li').removeClass("promoted");
                // 如果元素不显示,则启用第二个逻辑
                }else{
                    $category.show();
                    $('.showmore a span').css("background","red").text("精简显示品牌");
                    $('ul li').filter(":contains('佳能'),:contains('尼康')").addClass("promoted");
                }
                // 为了让超链接不跳转,所以返回false即可
                return false;
            })
        })
    </script>

</body>
</html>

代码中脚本注释写的很清楚了,里面使用到了JQuery的多种选择器,以及过滤器的使用,是一个很实用的小技巧了。

实现的逻辑很朴素,就是对于刚接触JQuery的童鞋而言概念,名词会有点多。多练习,熟悉之后就好了。

上一篇:php读取3389脚本


下一篇:Bumped! 2017 ICPC North American Qualifier Contest (分层建图+dijstra)