前段时间发布了 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/