Jquery使用小技巧汇总

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

$（document）.ready（function（）{$（document）.bind（"contextmenu",function（e）{return false;}）;}）;

2. 隐藏搜索文本框文字
Hide when clicked in the search field, the value.（example can be found below in the comment fields）

$（document）.ready（function（） {$（"input.text1"）.val（"Enter your search text here"）;textFill（$（"input.text1"））;}）; function textFill（input）{ //input focus text functionvar originalvalue = input.val（）;input.focus（ function（）{if（ $.trim（input.val（）） == originalvalue ）{ input.val（""）; }}）;input.blur（ function（）{if（ $.trim（input.val（）） == "" ）{ input.val（originalvalue）; }}）;}

3. 在新窗口中打开链接
XHTML 1.0 Strict doesn"t allow this attribute in the code, so use this to keep the code valid.

$（document）.ready（function（） {//Example 1: Every link will open in a new window$（"a[href^="http://"]"）.attr（"target", "_blank"）; //Example 2: Links with the rel="external" attribute will only open in a new window$（"a[@rel$="external"]"）.click（function（）{ this.target = "_blank";}）;}）;// how to use<A href="http://www.opensourcehunter.com" rel=external>open link</A>

4. 检测浏览器
注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量

$（document）.ready（function（） {// Target Firefox 2 and aboveif （$.browser.mozilla && $.browser.version >= "1.8" ）{// do something} // Target Safariif（ $.browser.safari ）{// do something} // Target Chromeif（ $.browser.chrome）{// do something} // Target Caminoif（ $.browser.camino）{// do something} // Target Operaif（ $.browser.opera）{// do something} // Target IE6 and belowif （$.browser.msie && $.browser.version <= 6 ）{// do something} // Target anything above IE6if （$.browser.msie && $.browser.version > 6）{// do something}}）;

5. 预加载图片
This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.

$（document）.ready（function（） {jQuery.preloadImages = function（）{ for（var i = 0; i<ARGUMENTS.LENGTH; jQuery（?<img { i++）>"）.attr（"src", arguments[i]）; }}// how to use$.preloadImages（"image1.jpg"）;}）;

6. 页面样式切换

$（document）.ready（function（） {$（"a.Styleswitcher"）.click（function（） {//swicth the LINK REL attribute with the value in A REL attribute$（"link[rel=stylesheet]"）.attr（"href" , $（this）.attr（"rel"））;}）;// how to use// place this in your header<LINK rel=stylesheet type=text/css href="default.css">// the links<A class="Styleswitcher" href="#" rel=default.css>Default Theme</A><A class="Styleswitcher" href="#" rel=red.css>Red Theme</A><A class="Styleswitcher" href="#" rel=blue.css>Blue Theme</A>}）;

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

$（document）.ready（function（） {function equalHeight（group） {tallest = 0;group.each（function（） {thisHeight = $（this）.height（）;if（thisHeight > tallest） {tallest = thisHeight;}}）;group.height（tallest）;}// how to use$（document）.ready（function（） {equalHeight（$（".left"））;equalHeight（$（".right"））;}）;}）;

8. 动态控制页面字体大小
用户可以改变页面字体大小

$（document）.ready（function（） { // Reset the font size（back to default） var originalFontSize = $（"html"）.css（"font-size"）;$（".resetFont"）.click（function（）{$（"html"）.css（"font-size", originalFontSize）; }）; // Increase the font size（bigger font0 $（".increaseFont"）.click（function（）{var currentFontSize = $（"html"）.css（"font-size"）;var currentFontSizeNum = parseFloat（currentFontSize, 10）;var newFontSize = currentFontSizeNum*1.2;$（"html"）.css（"font-size", newFontSize）;return false; }）; // Decrease the font size（smaller font） $（".decreaseFont"）.click（function（）{var currentFontSize = $（"html"）.css（"font-size"）;var currentFontSizeNum = parseFloat（currentFontSize, 10）;var newFontSize = currentFontSizeNum*0.8;$（"html"）.css（"font-size", newFontSize）;return false; }）;}）;

9. 返回页面顶部功能
For a smooth（animated） ride back to the top（or any location）.

$（document）.ready（function（） {$（"a[href*=#]"）.click（function（） { if （location.pathname.replace（/^//,""） == this.pathname.replace（/^//,""） && location.hostname == this.hostname） {var $target = $（this.hash）;$target = $target.length && $target|| $（"[name=" + this.hash.slice（1） +"]"）;if （$target.length） { var targetOffset = $target.offset（）.top; $（"html,body"） .animate（{scrollTop: targetOffset}, 900）;return false;} } }）;// how to use// place this where you want to scroll to<A name=top></A>// the link<A href="#top">go to top</A>}）;

11. 获得鼠标指针ＸＹ值
Want to know where your mouse cursor is?

$（document）.ready（function（） {$（）.mousemove（function（e）{ //display the x and y axis values inside the div with the id XY$（"#XY"）.html（"X Axis : " + e.pageX + " | Y Axis " + e.pageY）; }）;// how to use<DIV id=XY></DIV> }）;

12. 验证元素是否为空
This will allow you to check if an element is empty.

$（document）.ready（function（） { if （$（"#id"）.html（）） {// do something}}）;

13. 替换元素
Want to replace a div, or something else?

$（document）.ready（function（） {$（"#id"）.replaceWith（"<DIV>I have been replaced</DIV> "）;}）;

14. jQuery延时加载功能
Want to delay something?

$（document）.ready（function（） {window.setTimeout（function（） { // do something}, 1000）;}）;

15. 移除单词功能
Want to remove a certain word（s）?

$（document）.ready（function（） {var el = $（"#id"）;el.html（el.html（）.replace（/word/ig, ""））;}）;

16. 验证元素是否存在于jquery对象集合中
Simply test with the .length property if the element exists.

$（document）.ready（function（） {if （$（"#id"）.length） { // do something }}）;

17. 使整个DIV可点击
Want to make the complete div clickable?

$（document）.ready（function（） {$（"div"）.click（function（）{ //get the url from href attribute and launch the url window.location=$（this）.find（"a"）.attr（"href"）; return false;}）;// how to use<DIV><A href="index.html">home</A></DIV> }）;

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

$（document）.ready（function（） {function checkWindowSize（） {if （ $（window）.width（） > 1200 ） {$（"body"）.addClass（"large"）;}else {$（"body"）.removeClass（"large"）;}}$（window）.resize（checkWindowSize）;}）;

19. 克隆对象
Clone a div or an other element.

$（document）.ready（function（） {var cloned = $（"#id"）.clone（）;// how to use<DIV id=id></DIV> }）;

20. 使元素居屏幕中间位置
Center an element in the center of your screen.

$（document）.ready（function（） { jQuery.fn.center = function （） { this.css（"position","absolute"）; this.css（"top", （ $（window）.height（） - this.height（） ） / 2+$（window）.scrollTop（） + "px"）; this.css（"left", （ $（window）.width（） - this.width（） ） / 2+$（window）.scrollLeft（） + "px"）; return this; } $（"#id"）.center（）;}）;

21. 写自己的选择器
Write your own selectors.

$（document）.ready（function（） {$.extend（$.expr[":"], {moreThen1000px: function（a） {return $（a）.width（） > 1000; }}）; $（".box:moreThen1000px"）.click（function（） { // creating a simple js alert box alert（"The element that you have clicked is over 1000 pixels wide"）; }）;}）;

22. 统计元素个数
Count an element.

$（document）.ready（function（） {$（"p"）.size（）;}）;

23. 使用自己的 Bullets
Want to use your own bullets instead of using the standard or images bullets?

$（document）.ready（function（） {$（"ul"）.addClass（"Replaced"）;$（"ul > li"）.prepend（"‒ "）; // how to use ul.Replaced { list-style : none; }}）;

24. 引用Google主机上的Jquery类库
Let Google host the jQuery script for you. This can be done in 2 ways.
[code]//Example 1
<SCRIPT src="http://www.google.com/jsapi"></SCRIPT>
<SCRIPT type=text/javascript>
google.load（"jquery", "1.2.6"）;
google.setOnLoadCallback（function（） {
// do something
}）;
</SCRIPT><SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>

// Example 2:（the best and fastest way）
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>[/code]

25. 禁用Jquery（动画）效果
Disable all jQuery effects

$（document）.ready（function（） {jQuery.fx.off = true;}）;

26. 与其他Javascript类库冲突解决方案
To avoid conflict other libraries on your website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign.

$（document）.ready（function（） {var $jq = jQuery.noConflict（）;$jq（"#id"）.show（）;}）;