一个月来,公司的项目近于结尾,很多问题暴露了出来。比如,jquery的遍历和异步ajax的内容发生了冲突,jquery已经执
行后,新增加的ajax内容无法执行事件,这时候的解决办法就是使用传统的onclick()等事件来即时调用传统js函数,在事
件中传入this对象,如onclick(this),再使用jquery在函数中操作。
行后,新增加的ajax内容无法执行事件,这时候的解决办法就是使用传统的onclick()等事件来即时调用传统js函数,在事
件中传入this对象,如onclick(this),再使用jquery在函数中操作。
三、其他应用
1 网页字体大小控制(P164)
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
<p id="para"></p>
$(function(){
$("span").click(function(){
var thisEle = $("#para").css("font-size");//获取当前字号,带单位
var textFontSize = parseFloat(thisEle,10);//解析字符串并返回数字,参数10代表10进制
var unit = thisEle.slice(-2);//slice()方法返回字符串中从指定的字符开始的一个子字符串,
//用以截取单位
var cName = $(this).attr("class");//此处和下面的判断很有意思,可以免得再写一遍代码
if(cName == "bigger"){
if(textFontSize <= 22){//限制无限放大
textFontSize += 2;//加大字号
}
}else if(cName == "smaller"){
if(textFontSize >= 12){//限制无限缩小
textFontSize -= 2;
}
}
$(#para).css("font-size",textFontSize + unit);//记得拼上单位
});
});
2 网页选项卡(P167)
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">选项1</li>
<li class="selected">选项2</li>
<li class="selected">选项3</li>
</ul>
</div>
<div class="tab_box">
<div>选项1对应内容</div>
<div class="hide">选项2对应内容</div>
<div class="hide">选项3对应内容</div>
</div>
</div>
var $div_li = $(".tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected").siblings().removeClass("selected");//当前选项设置选中状态,
//其他选项移除选中状态
var index = $div_li.index(this);//获取当前单击的li元素在全部li元素中的索引,这个很有意思
$(".tab_box > div").eq(index).show().siblings().hide();//根据选项的索引
//设置选项对应内容的显示或隐藏状态
}).hover(function(){
$(this).addClass("hover");//设置鼠标经过状态
},function(){
$(this).removeClass("hover");//移除鼠标经过状态
});
3 网页换肤(P169)
通过更换css并且记录进cookie实现换肤功能
<!--引入带id的css-->
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
<!--引入cookie插件,本插件下载地址:http://plugins.jquery.com/project/cookie,
//介绍见本书P237-->
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<!--换肤按钮-->
<ul id="skin">
<li id="skin_0" title="皮肤0" class="selected">皮肤0</li>
<li id="skin_1" title="皮肤1">皮肤1</li>
<li id="skin_2" title="皮肤2">皮肤2</li>
</ul>
var $li = $("#skin li");
$li.click(function(){
$("#" + this.id).addClass("selected").siblings().removeClass("selected");
//以id为选择器,当前设置选中,其他移除选中
$("#cssfile").attr("href","css/" + this.id + ".css");//把id赋给href作为css名称,
//达到换肤目的
$.cookie("MyCssSkin",this.id,{path: '/', expires:10});//把当前id记入cookie并命名
});
var cookie_skin = $.cookie("MyCssSkin");
if(cookie_skin){//判断cookie存在
$("#"+cookie_skin).addClass("selected").siblings().removeClass("selected");
//以cookie记录的id为选择器,当前设置选中,其他移除选中
$("#cssfile").attr("href","css/" + cookie_skin + ".css");
//cookie记录的id赋给href作为css名称,达到换肤目的
$.cookie("MyCssSkin",cookie_skin,{path: '/', expires:10});
//把cookie记录的id重新记入cookie
}
因click事件中的函数内容与if(cookie_skin){}内的判断内容相似,只有一个变量不同,因此可以通过给函数传递不同的参
数,达到多次调用(抽象化)的目的。
function switchSkin(skinName){
$("#"+skinName).addClass("selected").siblings().removeClass("selected");
$("#cssfile").attr("href","css/" + skinName + ".css");
$.cookie("MyCssSkin",skinName,{path: '/', expires:10});
}
$(function(){
var $li = $("#skin li");
$li.click(function(){
switchSkin(this.id);
});
var cookie_skin = $.cookie(MyCssSkin");
if(cookie_skin){
switchSkin(cookie_skin);
}
});