《锋利的jQuery（第2版）》前六章内容-查缺补漏
2017-04-04 本文已影响402人
范小饭_
最近打算再重温一下《锋利的jQuery》，这次想查缺补漏，把里面我觉得有用的案例或者片段整理成文章。供自己以后复习和小伙伴们查看。
因为这两天，我只看到了第六章，捂脸，所以这篇文章整理的是《锋利的jQuery（第2版）》中前六章个人认为可以查缺补漏的地方，里面包含很多书中案例，比如利用cookie实现网页换肤，调整网页字体大小，表单应用等等、个人觉得可以学习。文章有点长，断断续续写了2天。看的时候还需耐心。
第六章的内容是Ajax，之前的文章中写过，想看的小伙伴，点击（jQuery-Ajax（详解））http://www.jianshu.com/p/d442a171100f
后几章的内容会在有空的时候陆续补全。
一、解决jQuery和其他库的冲突。
jQuery库在其他库之后导入，可以在任何时候调用jQuery.noConflict( )函数将变量$的控制权移交给其他JavaScript库，示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
引入prototype.js
引入 jQuery.js
-->
<script>
//省略其他代码
jQuery.noConflict();//将变量$的控制权移交给prototype.js
jQuery(function(){//使用jQuery
jQuery('p').click(function(){
alert( $(this).text() )
})
})
$('pp').style.display = 'none'//使用prototype.js隐藏元素
</script>
</body>
</html>
如果想确保jQuery不会与其他库冲突，但是又想自己定义一个快捷方式，可以进行如下操作。
<script>
//第二种方式
var $j = jQuery.noConflict(); //自定义一个快捷方式
$j(function(){
$j('p').click(function(){
alert( $j(this).text() );
})
})
$('pp').style.display = 'none'//使用prototype.js隐藏元素
</script>
如果不想给jQuery自定义这些备用名称，还想使用$而不管其他库的$()方法，同时也不想与其他库冲突。那么可以使用以下两种解决办法。
第一种
<script>
jQuery.noConflict();//将变量的控制权让渡给prototype
jQuery(function($){//使用jQuery设定页面加载时执行的函数
$('p').click(function(){//在函数内部继续使用$()方法
alert( $(this).text() )
})
})
$('pp').style.display = 'none'//使用prototype.js隐藏元素
</script>
第二种
<script>
jQuery.noConflict();//将变量的控制权让渡给prototype
(function($){ // 定义匿名 函数并设置形参为$
$(function(){ //内部匿名函数的$均为jQ
$('p').click(function(){//在函数内部继续使用$()方法
alert( $(this).text() )
})
})
})(jQuery)//执行匿名函数且传递实参jQuery
$('pp').style.display = 'none'//使用prototype.js隐藏元素
</script>
如果jQuery库在其他库之前就导入了，那么可以直接使用jQuery来做一些jQuery的工作。同时可以使用$(),方法作为其他库的快捷方式，无需设置JQuery.noConflict()函数。
<script>
//先导入jQuery
//再导入其他库
jQuery(function(){//使用jQuery
jQuery('p').click(function(){
alert( jQuery(this).text() )
})
})
$('pp').style.display = 'none'//使用prototype.js隐藏元素
</script>
二、关于jQuery选择器
关于整理的jQuery选择器，请看以前的文章，会有详细介绍。
1.需要注意的是，$('tt')获取的永远是对象，即使网页上没有此元素，因此当要用jQuery检查某个元素在网页上是否存在时，不能使用：
if ( $('#tt') ){
//do something
}
而要根据获取到元素的长度来判断
if ( $('#tt').length > 0 ){
//do something
}
或者转换成DOM对象来判断
if ( $('#tt')[0] ){
//do something
}
小注意
：input 选取的是所有的input、textarea、select、和button元素、、$( input )选取的input、
小案例
现在很多网站都会有一个案例，就是用户进入该页面的时候，品牌列表默认是精简显示的，用户可以单击商品列表下方的“显示全部品牌” 按钮来显示全部的品牌、当用户点击“显示全部品牌”按钮的同事，列表会将推荐的品牌的名字高亮显示，按钮里的文字也换成了精简显示品牌、
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
li{list-style: none;}
.promoted{background: red;}
</style>
<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>
</ul>
</div>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
<script src="jquery/jquery-3.0.0.min.js"></script>
<script>
//等待DOM加载完毕
$(function(){
//获得索引值大于5的品牌集合对象（除最后一条）
var category = $('ul li:gt(5):not(:last)');
category.hide();//隐藏上面获取到的jQuery对象
var toggleBtn = $('div.showmore > a');//获取到“显示全部品牌”按钮
toggleBtn.click(function(){//给按钮添加click事件
if(category.is(':visible')){//如果元素时显示的
category.hide();//就隐藏
$(this).find("span")
//改变北京图和文本
.css("background",'url(img/down.gif) no-repeat 0 0')
.text("显示全部品牌");
$('ul li').removeClass('promoted');
}else{
category.show();
$(this).find("span")
//改变背景图和文本
.css('background','url(img/up.gif) no-repeat 0 0')
.text('精简显示品牌')
//添加高亮显示
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass('promoted')
}
return false;//超链接不跳转
})
})
</script>
</body>
</html>
效果如下：
GIF.gif
三、关于DOM
详细整理的DOM。查看
1、关于删除节点
detach（）和remove（）一样，都是从DOM中去掉所有匹配的元素，但是需要注意的是，这个方法不会把匹配的元素从jQuery对象中删除、因而可以在将来再使用这些匹配的元素。与remove（）不同的是，所有绑定的事件、附加的数据都会保留下来、
empty（）是不是删除节点、是清空节点、清空节点中所有的后代节点和内容、而最后只剩下一个空标签默默支撑。
2、注意addClass（）和attr（）的区别？
01.jpg
3、切换函数
toggle()方法是循环执行代码2、和代码3l两个函数、
$btn.toggle(function(){
//代码2
},function(){
//代码3
})
toggle()方法还可以用于模拟鼠标连续单击事件。第一次单击，触发第一个函数fn1，当再次单击同一元素时，则触发指定的第2个函数fn2，如果有更多的函数，则一次触发
toggle( fn1，fn2，fn3...... )
4、判断是否含有某个样式
hasClass（）可以用来判断元素是否含有某个Class，如果有，则返回true，否则返回false
5、遍历节点
children（）、取得匹配元素的子元素集合
next（）、取得匹配元素的后面紧邻的兄弟元素
prev（）、取得匹配元素前面的兄弟元素
siblings（）、取得匹配元素前后哦的所有同辈元素
closest（）、该方法用于取得最近的匹配元素、首先检查当前元素是否匹配，如果匹配就直接返回元素本身，如果不匹配则向上查找父元素，逐级向上直接找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
parent（），parents（）、closest（）的区别
02.jpg
6、关于宽高
height（）取得匹配元素当前计算的高度值（px），也可以用来设置元素的高度，如果传递的值是一个数字，默认单位是px，如果要用其他单位（em），则必须传一个字符串。获得到的不带单位。
03.jpg
width（）方法可以用来获取或者设置元素的宽度
offset（）获取当前元素在当前饰扣的相对偏移，其中返回的对象包含两个属性，及top（offset.top）和left( offset.left )，他只对可见元素有效。
position（）获取元素相对于最近的一个position样式
设置为relative或者absolute的祖父节点的相对偏移，它返回的对象也包含两个属性，及top（position.top）和left（position.left）\
scrollTop()和scrollLeft()分别是获取元素滚动条距离顶端和局左侧的距离。
var scrollTop = $p.scrollTop();//获取元素的滚动条距离顶端的距离
var scrollLeft = $p.scrollLeft();//获取元素的滚动条距离左侧的距离
小案例
登录框失去焦点或者获得焦点的时候一些人性化的交互显示。代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="address" value="请输入邮箱地址"/>
<script src="jquery/jquery-3.0.0.min.js"></script>
<script>
//当获取焦点的时候
$('#address').focus(function(){
var tex = $(this).val();
if(tex == '请输入邮箱地址'){
$(this).val('');
}
})
//当失去焦点的时候
$('#address').blur(function(){
var tex = $(this).val();
if(tex == ''){
$(this).val('请输入邮箱地址');
}
})
</script>
</body>
</html>
效果如下
GIF.gif
四、事件对象的属性
jQuery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装，是的事件处理在各大浏览器下都可以正常运行而不需要进项浏览器类型判断。
1、event.type
可以获取到事件的类型
$( a ).click(function( event ){
alert( event.type )//获取事件类型
return false //阻止链接跳转
})
2、event.preventDefault( )方法
阻止默认的时间行为。
3、event.stopPropagation( )方法
阻止事件冒泡
4、event.target
获取触发事件的元素
5、event.relatedTarget
在标准DOM中，mouseover 和 mouseout 所发生的元素可以通过event.target来访问，相关元素可以通过event.relatedTarget来访问，event.relatedTarget在mouseover中相当于IE浏览器的event.formElement，在mouseout中相当于IE浏览器的event.toElement，jQuery对其进行了封装，使之能兼容各种浏览器。
6、event.pageX和event.pageY
用来获取光标相对于页面的x坐标和y坐标。如果页面上有滚动条，还要加上滚动条的宽度或高度。
7、event.which
鼠标单击事件中获取到鼠标的左、中、右键，在键盘事件中获取键盘的按键。
1==左键、2==中键、3==右键
8、event.metaKey
针对不同浏览器对键盘中的ctrl按键解释不同，jQuery也进行了封装，并且规定了event.metaKey为键盘事件中获取ctrl按键
五、动画
04.jpg
某网站视频展示效果案例
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
h2{
padding: 0px;
margin: 0px;
}
.v_caption{
height: 40px;
width: 560px;
margin-left: auto;
margin-right: auto;
background-color: pink;
}
.cartoon{
float: left;
line-height: 40px;
}
.highlight{
float: left;
line-height: 40px;
}
.highlight span{
display: inline-block;
height: 20px;
width: 20px;
border-radius: 50%;
line-height: 20px;
text-align: center;
margin-left: 5px;
margin-right: 5px;
}
.change_btn{
float: left;
}
ul{
list-style: none;
padding: 0;
}
.v_content{
overflow: hidden;
height: 200px;
width: 560px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.v_content_list{
height: 200px;
margin-left: auto;
margin-right: auto;
width: 2220px;
background-color: orange;
position: absolute;
}
.v_content_list li{
float: left;
margin-left: 10px;
margin-right: 10px;
}
.v_caption em{
float: right;
line-height: 40px;
}
.prev,.next{
line-height: 40px;
background-color: #CCCCCC;
}
.current{
background-color: red;
}
</style>
</head>
<body>
<div class="v_show">
<div class="v_caption">
<h2 class="cartoon" title="城市旅游">城市旅游</h2>
<div class="highlight">
<span class="current">1</span><span>2</span><span>3</span><!-- <span>4</span> -->
</div>
<div class="change_btn">
<span class="prev">上一页</span>
<span class="next">下一页</span>
</div>
<em><a href="#">更多>></a></em>
</div>
<div class="v_content">
<div class="v_content_list">
<ul>
<li><a href="#"></a><h4><a href="">北京</a></h4><span>播放<em>28.276</em></span></li>
<li><a href="#"></a><h4><a href="">北京</a></h4><span>播放<em>28.276</em></span></li>
<li><a href="#"></a><h4><a href="">北京</a></h4><span>播放<em>28.276</em></span></li>
<li><a href="#"></a><h4><a href="">北京</a></h4><span>播放<em>28.276</em></span></li>
<li><a href="#"></a><h4><a href="">北京</a></h4><span>播放<em>28.276</em></span></li>
<li><a href="#"></a><h4><a href="">北京</a></h4><span>播放<em>28.276</em></span></li>
<li><a href="#"></a><h4><a href="">北京</a></h4><span>播放<em>28.276</em></span></li>
<li><a href="#"></a><h4><a href="">北京</a></h4><span>播放<em>28.276</em></span></li>
<li><a href="#"></a><h4><a href="">北京</a></h4><span>播放<em>28.276</em></span></li>
<li><a href="#"></a><h4><a href="">北京</a></h4><span>播放<em>28.276</em></span></li>
<li><a href="#"></a><h4><a href="">北京</a></h4><span>播放<em>28.276</em></span></li>
<li><a href="#"></a><h4><a href="">北京</a></h4><span>播放<em>28.276</em></span></li>
</ul>
</div>
</div>
</div>
<script src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
var page = 1;
var i = 4;//每版放4张图片
//绑定单击事件
$(".next").click(function(){
//根据当前单击的元素获取到父元素
var $parent = $(this).parents(".v_show");
//找到“视频内容展示区域”
var $v_show = $parent.find(".v_content_list");
//找到“视频内容展示区域’外围的div
var $v_content = $parent.find(".v_caption");
var v_width = $v_content.width();
var len = $v_show.find("li").length;//总的图片数
//只要不是整数，就往大的方向取最小的整数
var page_count = Math.ceil(len/i);
if (!$v_show.is(":animated")) {
if (page==page_count) {
//最后一个版面，如果再点击，就应该调转到第一个版面
$v_show.animate({left:"0px"},"slow");
page = 1;
}else{
//每次换一个版面
$v_show.animate({left:"-="+v_width+"px"},"slow");
page++;
}
$parent.find("span").eq(page-1).addClass("current").siblings().removeClass("current");
}
})
</script>
</body>
</html>
效果如下：
GIF.gif
六、表单应用
一个表单有3个基本组成部分
1、表单标签
包含处理表单数据所需要用的服务器端程序URL以及数据提交到服务器的方法
2、表单域
包含文本框，密码框、隐藏域、多行文本框、复选框、单选框、下拉框、和文件上传框等
3、表单按钮
包含提交按钮，复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用于控制其他定义了处理脚本的处理工作。
获取和失去焦点改变样式
input：focus，textarea：focus{border：1px solid #f00；background：#f00}
多行文本框的应用
1、高度变化
例如某网站的评论框，可以控制评论康的高度
代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<form>
<div class="msg">
<div class="msg_caption">
<span class="bagger">放大</span>
<span class="smaller">缩小</span>
</div>
<div>
<textarea id="comment" rows="8" cols="20">
多行文本高度变化，多行文本高度变化，
多行文本高度变化，多行文本高度变化，
多行文本高度变化，多行文本高度变化，
多行文本高度变化，多行文本高度变化，
多行文本高度变化，多行文本高度变化，
多行文本高度变化，多行文本高度变化，
多行文本高度变化，多行文本高度变化，
多行文本高度变化，多行文本高度变化，
</textarea>
</div>
</div>
</form>
<script src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
//当快速单击变大的按钮时，单击的动画会追加到动画队列中，从而出现放开光标之后，图片还在继续滚动的情况
//为了解决这个问题，可以在动画加一个判断元素是否处于动画专套的代码
//如果不处于动画，则给她添加下一个动画。
$(function(){
var $comment = $("#comment");
$(".bagger").click(function(){
if (!$comment.is(":animated")) {
if ($comment.height()<500) {
// 重新设置高度，在原有基础上加50
$comment.animate({height:"+=50"},400);
}
}
})
$(".smaller").click(function(){
if (!$comment.is(":animated")) {
if ($comment.height()>50) {
//重新设置高度，在原有基础上减50
$comment.animate({height:"-=50"},400);
}
}
})
})
</script>
</body>
</html>
效果如下
GIF.gif
关于全选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
你喜欢的运动是？<br />
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<input type="button" id="checkedAll" value="全选" />
<input type="button" id="checkedNo" value="全不选" />
<input type="button" id="checkedRev" value="反选" />
<input type="button" id="send" value="提交" />
</form>
<script src="jquery/jquery-3.0.0.min.js"></script>
<script>
//全选
$('#checkedAll').click(function(){
$('[name=items]:checkbox').prop('checked',true)
})
//全不选
$('#checkedNo').click(function(){
$('[name=items]:checkbox').prop('checked',false)
})
//反选
$('#checkedRev').click(function(){
$('[name=items]:checkbox').each(function(){
//jQuery设置反选
$(this).attr("checked",$(this).attr("checked"))
//原生反选
this.checked = !this.checked
})
})
//提交按钮
$("#send").click(function(){
var str = '你选中的是：\r\n';
$('[name=items]:checkbox:checked').each(function(){
str += $(this).val() + "\r\n";
})
alert(str)
})
</script>
</body>
</html>
效果如下
GIF.gif
关于下拉列表框的应用
常见一个小效果就是用户可以通过中间的按钮将左边选中的选项添加到右边，也可以将右边的选项添加到左边，或者双击选项，将其添加给对方
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="centent">
<select multiple id="select1" style="height: 160px;width: 160px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
<option value="8">选项8</option>
<option value="9">选项9</option>
</select>
<div>
<span id="add">选中添加到右边</span>
<span id="addAll">全部添加到右边</span>
</div>
<div class="centent">
<select multiple id="select2" style="height: 160px;width: 100px;">
</select>
<div>
<span id="remove">选中删除到左边</span>
<span id="removeAll">全部删除到左边</span>
</div>
</div>
</div>
<script src="jquery/jquery-3.0.0.min.js"></script>
<script>
//单击添加给对方
$('#add').click(function(){
var opactions = $("#select1 option:selected");
var rem = opactions.remove();
rem.appendTo("#select2")
})
//全部添加给对方
$('#addAll').click(function(){
var opactions = $("#select1 option");
var rem = opactions.remove();
rem.appendTo("#select2")
})
//双击添加给对方
$('#select1').dblclick(function(){
var opactions = $("option:selected");
var rem = opactions.remove();
rem.appendTo("#select2")
})
//如果想要将右边的选项添加给左边，代码也完全相同
</script>
</body>
</html>
效果如下
GIF.gif
表格的展开和闭合
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
table{
width: 300px;
}
.selected{
color: red;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row_1"><td colspan="3">前台设计组</td></tr>
<tr class="child_row_1">
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr class="child_row_1">
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr class="parent" id="row_2"><td colspan="3">前台开发组</td></tr>
<tr class="child_row_2">
<td>王五</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr class="child_row_2">
<td>赵六</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr class="parent" id="row_3"><td colspan="3">前台设计组</td></tr>
<tr class="child_row_3">
<td>周七</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr class="child_row_3">
<td>赵八</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<script src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
//在这个表格中，给每个tr元素设置属性是非常重要的
//即给非类型设置了class=parent的属性，同时给分别给他们设置了id值
//而下面的行，只设置了calss属性分，并且这个class属性的值是在id
//的基础上同过加上child_来设置的
//运行代码后，当用户单击表格的父行后，相应的子行会收缩
// $(function(){
// $(".parent").click(function(){
// $(this).toggleClass("selected")
// .siblings(".child_"+this.id).toggle();
// })
// })
//当用户进入页面时，默认收缩，点击时展开，只需触发点击事件
$(function(){
$(".parent").click(function(){
$(this).toggleClass("selected")//添加或者删除高亮
.siblings(".child_"+this.id).toggle();//显示/隐藏所谓的子行
}).click();
})
</script>
</body>
</html>
效果如下
GIF.gif
表格内容分筛选
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
table{
width: 300px;
}
</style>
</head>
<body>
<input type="text" name="" class="Name">
<table border="1px" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row_1"><td colspan="3">前台设计组</td></tr>
<tr class="child_row_1">
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr class="child_row_1">
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr class="parent" id="row_2"><td colspan="3">前台开发组</td></tr>
<tr class="child_row_2">
<td>王五</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr class="child_row_2">
<td>赵六</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr class="parent" id="row_3"><td colspan="3">前台设计组</td></tr>
<tr class="child_row_3">
<td>周七</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr class="child_row_3">
<td>赵八</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<script src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
//选择器contains，能匹配包含指定文本的元素
// $("tr:contains("王五")").addClass("selected");
// $(function(){
// $("tbody tr").hide()
// $("tr:contains('王五')").show();
// })
//在表格上方添加一个文本框，用于根据用户输入的内容来筛选表格内容
//然后为文本框绑定keyup事件
$(function(){
$(".Name").keyup(function(){
$("tbody tr").hide();
$("tr:contains('"+( $(this).val() )+"')").show();
})
})
</script>
</body>
</html>
效果如下
GIF.gif
调整网页字体大小
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
.msg{
width: 200px;
}
</style>
</head>
<body>
<div class="msg">
<div class="msg_caption">
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
</div>
<div>
<p id="para">
hriuewyruiehiurcohuyugeyugryeureiwhwjoiwhuiehfewdewjn
ehwiurhyuireuiwhroiewhrioewjrieowjqroiewjrioewjrioewr
jwiojeiowhriuewhriuewhiurewhiurewhqiurewhiurewuriehwiur
</p>
</div>
</div>
<script src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("span").click(function(){
//获取当前字体的大小
var thisEle = $("#para").css("font-size");
//parseInt的第二个参数是进制
var textFontSize = parseInt(thisEle,10);
//获取单位，slice()方法返回字符串中指定的字符开始的一个字符串
//因为这里的单位是px两个字符，所以指定从倒数第二个字符开始
//再后面再次设置字体大小时，就可以直接把单位拼接上
var unit = thisEle.slice(-2);
var cName = $(this).attr("class");
if (cName=="bigger") {
if (textFontSize <= 40) {
textFontSize += 2;
}
}else if (cName=="smaller") {
if (textFontSize >=12) {
textFontSize -= 2;
}
}
$("#para").css("font-size",textFontSize+unit);
})
})
</script>
</body>
</html>
效果如下
GIF.gif
利用cookie实现网页换肤
现在很多网站更加注重用户自定义，如在网页上用户可以自定义皮肤，并且要很好的计入cookie中，这样用户下次访问时，就可以显示用户自定义的皮肤了。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" >
<style type="text/css">
ul{
height: 40px;
list-style: none;
padding: 0px;
margin: 0px;
}
#skin li{
height: 20px;
width: 20px;
border: 1px solid #ccc;
margin: 10px;
float: left;
}
#skin_0{
background-color: #CCC;
}
#skin_1{
background-color: purple;
}
#skin_2{
background-color: red;
}
#skin_3{
background-color: blue;
}
#skin_4{
background-color: orange;
}
#skin_5{
background-color: green;
}
</style>
</head>
<body>
<ul id="skin">
<li id="skin_0" title="灰色" class="selected"></li>
<li id="skin_1" title="紫色"></li>
<li id="skin_2" title="红色"></li>
<li id="skin_3" title="蓝色"></li>
<li id="skin_4" title="橙色"></li>
<li id="skin_5" title="绿色"></li>
</ul>
<div id="div_side_0">
<div id="news">
<h1 class="title">时事新闻</h1>
</div>
</div>
<div id="div_side_1">
<div id="game">
<h1 class="title">娱乐新闻</h1>
</div>
</div>
<script src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script type="text/javascript">
//网页换肤的原理就是通过调用不同的样式表文件来实现不同皮肤的切换
//并且需要将换好的皮肤计入Cookie中，这样用户下次访问时，就可以显示用户自定义的皮肤了
//注意：在设计HTML代码时，用了一些小技巧，就是将皮肤选择按钮的<li>元素的id与网页皮肤样式文件名称设置的相同，从而实现换肤
//然后为HTML代码添加样式，注意HTml结构要有一个带iD 的样式表连接，通过操作该连接的href的属性值，从而实现换肤
// <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" >
//jquery-3中有一款Cookie插件，他能简化Cookie的操作，
//将其引入
// var $li = $("#skin li");
// $li.click(function(){
// $("#"+this.id).addClass("selected")
// .siblings().removeClass("selected");
// $("#cssfile").attr("href","css/"+this.id+".css");//设置不同皮肤
// $.cookie("MyCssSkin",this.id,{path:'/'.expires:10});//计入Cookie
// })
// var cookie_skin = $.cookie("MyCssSkin");
// if (cookie_skin) {
// $("#"+cookie_skin).addClass("selected")
// .siblings().remove("selected");
// $("#cssfile").attr("href"."css/"+cookie_skin+".css")//设置不同皮肤
// $.cookie("MyCssSkin",this.id,{path:'/'.expires:10})
// }
//此时颜色可以正常切换，而且也能保存在Cookie中，当用户刷新网页后，仍然是当前选择的皮肤。
//在上面的代码中，click事件中的函数内容与if（cookie_skin）{}
//内的判断内容相似，只是有一个变量不同，因此可以通过传递不同的参数，可以多次调用
function switchSkin(skinName){
$("#"+skinName).addClass("selected") //当前li被选中
.siblings().remove("selected"); //其他li没有被选中
$("#cssfile").attr("href","css/"+skinName+".css")//设置不同皮肤
$.cookie("MyCssSkin",skinName,{path:'/',expires:10}) //存在cookie中
}
//然后在单击事件和if内分别调用对应的参数
$(function(){
var $li = $("#skin li");
$li.click(function(){
switchSkin(this.id);
})
var cookie_skin = $.cookie("MyCssSkin");
//如果cookie中存在以前设置的颜色，那么直接调用
if (cookie_skin) {
switchSkin(cookie_skin);
}
})
// }
</script>
</body>
</html>
效果如下
GIF.gif
文章有点耗时，看过的小伙伴给个辛苦钱，点个赞小饭就开心啦~~
