本文列出jquery一些应用小技巧,比如有禁止右键点击、隐藏搜索文本框文 字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元 素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类 库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。
请看下文jquery技巧:
1、禁止右键点 击
1 | $(document).ready( function (){ |
2 | $(document).bind( "contextmenu" , function (e){ |
2、 隐藏搜索文本框文字
01 | $(document).ready( function () { |
02 | $( "input.text1" ).val( "Enter your search text here" ); |
03 | textFill($( 'input.text1' )); |
06 | function textFill(input){ |
07 | var originalvalue = input.val(); |
08 | input.focus( function (){ |
09 | if ( $.trim(input.val()) == originalvalue ){ input.val( '' ); } |
11 | input.blur( function (){ |
12 | if ( $.trim(input.val()) == '' ){ input.val(originalvalue); } |
3、 在 新窗口中打开链接
01 | $(document).ready( function () { |
03 | $( 'a[href^="<a href="http://%22]%27%29.attr%28%22target/">http://"]' ).attr( "target</a>" , "_blank" ); |
06 | $( 'a[@rel$=' external ']' ).click( function (){ |
07 | this .target = "_blank" ; |
11 | <A href= "<a href=" http: |
4、检测浏览器注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量。
01 | $(document).ready( function () { |
03 | if ($.browser.mozilla && $.browser.version >= "1.8" ){ |
08 | if ( $.browser.safari ){ |
28 | if ($.browser.msie && $.browser.version <= 6 ){ |
33 | if ($.browser.msie && $.browser.version > 6){ |
5、预加载图片
1 | $(document).ready( function () { |
2 | jQuery.preloadImages = function () |
4 | for ( var i = 0; i ").attr(" src", arguments[i]); |
8 | $.preloadImages( "image1.jpg" ); |
6、页面样式切换
01 | $(document).ready( function () { |
02 | $( "a.Styleswitcher" ).click( function () { |
04 | $( 'link[rel=stylesheet]' ).attr( 'href' , $( this ).attr( 'rel' )); |
08 | <LINK href= "default.css" type=text/css rel=stylesheet> |
10 | <A class=Styleswitcher href= "#" rel= default .css>Default Theme</A> |
11 | <A href= "#" rel=red.css>Red Theme</A> |
12 | <A href= "#" rel=blue.css>Blue Theme</A> |
7、 列高度相同如果使用了两个CSS列,使用此种方式可以是两列的高度相同。
01 | $(document).ready( function () { |
02 | function equalHeight(group) { |
04 | group.each( function () { |
05 | thisHeight = $( this ).height(); |
06 | if (thisHeight > tallest) { |
13 | $(document).ready( function () { |
14 | equalHeight($( ".left" )); |
15 | equalHeight($( ".right" )); |
8、 动态控制 页面字体大小用户可以改变页面字体大小
01 | $(document).ready( function () { |
03 | var originalFontSize = $( 'html' ).css( 'font-size' ); |
04 | $( ".resetFont" ).click( function (){ |
05 | $( 'html' ).css( 'font-size' , originalFontSize); |
08 | $( ".increaseFont" ).click( function (){ |
09 | var currentFontSize = $( 'html' ).css( 'font-size' ); |
10 | var currentFontSizeNum = parseFloat(currentFontSize, 10); |
11 | var newFontSize = currentFontSizeNum*1.2; |
12 | $( 'html' ).css( 'font-size' , newFontSize); |
16 | $( ".decreaseFont" ).click( function (){ |
17 | var currentFontSize = $( 'html' ).css( 'font-size' ); |
18 | var currentFontSizeNum = parseFloat(currentFontSize, 10); |
19 | var newFontSize = currentFontSizeNum*0.8; |
20 | $( 'html' ).css( 'font-size' , newFontSize); |
9、返回页面顶部功能
01 | $(document).ready( function () { |
02 | $( 'a[href*=#]' ).click( function () { |
03 | if (location.pathname.replace(/^/ |
04 | && location.hostname == this .hostname) { |
05 | var $target = $( this .hash); |
06 | $target = $target.length && $target |
07 | || $( '[name=' + this .hash.slice(1) + ']' ); |
09 | var targetOffset = $target.offset().top; |
11 | .animate({scrollTop: targetOffset}, 900); |
20 | <A href= "#top" >go to top</A> |
10、获得鼠标指针 XY值
1 | $(document).ready( function () { |
2 | $().mousemove( function (e){ |
4 | $( '#XY' ).html( "X Axis : " + e.pageX + " | Y Axis " + e.pageY); |
11、 验证元素是否为空
1 | $(document).ready( function () { |
12、替换元素
1 | $(document).ready( function () { |
3 | <DIV>I have been replaced</DIV> |
13、jQuery延时加载功能
1 | $(document).ready( function () { |
2 | window.setTimeout( function () { |
14、 移除单词功能
1 | $(document).ready( function () { |
3 | el.html(el.html().replace(/word/ig, "" )); |
16、验证元素是否存在于Jquery对象集合中
1 | $(document).ready( function () { |
17、使整个DIV可点击
1 | $(document).ready( function () { |
2 | $( "div" ).click( function (){ |
4 | window.location=$( this ).find( "a" ).attr( "href" ); return false ; |
7 | <DIV><A href= "index.html" >home</A></DIV> |
18、ID与 Class之间转换当改变Window大小时,在ID与Class之间切换
01 | $(document).ready( function () { |
02 | function checkWindowSize() { |
03 | if ( $(window).width() > 1200 ) { |
04 | $( 'body' ).addClass( 'large' ); |
07 | $( 'body' ).removeClass( 'large' ); |
10 | $(window).resize(checkWindowSize); |
19、 克隆对象
1 | $(document).ready( function () { |
2 | var cloned = $( '#id' ).clone(); |
20、使元素居屏幕中间位置
1 | $(document).ready( function () { |
2 | jQuery.fn.center = function () { |
3 | this .css( "position" , "absolute" ); |
4 | this .css( "top" , ( $(window).height() - this .height() ) / 2+$(window).scrollTop() + "px" ); |
5 | this .css( "left" , ( $(window).width() - this .width() ) / 2+$(window).scrollLeft() + "px" ); |
21、写自己的选择器
01 | $(document).ready( function () { |
02 | $.extend($.expr[ ':' ], { |
03 | moreThen1000px: function (a) { |
04 | return $(a).width() > 1000; |
07 | $( '.box:moreThen1000px' ).click( function () { |
09 | alert( 'The element that you have clicked is over 1000 pixels wide' ); |
22、统计元素个数
1 | $(document).ready( function () { |
23、使用自己的 Bullets
1 | $(document).ready( function () { |
2 | $( "ul" ).addClass( "Replaced" ); |
3 | $( "ul > li" ).prepend( "‒ " ); |
5 | ul.Replaced { list-style : none; } |
24、引用Google主机上的Jquery类库Let Google host the jQuery script for you. This can be done in 2 ways.
02 | <SCRIPT src= "<a href=" http: |
03 | <SCRIPT type=text/javascript> |
04 | google.load( "jquery" , "1.2.6" ); |
05 | google.setOnLoadCallback( function () { |
08 | </SCRIPT><SCRIPT src= "<a href=" http: |
11 | <SCRIPT src= "<a href=" http: |
25、禁用Jquery(动画)效果
1 | $(document).ready( function () { |
26、 与 其他Javascript类库冲突解决方案
1 | $(document).ready( function () { |
2 | var $jq = jQuery.noConflict(); |