jQuery实例应用(一)

暂时实现目前jQuery应用,以后会渐渐添加一些新的jQuery应用

 

1.实现动态加载显示内容

jQuery动态加载内容.htm

CSS:

a{ text-decoration:none; color:White;}

a:hover{ font-weight:bolder;}  当鼠标移到a上时字体变粗,以便区别

ul{ list-style-type:none; padding-left:0px;}   ul默认padding-left:40px  这个可以看开发人员工具的盒子模型

li{ float:left; padding:5px; background-color:Green;}  float:left使li横排显示

#content{ clear:both;}

http://hi.baidu.com/eb21/blog/item/4b0b54cec3d4470a93457e4e.html

http://www.xfsq.net/thread-8285-1-1.html       ul li 样式

jQuery:

$(function(){

$("#dh li a").click(function(){

var loadurl=$(this).attr("href");

$("#content").hide("slow",toLoad);

function toLoad(){

$("#content").load(loadurl+" #content"); 每个页面的都有id=content的div 方便加载到哪里及从哪里加载

$("#content").show("normal");}

return false;     这一句是必须的,除了结束该单击事件外(反正该执行的都执行完了) 还可以取消(return true或没有就是不取消)某元素的默认动作,如这里是标签a,将不会执行浏览器默认动作即转向href指向的页面

})

})

<ul id="dh">

<li><a href="jQuery动态加载内容.htm">首页</a></li>

<li><a href="Login.htm">登录</a></li>

<li><a href="About.htm">About</a></li>

</ul>

<div id="content">

这里是首页!

</div>

Login.htm

<div id="content">

用户名<input type="text" />

密码<input type="password" />

<input type="button" value="提交" />

</div>

About.htm

<div id="content">

这里是About页面!

</div>

以上基本实现了动态加载显示内容的效果,但还有些问题

①用户点击一个导航按钮后,该导航按钮应该显示不同样式以便用户知道点了哪个,可添加以下代码

$("#dh li a").click(function(){

var loadurl=$(this).attr("href");

$("#content").hide("slow",toLoad);

function toLoad(){

$("#content").load(loadurl+" #content");

$("#content").show("normal");}

$("#dh li").filter(".red").removeClass("red");

$(this).parent().addClass("red");

return false;

})

使用filter()函数过滤出之前点击的导航按钮(这里之前点击的导航按钮css类为red)  为当前点击的导航按钮添加css类red(由于点击事件是位于li里的a,所以需要parent选出当前a的父元素li) 

②当动态加载内容时需要有一个正在加载页面...的提示,而load(url,[callback])函数的第二个参数函数是在请求完成时进行的,所以不行,可像如下操作

$("#dh li a").click(function(){

var loadurl=$(this).attr("href");

$("#content").hide("slow",toLoad);

$("#tishi").remove();       避免每次单击页面都多一个提示

$("#tishidiv").append('<span id="tishi" style="background-color:Red; color:White;">正在加载页面...</span>');

function toLoad(){

$("#content").load(loadurl+" #content");

$("#content").show("normal");

$("#tishi").fadeOut("normal");}     待load()请求执行完毕后淡出提示

$("#dh li").filter(".red").removeClass("red");

$(this).parent().addClass("red");

return false;

})

 

2.利用cookie插件实现网页主题的设置

<link id="css" href="red.css" rel="stylesheet" type="text/css" />

<script src="jQuery-cookie.js" type="text/javascript"></script>     cookie插件

<input type="button" id="blue" value="蓝色主题" />

<input type="button" id="red" value="红色主题" />

$("#blue").click(function(){

$("#css").attr({href:"blue.css"});

$.cookie("style","blue.css",{expires:1});

})

$("#red").click(function(){

$("#css").attr({href:"red.css"});

$.cookie("style","red.css",{expires:1});

})

var getcookie=$.cookie("style");

if(getcookie){

$("#css").attr({href:getcookie});}

该jQuery插件的使用   $("name","value",{expires:保留天数});   cookie名  cookie值  cookie保留天数

$("name",null);   删除某cookie

DownLoad jQuery.cookie.js

 

3.键盘快捷键切换页面

<ul id="ult">

<li id="zy">主页</li>

<li id="jy">交友</li>

<li id="rz">日志</li>

</ul>

<div id="dzy" class="nr">这是主页</div>

<div id="djy" class="nr">这是交友页</div>

<div id="drz" class="nr">这是日志页</div>

$(function(){

$(".nr").css("display","none");       先将三个div全部不显示

$("#dzy").css("display","block");   只显示主页div

$(document).keypress(function(e){   $(document).keypress()随时捕获按键事件

switch(e.keyCode){   keypress(fn)事件会给回调函数传递一个值,通过该值的keyCode属性获取按键的ASCII码值

case 97:showdiv("#dzy");break;

case 115:showdiv("#djy");break;

case 100:showdiv("#drz");break;}})

function showdiv(divid){

$(".nr").css("display","none");

$(divid).css("display","block");}

})

以上操作虽然能实现按键切换页面,但需要知道每个按键的ASCII码值不是很方便,并且不能使用组合键的形式,下面我们将用到一个js-hotkeys插件来解决这些问题  下载地址:http://code.google.com/p/js-hotkeys/

<script src="jquery.hotkeys-0.7.9.js" type="text/javascript"></script>  该插件封装了bind unbind俩函数

$(expression).bind(types,option,handler)   $(expression).bind(types,options,handler)

types: "keydown"  "keyup"  "keypress"

options:{combi:'alt+a',disableinInput:true}  当只设置combi时可只写字符串"alt+a"  disableinInput是设置是否当光标位于文本框时依然响应按键事件  true就是不响应,这样即使按了触发按键事件的按钮依然能输入  false就是响应

handler:响应函数

把上面的jQuery代码改成使用该插件的写法

$(function(){

$(".nr").css("display","none");

$("#dzy").css("display","block");

function showdiv(divid){    

$(".nr").css("display","none");

$(divid).css("display","block");}

$(document).bind('keydown',{combi:'alt+a',disableinInput:true},function(){

showdiv("#dzy");return false;})

$(document).bind('keydown',{combi:'alt+s',disableinInput:true},function(){

showdiv("#djy");return false;})

$(document).bind("keydown","alt+d",function(){

showdiv("#drz");return false;})

$(document).bind("keydown","ctrl+a",function(){

alert("ctrl+a");return false;})

})

有两点要说,一是一般组合键对应的是keyDown,否则你想你两个键都要按下再弹起后才触发事件不符合操作习惯

二是里面用到的return false;语句,前面也说过,return false可以阻止一些浏览器默认的动作,如上面的ctrl+a本来触发完按键事件后浏览器会执行全选动作,但由于加了return false;语句,此处将不会执行全选动作。

 

4.实现软键盘

 

<form action="jQuery软键盘.htm">
用户名:<input type="text" /><br />
密码:<input type="password" id="pwd" /><b id="softkeyboard">软键盘</b><br />
<input type="submit" value="提交" />
<div id="keyboard">
<div id="row0">
<input name="accent" type="button" value="`" />
<input name="1" type="button" value="1" />
<input name="2" type="button" value="2" />
<input name="3" type="button" value="3" />
<input name="4" type="button" value="4" />
<input name="5" type="button" value="5" />
<input name="6" type="button" value="6" />
<input name="7" type="button" value="7" />
<input name="8" type="button" value="8" />
<input name="9" type="button" value="9" />
<input name="0" type="button" value="0" />
<input name="-" type="button" value="-" />
<input name="=" type="button" value="=" />
<input name="backspace" type="button" value="Backspace" />
</div>
<div id="row0_shift">
<input name="tilde" type="button" value="~" />
<input name="exc" type="button" value="!" />
<input name="at" type="button" value="@" />
<input name="hash" type="button" value="#" />
<input name="dollar" type="button" value="$" />
<input name="percent" type="button" value="%" />
<input name="caret" type="button" value="^" />
<input name="ampersand" type="button" value="&" />
<input name="asterik" type="button" value="*" />
<input name="openbracket" type="button" value="(" />
<input name="closebracket" type="button" value=")" />
<input name="underscore" type="button" value="_" />
<input name="plus" type="button" value="+" />
<input name="backspace" type="button" value="Backspace" />
</div>
<div id="row1">
<input name="q" type="button" value="q" />
<input name="w" type="button" value="w" />
<input name="e" type="button" value="e" />
<input name="r" type="button" value="r" />
<input name="t" type="button" value="t" />
<input name="y" type="button" value="y" />
<input name="u" type="button" value="u" />
<input name="i" type="button" value="i" />
<input name="o" type="button" value="o" />
<input name="p" type="button" value="p" />
<input name="[" type="button" value="[" />
<input name="]" type="button" value="]" />
<input name="\" type="button" value="\" />
</div>
<div id="row1_shift">
<input name="Q" type="button" value="Q" />
<input name="W" type="button" value="W" />
<input name="E" type="button" value="E" />
<input name="R" type="button" value="R" />
<input name="T" type="button" value="T" />
<input name="Y" type="button" value="Y" />
<input name="U" type="button" value="U" />
<input name="I" type="button" value="I" />
<input name="O" type="button" value="O" />
<input name="P" type="button" value="P" />
<input name="{" type="button" value="{" />
<input name="}" type="button" value="}" />
<input name="|" type="button" value="|" />
</div>
<div id="row2">
<input name="a" type="button" value="a" />
<input name="s" type="button" value="s" />
<input name="d" type="button" value="d" />
<input name="f" type="button" value="f" />
<input name="g" type="button" value="g" />
<input name="h" type="button" value="h" />
<input name="j" type="button" value="j" />
<input name="k" type="button" value="k" />
<input name="l" type="button" value="l" />
<input name=";" type="button" value=";" />
<input name="'" type="button" value="'" />
</div>
<div id="row2_shift">
<input name="A" type="button" value="A" />
<input name="S" type="button" value="S" />
<input name="D" type="button" value="D" />
<input name="F" type="button" value="F" />
<input name="G" type="button" value="G" />
<input name="H" type="button" value="H" />
<input name="J" type="button" value="J" />
<input name="K" type="button" value="K" />
<input name="L" type="button" value="L" />
<input name=":" type="button" value=":" />
<input name='"' type="button" value='"' />
</div>
<div id="row3">
<input name="Shift" type="button" value="Shift" id="shift" />
<input name="z" type="button" value="z" />
<input name="x" type="button" value="x" />
<input name="c" type="button" value="c" />
<input name="v" type="button" value="v" />
<input name="b" type="button" value="b" />
<input name="n" type="button" value="n" />
<input name="m" type="button" value="m" />
<input name="," type="button" value="," />
<input name="." type="button" value="." />
<input name="/" type="button" value="/" />
</div>
<div id="row3_shift">
<input name="Shift" type="button" value="Shift" id="shifton" />
<input name="Z" type="button" value="Z" />
<input name="X" type="button" value="X" />
<input name="C" type="button" value="C" />
<input name="V" type="button" value="V" />
<input name="B" type="button" value="B" />
<input name="N" type="button" value="N" />
<input name="M" type="button" value="M" />
<input name="lt" type="button" value="&lt;" />
<input name="gt" type="button" value="&gt;" />
<input name="?" type="button" value="?" />
</div>
<div id="spacebar">
<input type="button" name="spacebar"  value=" " />
</div>
</div>
</form>

以上row0,1,2,3代表还没按shif键时的键盘  row0,1,2,3_shift代表按下shift键时的键盘 

CSS:

<style type="text/css">       刚开始键盘是隐藏的

#keyboard{ position:absolute; display:none; border:1px solid #ccc; width:640px; padding:10px; cursor:move;}  鼠标移上时变可移动状

#spacebar input{ width:180px;  margin-left:200px;}

#shift,#shifton{ width:70px; text-align:left;}

#row0_shift,#row1_shift,#row2_shift,#row3_shift{display:none;}  没按shift键时这些部分隐藏

#row0,#row0_shift{ padding-left:10px;}

#row1,#row1_shift{ padding-left:50px;}

#row2,#row2_shift{ padding-left:60px;}

#shifton{ border-left:3px solid #000; border-top:3px solid #000;}  按了shift键时shift键的样式

#softkeyboard{ cursor:pointer;}

</style>

jQuery:

<script type="text/javascript">

$(function(){

$("#softkeyboard").click(function(e){  单击"软键盘"

var mleft=e.pageX+5+"px";    设置显示的软件盘CSS的left及top值

var mtop=e.pageY+5+"px";

$("#keyboard").css({left:mleft,top:mtop}).toggle();  toggle显示软键盘

})

})

</script>

http://kendezhu.iteye.com/blog/986032最后讲的鼠标相关事件中都可以为fn传递一个参数,该参数的clinetX,clientY或pageX,pageY代表点击匹配元素或滑到匹配元素时鼠标的坐标,如下每当鼠标滑到xxx上时记录鼠标的坐标

$("#xxx").mouseover(function(e){

$("#xxx").append(e.clientX+","+e.pageY);})

下面来实现使用软键盘完成输入,往文本框里输入文字或删除文字需要用到一个插件fieldSelection

下载地址:http://plugins.jquery.com/project/fieldselection

var shifton=false;  表明一开始shift键处于没按状态

$("#keyboard input").click(function(){

if($(this).val()=="Backspace"){   按了退格键,但此处利用插件fieldSelection的replaceSelection函数没有实现(这里实现了)

$("#pwd").replaceSelection("",true);}replaceSelection函数可将选中文本由第一个参数替换,如果没选文本则在光标的后面添加第一个参数

else if($(this).val()=="Shift"){  按了shift键

if(shifton==false){

onShift(1); shifton=true;  onShit(1)函数用于显示按下shift键后显示的按钮  然后将shift键处于按下状态

}else{onShift(0); shifton=false;}

}else{

$("#pwd").replaceSelection($(this).val(),true); fieldSelection的replaceSelection函数实现了按普通键功能

}

})

function onShift(e){   onShit()函数用于控制按shift键后普通键盘的显示

if(e==1){

for(var i=0;i<4;i++){

var rowid="#row"+i;

$(rowid).hide();

$(rowid+"_shift").show();}

}else{

for(var i=0;i<4;i++){

var rowid="#row"+i;

$(rowid).show();

$(rowid+"_shift").hide();}

}}

再加一个拖拽软件盘的功能,用到easyDrag插件,下载地址:jquery.easydrag.js

<script src="jquery.easydrag.handler.beta2.js" type="text/javascript"></script>

$("#keyboard").easydrag();