jquery常用小功能总结.docx

1、jquery常用小功能总结1. 禁止右键点击$(document).ready(function() $(document).bind(contextmenu,function(e) return false; ););2. 隐藏搜索文本框文字点击时隐藏搜索栏中的文字$(document).ready(function() $(input.text1).val(Enter your search text here); textFill($(input.text1);); function textFill(input) /input focus text function var origi

2、nalvalue = input.val(); input.focus( function() if( $.trim(input.val() = originalvalue ) input.val(); ); input.blur( function() if( $.trim(input.val() = ) input.val(originalvalue); );3. 在新窗口中打开链接页面中所有链接都在新窗口中打开$(document).ready(function() /Example 1: Every link will open in a new window $(ahref=http

3、:/).attr(target, _blank); /Example 2: Links with the rel=external attribute will only open in a new window $(arel$=external).click(function() this.target = _blank; ););/ how to useopen link4. 检测浏览器检测客户端使用的什么浏览器$(document).ready(function() / Target Firefox 2 and aboveif ($.browser.mozilla & $.browser

4、.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

5、6) / do something);5. 预加载图片预加载图片，适用网站图片很多的网站$(document).ready(function() jQuery.preloadImages = function() for(var i = 0; iARGUMENTS.LENGTH; jQuery(?).attr(src, argumentsi); / how to use$.preloadImages(image1.jpg););6. 页面样式切换$(document).ready(function() $(a.Styleswitcher).click(function() /swicth th

6、e LINK REL attribute with the value in A REL attribute $(linkrel=stylesheet).attr(href , $(this).attr(rel); );/ how to use/ place this in your header/ the linksDefault ThemeRed ThemeBlue Theme);7. 列高度相同如果使用了两个CSS列，使用此种方式可以是两列的高度相同。$(document).ready(function() function equalHeight(group) tallest = 0;

7、 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 def

8、ault) 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,

9、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 = curr

10、entFontSizeNum*0.8; $(html).css(font-size, newFontSize); return false; ););9. 返回页面顶部功能网站很常用的功能，增强用户体验$(document).ready(function() $(ahref*=#).click(function() if (location.pathname.replace(/,) = this.pathname.replace(/,) & location.hostname = this.hostname) var $target = $(this.hash); $target = $tar

11、get.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/ the linkgo to top);11. 获得鼠标指针值$(document).ready(function() $

12、().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 );12. 验证元素是否为空$(document).ready(function() if ($(#id).html() / do something );13. 替换元素$(document).ready(function() $(#id).replaceWith(I have be

13、en replaced ););14. jQuery延时加载功能$(document).ready(function() window.setTimeout(function() / do something , 1000););15. 移除单词功能$(document).ready(function() var el = $(#id); el.html(el.html().replace(/word/ig, ););16. 验证元素是否存在于jquery对象集合中$(document).ready(function() if ($(#id).length) / do something );17. 使整个DIV可点击$(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 usehome );18. ID与Class之间转换.当改变Win