zoukankan      html  css  js  c++  java
  • 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/
    
  • 相关阅读:
    Buuctfweb[ACTF2020 新生赛]Include
    Buuctfweb[极客大挑战 2019]Knife
    Buuctfweb[极客大挑战 2019]Secret File
    Buuctfmiscningen
    Buuctfweb[GYCTF2020]Blacklist
    Buuctfmisczip伪加密
    Buuctfweb[GXYCTF2019]Ping Ping Ping
    Buuctfmisc镜子里面的世界
    Buuctfweb[ACTF2020 新生赛]Exec
    转换...
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/1701497.html
Copyright © 2011-2022 走看看