26个Jquery使用小技巧
来源:互联网 发布:接口参数java 编辑:程序博客网 时间:2024/05/01 21:43
本文转自:http://www.admin10000.com/document/909.html
下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等 高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克 隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript 类库冲突问题。
1. 禁止右键点击
1 $(document).ready(function(){2 $(document).bind("contextmenu",function(e){3 return false;4 });5 });
2. 隐藏搜索文本框文字
1 $(document).ready(function() { 2 $("input.text1").val("Enter your search text here"); 3 textFill($('input.text1')); 4 }); 5 6 function textFill(input){ //input focus text function 7 var originalvalue = input.val(); 8 input.focus( function(){ 9 if( $.trim(input.val()) == originalvalue ){ input.val(''); }10 });11 input.blur( function(){12 if( $.trim(input.val()) == '' ){ input.val(originalvalue); }13 });14 }
3. 在新窗口中打开链接
1 $(document).ready(function() { 2 //Example 1: Every link will open in a new window 3 $('a[href^="http://"]').attr("target", "_blank"); 4 5 //Example 2: Links with the rel="external" attribute will only open in a new window 6 $('a[@rel$='external']').click(function(){ 7 this.target = "_blank"; 8 }); 9 });10 // how to use11 <A href="http://www.opensourcehunter.com" rel=external>open link</A>
4. 检测浏览器
注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量
1 $(document).ready(function() { 2 // Target Firefox 2 and above 3 if ($.browser.mozilla && $.browser.version >= "1.8" ){ 4 // do something 5 } 6 7 // Target Safari 8 if( $.browser.safari ){ 9 // do something10 }11 12 // Target Chrome13 if( $.browser.chrome){14 // do something15 }16 17 // Target Camino18 if( $.browser.camino){19 // do something20 }21 22 // Target Opera23 if( $.browser.opera){24 // do something25 }26 27 // Target IE6 and below28 if ($.browser.msie && $.browser.version <= 6 ){29 // do something30 }31 32 // Target anything above IE633 if ($.browser.msie && $.browser.version > 6){34 // do something35 }36 });
5. 预加载图片
1 $(document).ready(function() {2 jQuery.preloadImages = function()3 {4 for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?<img { i++)>").attr("src", arguments[i]);5 }6 }7 // how to use8 $.preloadImages("image1.jpg");9 });
6. 页面样式切换
1 $(document).ready(function() { 2 $("a.Styleswitcher").click(function() { 3 //swicth the LINK REL attribute with the value in A REL attribute 4 $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 5 }); 6 // how to use 7 // place this in your header 8 <LINK rel=stylesheet type=text/css href="default.css"> 9 // the links10 <A class=Styleswitcher href="#" rel=default.css>Default Theme</A>11 <A class=Styleswitcher href="#" rel=red.css>Red Theme</A>12 <A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A>13 });
7. 列高度相同
如果使用了两个CSS列,使用此种方式可以是两列的高度相同。
1 $(document).ready(function() { 2 function equalHeight(group) { 3 tallest = 0; 4 group.each(function() { 5 thisHeight = $(this).height(); 6 if(thisHeight > tallest) { 7 tallest = thisHeight; 8 } 9 });10 group.height(tallest);11 }12 // how to use13 $(document).ready(function() {14 equalHeight($(".left"));15 equalHeight($(".right"));16 });17 });
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. 返回页面顶部功能
1 $(document).ready(function() { 2 $('a[href*=#]').click(function() { 3 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 4 && location.hostname == this.hostname) { 5 var $target = $(this.hash); 6 $target = $target.length && $target 7 || $('[name=' + this.hash.slice(1) +']'); 8 if ($target.length) { 9 var targetOffset = $target.offset().top;10 $('html,body')11 .animate({scrollTop: targetOffset}, 900);12 return false;13 }14 }15 });16 // how to use17 // place this where you want to scroll to18 <A name=top></A>19 // the link20 <A href="#top">go to top</A>21 });
11. 获得鼠标指针XY值
1 $(document).ready(function() {2 $().mousemove(function(e){3 //display the x and y axis values inside the div with the id XY4 $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);5 });6 // how to use7 <DIV id=XY></DIV>8 9 });
12. 验证元素是否为空
$(document).ready(function() { if ($('#id').html()) { // do something }});
13. 替换元素
1 $(document).ready(function() {2 $('#id').replaceWith('3 <DIV>I have been replaced</DIV>4 5 ');6 });
14. jQuery延时加载功能
1 $(document).ready(function() {2 window.setTimeout(function() {3 // do something4 }, 1000);5 });
15. 移除单词功能
$(document).ready(function() { var el = $('#id'); el.html(el.html().replace(/word/ig, ""));});
16. 验证元素是否存在于jquery对象集合中
1 $(document).ready(function() {2 if ($('#id').length) {3 // do something4 }5 });
17. 使整个DIV可点击
1 $(document).ready(function() {2 $("div").click(function(){3 //get the url from href attribute and launch the url4 window.location=$(this).find("a").attr("href"); return false;5 });6 // how to use7 <DIV><A href="index.html">home</A></DIV>8 9 });
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. 克隆对象
1 $(document).ready(function() {2 var cloned = $('#id').clone();3 // how to use4 <DIV id=id></DIV>5 6 });
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");6 return this;7 }8 $("#id").center();9 });
21. 写自己的选择器
1 $(document).ready(function() { 2 $.extend($.expr[':'], { 3 moreThen1000px: function(a) { 4 return $(a).width() > 1000; 5 } 6 }); 7 $('.box:moreThen1000px').click(function() { 8 // creating a simple js alert box 9 alert('The element that you have clicked is over 1000 pixels wide');10 });11 });
22. 统计元素个数
1 $(document).ready(function() {2 $("p").size();3 });
23. 使用自己的 Bullets
1 $(document).ready(function() {2 $("ul").addClass("Replaced");3 $("ul > li").prepend("‒ ");4 // how to use5 ul.Replaced { list-style : none; }6 });
24. 引用Google主机上的Jquery类库
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 type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT> 9 10 // Example 2:(the best and fastest way)11 <SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>
25. 禁用Jquery(动画)效果
1 $(document).ready(function() {2 jQuery.fx.off = true;3 });
26. 与其他Javascript类库冲突解决方案
1 $(document).ready(function() {2 var $jq = jQuery.noConflict();3 $jq('#id').show();4 });
本文转自:http://www.admin10000.com/document/909.html
由于是复制粘贴的,留作笔记使用!觉得很不错!推荐给大家!
- 26个 jQuery 使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26 个 JQuery 使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 26个Jquery使用小技巧
- 饭工和碗工
- Hibernate3.x过滤器的高级应用
- UI基础style样式&Theme
- Java 枚举:switch 支持枚举
- Android隐藏状态栏和标题栏,相当于全屏效果
- 26个Jquery使用小技巧
- Hibernate对多表关联查询
- java数组排序
- 如何让redmine中问题或论坛中图片附件自动预览
- Ubuntu_Install Eclipse IDE on Ubuntu 12.04
- Hibernate程序性能优化的考虑要点
- 七夕感怀
- 分治法——二分搜索
- Hibernate继承映射时错误的解决方法