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的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...
随机推荐
- codevs 1006 等差数列
提交地址:http://codevs.cn/problem/1006/ 1006 等差数列 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Des ...
- [BZOJ 4919]大根堆
Description 题库链接 给定一棵 \(n\) 个节点的有根树,每个点有一个权值 \(val_i\) .你需要选择尽可能多的节点,使得:对于任意两个点 \(i,j\) ,如果 \(i\) 在树 ...
- [HNOI2003]激光炸弹
Description 一种新型的激光炸弹,可以摧毁一个边长为R的正方形内的所有的目标.现在地图上有n个目标,用整数,表示目标在地图上的位置,每个目标都有一个价值.激光炸弹的投放是通过卫星定位的,但其 ...
- C++Primer学习——类型转换
无符号之间的运算 当一个是无符号类型,另外一个是带符号类型: 如果无符号不小于带符号,那么带符号转换成无符号. 如果无符号小于带符号,当无符号类型的所有值都能存到带符号中时,则无符号转换成带符号,否则 ...
- hdu 5514 Frogs(容斥)
Frogs Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submi ...
- codeforces round #405 B. Bear and Friendship Condition
B. Bear and Friendship Condition time limit per test 1 second memory limit per test 256 megabytes in ...
- NOIP2014-3-15模拟赛
Problem 1 高级打字机(type.cpp/c/pas) [题目描述] 早苗入手了最新的高级打字机.最新款自然有着与以往不同的功能,那就是它具备撤销功能,厉害吧. 请为这种高级打字机设计一个程序 ...
- 2015 多校联赛 ——HDU5386(暴力)
Sample Input 1 3 5 2 2 1 2 3 3 2 1 3 3 3 3 3 3 3 3 3 3 H 2 3 L 2 2 H 3 3 H 1 3 L 2 3 Sample Output ...
- hdu 2896 病毒侵袭 AC自动机(查找包含哪些子串)
病毒侵袭 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- OCP 认证考试报名费技巧题库051052053解析合格线
本人于2017年4月22日通过参加OCP考试,第一次参加,一天之内考了三门,三门一次性通过,052 - 95% ,053 - 86% ,051 - 100% 一.关于考试考试报名费: 052:158$ ...