26个JQuery的使用小技巧

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

具体如下:

1. 禁止右键点击

查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.       $(文件)。绑定( “的ContextMenu”,功能(五)(
3.               返回 假;
4.       ));
5.       ));
2. 隐藏搜索文本框文字
查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.       $( “input.text1”)。 瓦尔( “在这里输入您的搜索文本”);
3.       textFill($( 'input.text1'));
4.       ));
5.         
6.           功能textFill(输入)(/ /输入焦点的文本功能   
7.           变种originalvalue = input.val();
8.       input.focus( 功能()(
9.               如果($。修剪(input.val())== originalvalue)(input.val( '');)
10.   ));
11.   input.blur( 功能()(
12.           如果($。修剪(input.val())== '')(input.val(originalvalue);)
13.   ));
14.   )
3. 在新窗口中打开链接
查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.          / /例1:每一个链接将打开一个新窗口   
3.       $( '一[^的HREF =的“http://”]')。 教师责任观( “目标”, “_blank”);
4.         
5.          / /例2:与制造业│链接=“外部”属性将只打开一个新窗口   
6.       $( '一[@制造业│$ ='外部 ']')。单击( 功能()(
7.             这。目标= “_blank”;
8.       ));
9.       ));
10.   / /如何使用   
11.   <A href=“http://www.opensourcehunter.com” rel=external>open link</A>  
4. 检测浏览器

配额调用 : 在版本 的jQuery 1.4 中, $。支持 替换掉了 $。浏览器 变量。
查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.       / /目标的Firefox 2及以上   
3.       如果($。browser.mozilla&$。browser.version> = “1.8”)(
4.           / /做一些事情   
5.       )
6.         
7.       / /目标野生动物园   
8.       如果($。browser.safari)(
9.           / /做一些事情   
10.   )
11.     
12.   / /目标铬   
13.   如果($。browser.chrome)(
14.       / /做一些事情   
15.   )
16.     
17.   / /目标卡米诺   
18.   如果($。browser.camino)(
19.       / /做一些事情   
20.   )
21.     
22.   / /目标歌剧   
23.   如果($。browser.opera)(
24.       / /做一些事情   
25.   )
26.     
27.   / /目标的IE6及以下   
28.   如果($。browser.msie&$。browser.version <= 6)(
29.       / /做一些事情   
30.   )
31.     
32.   / /目标什么的IE6以上   
33.   如果($。browser.msie&$。browser.version> 6)(
34.       / /做一些事情   
35.   )
36.   ));
5. 预加载图片

查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.       jQuery.preloadImages = 功能()
3.       (
4.            为( 变种我= 0;我 “)。教师责任观(”型钢“,争论[我]);  
5.       )  
6.       );  
7.       / /如何使用  
8.       $。preloadImages(“image1.jpg“);
9.       ));
6. 页面样式切换

查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.       $( “a.Styleswitcher”)。 单击( 功能()(
3.               / / swicth的LINK rel属性同在A rel属性值   
4.       $( '链接[相对=样式]')。 教师责任观( 的'href',$( 这)。 教师责任观( '制造业│'));
5.       ));
6.       / /如何使用   
7.       / /这个地方在你的头   
8.       <LINK href=“default.css” type=text/css rel=stylesheet>   
9.       / /的链接   
10.   <A 类=Styleswitcher href=“#” rel=默认.css>Default Theme</A>   
11.   <A 类=Styleswitcher href=“#” rel=red.css>Red Theme</A>   
12.   <A 类=Styleswitcher href=“#” rel=blue.css>Blue Theme</A>   
13.   ));
7. 列高度相同

如果使用了两个 CSS的 列,使用此种方式可以是两列的高度相同。
查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.       功能equalHeight(集团)(
3.       最高= 0;
4.       group.each( 功能()(
5.       thisHeight = $( 这)。 身高();
6.               如果(thisHeight>最高)(
7.       最高= thisHeight;
8.       )
9.       ));
10.   group.height(最高);
11.   )
12.   / /如何使用   
13.   $(文件)。就绪( 功能()(
14.   equalHeight($( 。“左”));
15.   equalHeight($( “。权利”));
16.   ));
17.   ));
8. 动态控制页面字体大小

用户可以改变页面字体大小
查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.         / /重置的字体大小(返回默认)   
3.         变种originalFontSize = $( '网页')。CSS 的( '字型大小');
4.       $( “。resetFont”)。 单击( 功能()(
5.       $( '网页')。CSS 的( '字型大小',originalFontSize);
6.       ));
7.         / /增加字体大小(大font0   
8.       $( “。increaseFont”)。 单击( 功能()(
9.           变种currentFontSize = $( '网页')。CSS 的( '字型大小');
10.       变种currentFontSizeNum = parseFloat(currentFontSize,10);
11.       变种newFontSize = currentFontSizeNum * 1.2;
12.   $( '网页')。CSS 的( '字型大小',newFontSize);
13.       返回 假;
14.   ));
15.     / /减少字体大小(小字体)   
16.   $( “。decreaseFont”)。 单击( 功能()(
17.       变种currentFontSize = $( '网页')。CSS 的( '字型大小');
18.       变种currentFontSizeNum = parseFloat(currentFontSize,10);
19.       变种newFontSize = currentFontSizeNum * 0.8;
20.   $( '网页')。CSS 的( '字型大小',newFontSize);
21.       返回 假;
22.   ));
23.   ));
9. 返回页面顶部功能

查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.       $( '一个[的HREF *=#]')。 单击( 功能()(
3.        如果(location.pathname.replace(/ ^ \//,'') == this.pathname.replace(/ ^ \ //,'')   
4.       &location.hostname == 这。主机名)(
5.          变种目标$ = $( 这。 哈希);
6.       目标$ = $ target.length&&$目标
7.       | | $( '[名称='+ 这。hash.slice(1)+ ']');
8.          如果($ target.length)(
9.         变种targetOffset = $ target.offset()。首位;
10.   $( '的HTML,身体的)
11.   。动画((scrollTop:targetOffset),900);
12.       返回 假;
13.   )
14.   )
15.   ));
16.   / /如何使用   
17.   / /这个地方,你要滚动到   
18.   <A name=top></A>   
19.   / /链接   
20.   <A href=“#顶”>go to top</A>   
21.   ));
11.获得鼠标指针量X值

查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.       $()。的MouseMove( 功能( 五)(
3.            / /显示X,Y轴值与身份证内的量X科   
4.       $( '#量X')。 网页( “X轴:”+ e.pageX + “| Y轴”+ e.pageY);
5.       ));
6.       / /如何使用   
7.       <DIV id=XY></DIV>   
8.         
9.       ));
12. 验证元素是否为空

查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.         如果($( '#身份证') 的。html())(
3.          / /做一些事情   
4.       )
5.       ));
13. 替换元素

查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.       $( '#身份证')。jQuery 代码('  
3.       <DIV>我已被替换</DIV>  
4.        
5.       ');
6.       ));
14。 jQuery的 延时加载功能
查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.       window.setTimeout( 功能()(
3.            / /做一些事情   
4.       ),1000);
5.       ));
15. 移除单词功能
查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.          变种埃尔= $( '#身份证');
3.       el.html(el.html()。取代(/字/灌胃 “”));
4.       ));
16. 验证元素是否存在于JQuery的对象集合中
查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.          如果($( '#身份证')。 长度)(
3.         / /做一些事情   
4.       )
5.       ));
17. 使整个DIV的可点击
查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.       $( “科”)。 单击( 功能()(
3.             / /获取从href属性的URL网址和发射   
4.       window.location = $( 这)。 找到( “1”)。教师责任观( 的“href”); 返回 假;
5.       ));
6.       / /如何使用   
7.       <DIV><A href=为“index.html”>home</A></DIV>   
8.         
9.       ));
18.ID 与 类 之间转换
当改变 窗口 大小时,在 名 与 类 之间切换
查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.          功能checkWindowSize()(
3.           如果($(窗口)。宽度()> 1200)(
4.       $( '身体')。addClass( '大');
5.       )
6.           其他(
7.       $( '身体')。 示例对( '大');
8.       )
9.       )
10.   $(窗口)。调整(checkWindowSize);
11.   ));
19. 克隆对象
查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.          变种克隆= $( '#身份证')。 克隆();
3.       / /如何使用   
4.       <DIV id=id></DIV>   
5.         
6.       ));
20. 使元素居屏幕中间位置
查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.       jQuery.fn.center = 功能()(
3.             这。CSS的( “位置”,“绝对”);
4.             这。CSS的( “顶”($(窗口)。高度() - 这。 高度())/ 2 + $(窗口)。scrollTop()+ “像素”);
5.             这。CSS的( “左”($(窗口)。宽度() - 这。 宽度())/ 2 + $(窗口)。scrollLeft()+ “像素”);
6.             返回 这;
7.       )
8.       $( “#身份证”)。 中心();
9.       ));
21. 写自己的选择器
查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.       $。延长($。expr的[ ':'],(
3.       moreThen1000px: 功能(1)(
4.                  返回$(1)。宽度()> 1000;
5.       )
6.       ));
7.       $( '。框:moreThen1000px')。 单击( 功能()(
8.             / /创建一个简单的js中警告框   
9.       警报( '你有点击的元素是超过1000像素宽');
10.   ));
11.   ));
22. 统计元素个数
查看平原 复制到剪贴板 打印 ?
1.       $(文件)。就绪( 功能()(
2.       $( “P”字)。 规模();
3.       ));
23. 使用自己的 子弹
查看平原 复制到剪贴板 打印 ?
1.       $(文档)。就绪( 功能()(
2.       $( “美国UL”)。addClass( “取代”);
3.       $( “美国UL>里”)。 前面加上( “ - “);
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 plaincopy to clipboardprint?
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 plaincopy to clipboardprint?
1.       $(document).ready(function() {   
2.           jQuery.fx.off = true;   
3.       });  
26. 与其他Javascript类库冲突解决方案
view plaincopy to clipboardprint?
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/
原文地址:https://www.cnblogs.com/Leo_wl/p/1701497.html