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的童鞋而言概念，名词会有点多。多练习，熟悉之后就好了。

JQuery 初探的更多相关文章

jQuery初探 jQuery选取和操纵元素的特点
jQuery初探 jQuery选取和操纵元素的特点 JavaScript选取元素先来看看不用jQuery的时候我们是怎么处理元素选取的. JavaScript选取元素的时候,可以根据id获取元素,当 ...
JQuery初探
[TOC] jquery 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行"操作"(actions). jQuery 使用的语法是 XPath 与 CSS ...
第二章：jQuery初探
一.引入jQuery XXXX.js文件 <script>标签 1.版本选择当前jQuery有两个分支 1.x 支持ie6.7.8 jquery-1.11.2.js:未经过压缩,适合同学 ...
[Web 前端] 026 jQuery 初探
目录 1. jQuery 简介 2. jQuery 的简单操作 2.1 jQuery 选择器 2.1.1 简介 2.1.2 基础选择器 2.2 过滤获取 2.3 父子关系获取 3. jQuery 元素 ...
jQuery入门、jQuery选择器、jQuery操作
一.什么是jQuery及如何使用 1.1 jQuery 简介 jQuery是一个兼容多浏览器的javascript函数库(把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率.),核心理 ...
初探jquery.slimscroll.js和iscroll5.js
网上关于实现各种滚动效果的插件不胜枚举,这里,我简单介绍一下自己用过的两款比较有代表性的插件: 1.jquery.slimscroll.js,需要先引入jquery类库,主要用于模拟传统的浏览器滚动条 ...
【初探移动前端开发05】jQuery Mobile (整合版)
前言为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...
【初探移动前端开发05】jQuery Mobile (下)
前言继续我们移动端的学习,今天到了List相关了. 本文例子请使用手机查看 List列表在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好 ...
【初探移动前端开发04】jQuery Mobile (中)
前言昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...

随机推荐

关于Go 的 Interface
最近在用Go语言写程序, 其中遇到一个场景:写了一个接口,3个实现接口的struct. 另外一个struct包含此接口,根据构造函数赋予不同的结构实现. 一开始struct里写的是接口的地址,但是在创 ...
HtmlUnit入门一
htmlunit 是一款开源的java 页面分析工具,读取页面后,可以有效的使用htmlunit分析页面上的内容. 项目可以模拟浏览器运行,被誉为java浏览器的开源实现.是一个没有界面的浏览器. 采 ...
Hibernate--对象关系
在hibernate中,关联关系映射分为单向关联和双向关联.共有七种关系 ·@Many To One ·@One To Many(单向) ·@One To Many(多向) ·@One To One( ...
[SDOI 2009]Elaxia的路线
Description 最近,Elaxia和w**的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们必须合理地安排两个人在一起的时间.Elaxia和w**每天都要奔波于宿舍和实验室之间, ...
[HNOI2006]公路修建问题
题目描述输入输出格式输入格式: 在实际评测时,将只会有m-1行公路输出格式: 输入输出样例输入样例#1: 复制 4 2 5 1 2 6 5 1 3 3 1 2 3 9 4 2 4 6 1 3 ...
[poj1279]Art Gallery
题意:求多边形的核的面积. 敲一下半平面交模板........ 然后我wa了一早上就因为写了%lf 不知道poj什么破机制还不能用lf的,真的想跳楼 #include<iostream> ...
数据挖掘实战<1>:数据质量检查
数据行业有一句很经典的话--"垃圾进,垃圾出"(Garbage in, Garbage out, GIGO),意思就是,如果使用的基础数据有问题,那基于这些数据得到的任何产出都是没 ...
Spring学习笔记1——入门
Spring是一个基于IOC和AOP的结构J2EE系统的框架 IOC 反转控制是Spring的基础,Inversion Of Control 简单说就是创建对象由以前的程序员自己new 构造方法来调 ...
c语言的第三次作业
(一)改错题计算f(x)的值:输入实数x,计算并输出下列分段函数f(x)的值,输出时保留1位小数. 输入输出样例1: Enterr x: 10.0 f(10.0) = 0.1 输入输出样例2: En ...
Tensorflow从入门到精通之——Tensorflow基本操作
前边的章节介绍了什么是Tensorflow,本节将带大家真正走进Tensorflow的世界,学习Tensorflow一些基本的操作及使用方法.同时也欢迎大家关注我们的网站和系列教程:http://ww ...