26个Jquery使用小技巧jQuery tips trickssolutions.docx
《26个Jquery使用小技巧jQuery tips trickssolutions.docx》由会员分享,可在线阅读,更多相关《26个Jquery使用小技巧jQuery tips trickssolutions.docx(13页珍藏版)》请在冰豆网上搜索。
![26个Jquery使用小技巧jQuery tips trickssolutions.docx](https://file1.bdocx.com/fileroot1/2023-2/3/1a4a5fad-46c8-4240-a87a-66450a797cdd/1a4a5fad-46c8-4240-a87a-66450a797cdd1.gif)
26个Jquery使用小技巧jQuerytipstrickssolutions
26个Jquery使用小技巧(jQuerytips,tricks&solutions)
前段时间发布了Jquery类库1.4版本,使用者也越来越多,为了方便大家对Jquery的使用,下面列出了一些Jquery使用技巧。
比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。
具体如下:
1.禁止右键点击
viewplaincopytoclipboardprint?
1.$(document).ready(function(){
2.$(document).bind("contextmenu",function(e){
3.returnfalse;
4.});
5.});
2.隐藏搜索文本框文字viewplaincopytoclipboardprint?
1.$(document).ready(function(){
2.$("input.text1").val("Enteryoursearchtexthere");
3.textFill($('input.text1'));
4.});
5.
6.functiontextFill(input){//inputfocustextfunction
7.varoriginalvalue=input.val();
8.input.focus(function(){
9.if($.trim(input.val())==originalvalue){input.val('');}
10.});
11.input.blur(function(){
12.if($.trim(input.val())==''){input.val(originalvalue);}
13.});
14.}
3.在新窗口中打开链接viewplaincopytoclipboardprint?
1.$(document).ready(function(){
2.//Example1:
Everylinkwillopeninanewwindow
3.$('a[href^="http:
//"]').attr("target","_blank");
4.
5.//Example2:
Linkswiththerel="external"attributewillonlyopeninanewwindow
6.$('a[@rel$='external']').click(function(){
7.this.target="_blank";
8.});
9.});
10.//howtouse
11.openlink
4.检测浏览器
注:
在版本jQuery1.4中,$.support替换掉了$.browser变量。
viewplaincopytoclipboardprint?
1.$(document).ready(function(){
2.//TargetFirefox2andabove
3.if($.browser.mozilla&&$.browser.version>="1.8"){
4.//dosomething
5.}
6.
7.//TargetSafari
8.if($.browser.safari){
9.//dosomething
10.}
11.
12.//TargetChrome
13.if($.browser.chrome){
14.//dosomething
15.}
16.
17.//TargetCamino
18.if($.browser.camino){
19.//dosomething
20.}
21.
22.//TargetOpera
23.if($.browser.opera){
24.//dosomething
25.}
26.
27.//TargetIE6andbelow
28.if($.browser.msie&&$.browser.version<=6){
29.//dosomething
30.}
31.
32.//TargetanythingaboveIE6
33.if($.browser.msie&&$.browser.version>6){
34.//dosomething
35.}
36.});
5.预加载图片
viewplaincopytoclipboardprint?
1.$(document).ready(function(){
2.jQuery.preloadImages=function()
3.{
4.for(vari=0;i").attr("src",arguments[i]);
5.}
6.};
7.//howtouse
8.$.preloadImages("image1.jpg");
9.});
6.页面样式切换
viewplaincopytoclipboardprint?
1.$(document).ready(function(){
2.$("a.Styleswitcher").click(function(){
3.//swicththeLINKRELattributewiththevalueinARELattribute
4.$('link[rel=stylesheet]').attr('href',$(this).attr('rel'));
5.});
6.//howtouse
7.//placethisinyourheader
8.
9.//thelinks
10.DefaultTheme
11.RedTheme
12.BlueTheme
13.});
7.列高度相同
如果使用了两个CSS列,使用此种方式可以是两列的高度相同。
viewplaincopytoclipboardprint?
1.$(document).ready(function(){
2.functionequalHeight(group){
3.tallest=0;
4.group.each(function(){
5.thisHeight=$(this).height();
6.if(thisHeight>tallest){
7.tallest=thisHeight;
8.}
9.});
10.group.height(tallest);
11.}
12.//howtouse
13.$(document).ready(function(){
14.equalHeight($(".left"));
15.equalHeight($(".right"));
16.});
17.});
8.动态控制页面字体大小
用户可以改变页面字体大小
viewplaincopytoclipboardprint?
1.$(document).ready(function(){
2.//Resetthefontsize(backtodefault)
3.varoriginalFontSize=$('html').css('font-size');
4.$(".resetFont").click(function(){
5.$('html').css('font-size',originalFontSize);
6.});
7.//Increasethefontsize(biggerfont0
8.$(".increaseFont").click(function(){
9.varcurrentFontSize=$('html').css('font-size');
10.varcurrentFontSizeNum=parseFloat(currentFontSize,10);
11.varnewFontSize=currentFontSizeNum*1.2;
12.$('html').css('font-size',newFontSize);
13.returnfalse;
14.});
15.//Decreasethefontsize(smallerfont)
16.$(".decreaseFont").click(function(){
17.varcurrentFontSize=$('html').css('font-size');
18.varcurrentFontSizeNum=parseFloat(currentFontSize,10);
19.varnewFontSize=currentFontSizeNum*0.8;
20.$('html').css('font-size',newFontSize);
21.returnfalse;
22.});
23.});
9.返回页面顶部功能
viewplaincopytoclipboardprint?
1.$(document).ready(function(){
2.$('a[href*=#]').click(function(){
3.if(location.pathname.replace(/^\//,'')==this.pathname.replace(/^\//,'')
4.&&location.hostname==this.hostname){
5.var$target=$(this.hash);
6.$target=$target.length&&$target
7.||$('[name='+this.hash.slice
(1)+']');
8.if($target.length){
9.vartargetOffset=$target.offset().top;
10.$('html,body')
11..animate({scrollTop:
targetOffset},900);
12.returnfalse;
13.}
14.}
15.});
16.//howtouse
17.//placethiswhereyouwanttoscrollto
18.
19.//thelink
20.gototop
21.});
11.获得鼠标指针XY值
viewplaincopytoclipboardprint?
1.$(document).ready(function(){
2.$().mousemove(function(e){
3.//displaythexandyaxisvaluesinsidethedivwiththeidXY
4.$('#XY').html("XAxis:
"+e.pageX+"|YAxis"+e.pageY);
5.});
6.//howtouse
7.
8.
3.
4.
7.
8.
4.