26个Jquery使用小技巧

最新推荐文章于 2024-07-24 20:11:59 发布
最新推荐文章于 2024-07-24 20:11:59 发布
阅读量729 收藏 1
点赞数
分类专栏： Javascript 文章标签： jquery function stylesheet html javascript google

前段时间发布了 Jquery 类库 1.4 版本，使用者也越来越多，为了方便大家对 Jquery 的使用，下面列出了一些 Jquery 使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的 X 值 Y 值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于 Jquery 集合中、使 DIV 可点击、克隆对象、使元素居中、计算元素个数、使用 Google 主机上的 Jquery 类库、禁用 Jquery 效果、解决 Jquery 类库与其他 Javascript 类库冲突问题。

具体如下：

1. 禁止右键点击

view plain copy to clipboard print ?

1.       $(document).ready( function (){   

2.           $(document).bind( "contextmenu" , function (e){   

3.                return   false ;   

4.           });   

5.       });   





2. 
隐藏搜索文本框文字

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.       $( "input.text1" ).val( "Enter your search text here" );   

3.          textFill($( 'input.text1' ));   

4.       });   

5.         

6.            function  textFill(input){  //input focus text function   

7.            var  originalvalue = 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. 
在新窗口中打开链接

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.           //Example 1: Every link will open in a new window   

3.          $( 'a[href^="http://"]' ).attr( "target" ,  "_blank" );   

4.         

5.           //Example 2: Links with the rel="external" attribute will only open in a new window   

6.          $( 'a[@rel$=' external ']' ).click( function (){   

7.              this .target =  "_blank" ;   

8.          });   

9.       });   

10.   // how to use   

11.   <A href= "http://www.opensourcehunter.com"  rel=external>open link</A>  

4. 检测浏览器

注: 在版本jQuery 1.4 中，$.support 替换掉了$.browser 变量。

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.       // Target Firefox 2 and above   

3.       if  ($.browser.mozilla && $.browser.version >=  "1.8"  ){   

4.            // do something   

5.       }   

6.         

7.       // Target Safari   

8.       if ( $.browser.safari ){   

9.            // do something   

10.   }   

11.     

12.   // Target Chrome   

13.   if ( $.browser.chrome){   

14.        // do something   

15.   }   

16.     

17.   // Target Camino   

18.   if ( $.browser.camino){   

19.        // do something   

20.   }   

21.     

22.   // Target Opera   

23.   if ( $.browser.opera){   

24.        // do something   

25.   }   

26.     

27.   // Target IE6 and below   

28.   if  ($.browser.msie && $.browser.version <= 6 ){   

29.        // do something   

30.   }   

31.     

32.   // Target anything above IE6   

33.   if  ($.browser.msie && $.browser.version > 6){   

34.        // do something   

35.   }   

36.   });  

5. 预加载图片

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.          jQuery.preloadImages =  function ()   

3.         {   

4.             for ( var  i = 0; i ").attr(" src ", arguments[i]);  

5.         }  

6.       };  

7.       // how to use  

8.       $.preloadImages(" image1.jpg");   

9.       });  

6. 页面样式切换

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.           $( "a.Styleswitcher" ).click( function () {   

3.                //swicth the LINK REL attribute with the value in A REL attribute   

4.               $( 'link[rel=stylesheet]' ).attr( 'href'  , $( this ).attr( 'rel' ));   

5.           });   

6.       // how to use   

7.       // place this in your header   

8.       <LINK href= "default.css"  type=text/css rel=stylesheet>   

9.       // the links   

10.   <A  class =Styleswitcher href= "#"  rel= default .css>Default Theme</A>   

11.   <A  class =Styleswitcher href= "#"  rel=red.css>Red Theme</A>   

12.   <A  class =Styleswitcher href= "#"  rel=blue.css>Blue Theme</A>   

13.   });  

7. 列高度相同

如果使用了两个 CSS 列，使用此种方式可以是两列的高度相同。

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.       function  equalHeight(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.   // how to use   

13.   $(document).ready( function () {   

14.       equalHeight($( ".left" ));   

15.       equalHeight($( ".right" ));   

16.   });   

17.   });  

8. 动态控制页面字体大小

用户可以改变页面字体大小

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.          // Reset the font size(back to default)   

3.          var  originalFontSize = $( 'html' ).css( 'font-size' );   

4.           $( ".resetFont" ).click( function (){   

5.           $( 'html' ).css( 'font-size' , originalFontSize);   

6.         });   

7.          // Increase the font size(bigger font0   

8.         $( ".increaseFont" ).click( function (){   

9.            var  currentFontSize = $( 'html' ).css( 'font-size' );   

10.        var  currentFontSizeNum = parseFloat(currentFontSize, 10);   

11.        var  newFontSize = currentFontSizeNum*1.2;   

12.       $( 'html' ).css( 'font-size' , newFontSize);   

13.        return   false ;   

14.     });   

15.      // Decrease the font size(smaller font)   

16.     $( ".decreaseFont" ).click( function (){   

17.        var  currentFontSize = $( 'html' ).css( 'font-size' );   

18.        var  currentFontSizeNum = parseFloat(currentFontSize, 10);   

19.        var  newFontSize = currentFontSizeNum*0.8;   

20.       $( 'html' ).css( 'font-size' , newFontSize);   

21.        return   false ;   

22.     });   

23.   });  

9. 返回页面顶部功能

view plain copy to clipboard print ?

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.          var  targetOffset = $target.offset().top;   

10.     $( 'html,body' )   

11.     .animate({scrollTop: targetOffset}, 900);   

12.        return   false ;   

13.      }   

14.     }   

15.     });   

16.   // how to use   

17.   // place this where you want to scroll to   

18.   <A name=top></A>   

19.   // the link   

20.   <A href= "#top" >go to top</A>   

21.   });  

11. 获得鼠标指针ＸＹ值

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.          $().mousemove( function (e){   

3.             //display the x and y axis values inside the div with the id XY   

4.           $( '#XY' ).html( "X Axis : "  + e.pageX +  " | Y Axis "  + e.pageY);   

5.         });   

6.       // how to use   

7.       <DIV id=XY></DIV>   

8.         

9.       });  

12. 验证元素是否为空

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.          if  ($( '#id' ).html()) {   

3.           // do something   

4.          }   

5.       });  

13. 替换元素

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.          $( '#id' ).replaceWith( '  

3.       <DIV>I have been replaced</DIV>  

4.        

5.       ' );   

6.       });   





14. jQuery
延时加载功能

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.          window.setTimeout( function () {   

3.             // do something   

4.          }, 1000);   

5.       });   





15. 
移除单词功能

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.           var  el = $( '#id' );   

3.          el.html(el.html().replace(/word/ig,  "" ));   

4.       });   





16. 
验证元素是否存在于Ｊｑｕｅｒｙ对象集合中

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.           if  ($( '#id' ).length) {   

3.          // do something   

4.         }   

5.       });   





17. 
使整个ＤＩＶ可点击

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.           $( "div" ).click( function (){   

3.              //get the url from href attribute and launch the url   

4.             window.location=$( this ).find( "a" ).attr( "href" );  return   false ;   

5.           });   

6.       // how to use   

7.       <DIV><A href= "index.html" >home</A></DIV>   

8.         

9.       });   





18.ID
与
Class
之间转换

当改变 Window 大小时，在 ID 与Class 之间切换

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.           function  checkWindowSize() {   

3.            if  ( $(window).width() > 1200 ) {   

4.               $( 'body' ).addClass( 'large' );   

5.           }   

6.            else  {   

7.               $( 'body' ).removeClass( 'large' );   

8.           }   

9.          }   

10.   $(window).resize(checkWindowSize);   

11.   });   





19. 
克隆对象

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.           var  cloned = $( '#id' ).clone();   

3.       // how to use   

4.       <DIV id=id></DIV>   

5.         

6.       });   





20. 
使元素居屏幕中间位置

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.         jQuery.fn.center =  function  () {   

3.              this .css( "position" , "absolute" );   

4.              this .css( "top" , ( $(window).height() -  this .height() ) / 2+$(window).scrollTop() +  "px" );   

5.              this .css( "left" , ( $(window).width() -  this .width() ) / 2+$(window).scrollLeft() +  "px" );   

6.              return   this ;   

7.         }   

8.         $( "#id" ).center();   

9.       });   





21. 
写自己的选择器

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.          $.extend($.expr[ ':' ], {   

3.              moreThen1000px:  function (a) {   

4.                   return  $(a).width() > 1000;   

5.             }   

6.          });   

7.         $( '.box:moreThen1000px' ).click( function () {   

8.              // creating a simple js alert box   

9.             alert( 'The element that you have clicked is over 1000 pixels wide' );   

10.     });   

11.   });   










22. 
统计元素个数

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.          $( "p" ).size();   

3.       });   





23. 
使用自己的
 Bullets

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.          $( "ul" ).addClass( "Replaced" );   

3.          $( "ul > li" ).prepend( " ‒  " );   

4.         // how to use   

5.        ul.Replaced { list-style : none; }   

6.       });   





24. 
引用
Google
主机上的
Jquery
类库

Let Google host the jQuery script for you. This can be done in 2 ways.

view plain copy to clipboard print ?

1.       //Example 1   

2.       <SCRIPT src= "http://www.google.com/jsapi" ></SCRIPT>   

3.       <SCRIPT type=text/javascript>  

4.       google.load( "jquery" ,  "1.2.6" );  

5.       google.setOnLoadCallback( function () {  

6.            // do something   

7.       });  

8.       </SCRIPT><SCRIPT src= "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"  type=text/javascript></SCRIPT>   

9.         

10.     // Example 2:(the best and fastest way)   

11.   <SCRIPT src= "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"  type=text/javascript></SCRIPT>   



 

25. 禁用 Jquery （动画）效果

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.           jQuery.fx.off =  true ;   

3.       });   





26. 
与其他
Javascript
类库冲突解决方案

view plain copy to clipboard print ?

1.       $(document).ready( function () {   

2.           var  $jq = jQuery.noConflict();   

3.          $jq( '#id' ).show();   

4.       });  

 

英文地址：

http://www.opensourcehunter.com/2010/02/27/26-cool-and-usefull-jquery-tips-tricks-solutions/

李发展
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
悬浮提示信息
苦涩精灵的博客
04-24 578
有js插件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/suspention.css" /> </he...
26个Jquery使用小技巧(jQuery tips, tricks & solutions)
weixin_33796177的博客
03-01 115
前段时间发布了Jquery类库1.4版本，使用者也越来越多，为了方便大家对Jquery的使用，下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、...
jquery tips简易使用方法 新手必看
weixin_34019929的博客
05-26 1803
使用jquery1.12.4以上版本 使用jquery插件 tips .beg-pull-right 点击时的选择器 在这里写的是一个类选择器 记得引入jquery $(".beg-pull-right").click(function () { var name = $("#name").val(); ...
jquery-tips悬浮提示插件说明
流星1688
09-05 3174
jquery-tips悬浮提示插件说明
Jquery--鼠标悬浮 提示层 tips
开发者博客
10-16 747
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8"&gt; &lt;title&gt; jquery&lt;/title&gt; &lt;script type="text/javascript&qu
Jquery使用小技巧汇总
10-23
以下是一些实用的JQuery使用小技巧，涵盖了多个方面，包括用户交互、页面行为、兼容性处理等。 1. **禁止右键点击**：通过监听`contextmenu`事件并返回`false`，可以阻止用户在页面上右键点击。 ```javascript $...
jQuery使用经验小技巧(推荐)
11-25
以下是一些关于jQuery插件开发的实用技巧： 1. **使用闭包封装代码**： 把所有插件代码包裹在立即执行的函数表达式（IIFE）中，可以避免全局变量污染，并确保代码的独立性。这样做的好处是每个插件实例都有自己的...
前端开发必知的15个jQuery小技巧
10-20
以下是对标题和描述中提到的15个jQuery小技巧的详细说明： 1、**返回顶部按钮**： 使用`animate()`和`scrollTop()`方法，可以实现无插件的返回顶部动画效果。当用户点击带有`.top`类的元素时，页面会在800毫秒内...
jquery插件 - 8个很有用的jQuery插件
lzhdim的专栏
02-14 132
jQuery虚拟键盘&#13; &#13; 非常适用于在公共场所输入密码，极高的用户体验。查看或下载插件。&#13; 在IE中显示文字阴影&#13; &#13; 查看教程&#13; 快速搜索&#13; &#13; 可以快速定位数据表格。下载插件。&#13; 滑动门&#13; &#13; 菜单动画以及华丽的滑动门效果。下载插件。&#13; 日期选择器&#13; &#13; 下载插件。
jQuery-1.8.3文件和CDN加速地址
热门推荐
php菜鸟技术天地
08-09 1万+
官方： http://code.jquery.com/jquery-1.8.3.min.js http://code.jquery.com/jquery-1.8.3.js 百度： http://libs.baidu.com/jquery/1.8.3/jquery.min.js http://libs.baidu.com/jquery/1.8.3/jquery.js 360： http
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 2649
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
apple_68589597的博客
07-21 1026
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
[HTML]一文掌握
CSDN20221005的博客
07-21 847
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 427
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
【HTML — 构建网络】HTML 入门
07-24 546
如果您查看许多其他站点的代码，您可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在这一点上，你应该了解 HTML 是什么样子的，以及它在基本层面上是如何工作的。在 HTML 中，不需要在 void 元素标记的末尾添加 a，例如： .但是，它也是一种有效的语法，当您希望 HTML 是有效的 XML 时，您可以这样做。现在，您可以在 Web 浏览器中打开此文件，以查看呈现的代码的外观。在本练习中，您可以如前所述在计算机上本地编辑代码，也可以在下面的示例窗口中编辑代码（在本例中，可编辑示例窗口仅表示。
IPython的HTML魔法：%%html_header命令全解析
最新发布
2401_85762266的博客
07-24 920
IPython是一个增强的Python交互式解释器，而Jupyter Notebook是一个基于Web的开源项目，允许用户创建和共享包含实时代码、方程、可视化和解释性文本的文档。HTML头部是网页文档的元数据区域，它包含了文档的标题（title）、样式表链接（link）、脚本链接（script）等信息。的使用，可以让您更灵活地定制Notebook的样式和功能，从而提供更加丰富和个性化的文档体验。命令的使用非常简单。你只需要在Notebook的单元格中输入该命令，然后写入你想要添加到头部的HTML代码即可。
HTML 基础知识
07-24 780
你写的替代文本应该为读者提供足够的信息，以便对图像传达的内容有一个很好的了解。对于我们的Firefox徽标，一个更好的替代品是“Firefox徽标：围绕地球的火焰狐狸”。如果它们如上所示重叠，那么您的 Web 浏览器将尝试对您想说的内容做出最佳猜测，这可能会导致意外结果。正如我们之前所说，它将图像嵌入到我们的页面中，该图像位于它出现的位置。空格（或任何字符）的简单属性值可以保持不加引号的状态，但建议您将所有属性值加引号，因为这可以使代码更加一致和易于理解。创建链接后，单击它以确保它将您发送到您想要的地方。
第一章 算法中的时间复杂度分析
Zjs15630471263的博客
07-20 995
想必打算学习算法的同学听说过这样一个概念：程序≈数据结构+算法。其中数据结构是实现程序的基本框架。而运用算法就是优化程序执行时间或空间上的必要措施。即寻找一个方法使程序的性能达到最优解。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值