jQuery使用小技巧.docx
《jQuery使用小技巧.docx》由会员分享,可在线阅读,更多相关《jQuery使用小技巧.docx(43页珍藏版)》请在冰点文库上搜索。
![jQuery使用小技巧.docx](https://file1.bingdoc.com/fileroot1/2023-5/27/1c6fff21-c0d4-49fe-a1cd-de41f000a5d5/1c6fff21-c0d4-49fe-a1cd-de41f000a5d51.gif)
jQuery使用小技巧
jQuery使用小技巧
1.当document文档就绪时执行JavaScript代码。
我们为什么使用jQuery库呢?
原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行。
<scriptsrc="class="undefined">script>
<script>
//DifferentwaystoachievetheDocumentReadyevent
//WithjQuery
$(document).ready(function(){/*...*/});
//ShortjQuery
$(function(){/*...*/});
//WithoutjQuery(doesn'tworkinolderIEversions)
document.addEventListener('DOMContentLoaded',function(){
//Yourcodegoeshere
});
//TheTrickshot(workseverywhere):
r(function(){
alert('DOMReady!
');
})
functionr(f){/in/.test(document.readyState)?
setTimeout('r('+f+')',9):
f()}
script>
2.使用route。
<scriptsrc="class="undefined">script>
<script>
varroute={
_routes:
{},//Therouteswillbestoredhere
add:
function(url,action){
this._routes[url]=action;
},
run:
function(){
jQuery.each(this._routes,function(pattern){
if(location.href.match(pattern)){
//"this"pointstothefunctiontobeexecuted
this();
}
});
}
}
//Willexecuteonlyonthispage:
route.add('002.html',function(){
alert('Hellothere!
')
});
route.add('products.html',function(){
alert("thiswon'tbeexecuted:
(")
});
//Youcanevenuseregex-es:
route.add('.*.html',function(){
alert('Thisisusingaregex!
')
});
route.run();
script>
3.使用JavaScript中的AND技巧。
使用&&操作符的特点是如果操作符左边的表达式是false,那么它就不会再判断操作符右边的表达式了。
所以:
//Insteadofwritingthis:
if($('#elem').length){
//dosomething
}
//Youcanwritethis:
$('#elem').length&&log("doingsomething");
4.is()方法比你想象的更为强大。
下面举几个例子,我们先写一个id为elem的div。
js代码如下:
//First,cachetheelementintoavariable:
varelem=$('#elem');
//Isthisadiv?
elem.is('div')&&log("it'sadiv");
//Doesithavethebigboxclass?
elem.is('.bigbox')&&log("ithasthebigboxclass!
");
//Isitvisible?
(wearehidingitinthisexample)
elem.is(':
not(:
visible)')&&log("itishidden!
");
//Animating
elem.animate({'width':
200},1);
//isitanimated?
elem.is(':
animated')&&log("itisanimated!
");
其中判断是否为动画我觉得非常不错。
5.判断你的网页一共有多少元素。
通过使用$(“*”).length();方法可以判断网页的元素数量。
//Howmanyelementsdoesyourpagehave?
log('Thispagehas'+$('*').length+'elements!
');
6.使用length()属性很笨重,下面我们使用exist()方法。
/Oldway
log($('#elem').length==1?
"exists!
":
"doesn'texist!
");
//Trickshot:
jQuery.fn.exists=function(){returnthis.length>0;}
log($('#elem').exists()?
"exists!
":
"doesn'texist!
");
7.jQuery方法$()实际上是拥有两个参数的,你知道第二个参数的作用吗?
//Selectanelement.Thesecondargumentiscontexttolimitthesearch
//Youcanuseaselector,jQueryobjectordomelement
$('li','#firstList').each(function(){
log($(this).html());
});
log('-----');
//Createanelement.Thesecondargumentisan
//objectwithjQuerymethodstobecalled
vardiv=$('',{
"class":
"bigBlue",
"css":
{
"background-color":
"purple"
},
"width":
20,
"height":
20,
"animate":
{//YoucanuseanyjQuerymethodasaproperty!
"width":
200,
"height":
50
}
});
div.appendTo('#result');
8.使用jQuery我们可以判断一个链接是否是外部的,并来添加一个icon在非外部链接中,且确定打开方式。
这里用到了hostname属性。
<ulid="links">
<li><ahref="007.html">Theprevioustipa>li>
<li><ahref="./009.html">Thenexttipa>li>
<li><ahref="class="hljs-tag">a>li>
ul>
//Loopthroughallthelinks
$('#linksa').each(function(){
if(this.hostname!
=location.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
-
jQuery
使用
技巧
![提示](https://static.bingdoc.com/images/bang_tan.gif)
冰点文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。