前段时间发布了 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/
浙公网安备 33010602011771号