JQuery 初探
2016-07-26 10:48
148 查看
放暑假了,终于有时间能学点前端的东西了。JQuery就是我第一个选择,锋利的JQuery。这本书真的很好。下面以一个
引用本地文件:将下载好的JQuery当做src即可,如下
注意:JQuery库的引用要放到javascript代码的前面,这样才能保证脚本的正确执行。所以不妨放到
以CDN 的方式引用:说白了,就是一个网址链接。推荐一个网址JQuery CDN 大全.具体的使用可以如下:
网页效果:
点击toggle,就可以观察到不同的现实情况了。
代码中脚本注释写的很清楚了,里面使用到了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的Ajax
- jQuery事件绑定on()、bind()与delegate() 方法详解
- jQuery的deferred对象详解
- JQuery之cookie增删改查操作
- jquery获取html包括当前本身
- jQuery动态分页bootpag插件
- jquery判断对象是否为空并遍历对象的简单实例
- 十分钟玩转 jQuery、实例大全
- css —— 选择器优先级及jQuery遍历元素常用方法
- jQuery判断数组中是否包含某个元素$.inArray("js", arr);
- JQuery cxSelect联动下拉菜单
- jQuery学习笔记一:简介
- 十分钟玩转 jQuery、实例大全
- jQuery.ajax() 函数详解
- JQuery移除事件
- jquery对话框去掉右上角叉子
- jquery.filedownload
- jQuery常用操作
- jquery分页插件jpaginate不兼容ie的问题