您的位置：首页 > Web前端 > JQuery

JQuery 初探

2016-07-26 10:48 204 查看
放暑假了，终于有时间能学点前端的东西了。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的童鞋而言概念，名词会有点多。多练习，熟悉之后就好了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航