1. 去除页面的右键菜单
$(document).ready(function(){ $(document).bind(“contextmenu”,function(e){returnfalse;});});
2、搜索输入框文字的消失
当鼠标获得焦点、失去焦点的时候,input输入框文字处理:
$(document).ready(function(){ $(“input.text1″).val(“Enter your search text here”); textFill($(‘input.text1′));});function textFill(input){//input focus text function var originalvalue = 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 $(‘a[href^="http://"]‘).attr(“target”,”_blank”); <wbr>//Example 2: Links with the rel=”external” attribute will only open in a new window $(‘a[@rel$='external']‘).click(function(){this.target=”_blank”;});});</wbr>
<wbr><wbr></wbr></wbr>
// 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 above if($.browser.mozilla&& $.browser.version>=”1.8″){// do something }// Target Safari if( $.browser.safari){// do something }// Target Chrome if( $.browser.chrome){// do something }// Target Camino
if( $.browser.camino){// do something }// Target Opera if( $.browser.opera){// do something }// Target IE6 and below if($.browser.msie&& $.browser.version<=6){// do something }// Target anything above IE6 if($.browser.msie&& $.browser.version>6){// do something
}});
5、预加载图片
$(document).ready(function(){ jQuery.preloadImages=function(){for(var i =0; i<arguments.length; i++)=”"{=”" jquery(“=”"><img>”).attr(“src”, arguments[i]);}}// how to use $.preloadImages(“image1.jpg”);});</arguments.length;>
6、轻松切换css样式
$(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” href=”default.css” type=”text/css”> // the links <a href=”#” rel=”default.css”>Default Theme</a> <a href=”#” class=”Styleswitcher” rel=”red.css”>Red Theme</a> <a href=”#” class=”Styleswitcher” 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);returnfalse;});// 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);returnfalse;});});
9、返回头部滑动动画
$(‘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);returnfalse;}}});
// how to use
// place this where you want to scroll to
<a name=”top”></a> // the link <a href=”#top”>go to top</a>
10、获取鼠标位置
$().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);});
11、判断一个元素是否为空
if($(‘#id’).html()){// do something }
12、替换元素
$(‘#id’).replaceWith(‘ <div>I have been replaced</div> <wbr>‘);</wbr>
<wbr><wbr><p>13、jquery timer 返回函数</p>
<div>
<div>$(document).ready(function(){ window.setTimeout(function(){// do something },1000);});</div>
</div>
<p>14、jquery也玩替换</p>
<div>
<div>$(document).ready(function(){var el = $(‘#id’); el.html(el.html().replace(/word/ig,”"));});</div>
</div>
<p>15、判断元素是否存在</p>
<div>
<div>$(document).ready(function(){if($(‘#id’).length){// do something }});</div>
</div>
<p>16、让div也可以click</p>
<div>
<div>$(“div”).click(function(){//get the url from href attribute and launch the url window.location=$(this).find(“a”).attr(“href”);returnfalse;});</div>
</div>
<p>// how to use</p>
<div>
<div><div><a href=”index.html”>home</a></div></div>
</div>
<p>17、使用jquery来判断浏览器大小添加不同的class</p>
<div>
<div>$(document).ready(function(){function checkWindowSize(){if( $(window).width()>1200){ $(‘body’).addClass(‘large’);}else{ $(‘body’).removeClass(‘large’);}} $(window).resize(checkWindowSize);});</div>
</div>
<p>18、几个字符就clone!</p>
<div>
<div>var cloned = $(‘#id’).clone()</div>
</div>
<p>19、设置div在屏幕中央</p>
<div>
<div>$(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”);returnthis;}
$(“#id”).center();});</div>
</div>
<p>20、创建自己的选择器</p>
<div>
<div>$(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’);});});</div>
</div>
<p>21、计算元素的数目</p>
<div>
<div>$(document).ready(function(){ $(“p”).size();});</div>
</div>
<p>22、设置自己的li样式</p>
<div>
<div>$(document).ready(function(){ $(“ul”).addClass(“Replaced”); $(“ul > li”).prepend(“‒ “);// how to use ul.Replaced{ list-style : none;}});</div>
</div>
<p>23、使用google的主机来加载jquery库</p>
<div>
<div><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 src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”
type=”text/javascript”></script> <wbr>// 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></wbr>
</div>
</div>
<wbr><wbr><p>24、关闭jquery动画效果</p>
<div>
<div>$(document).ready(function(){ jQuery.fx.off=true;});</div>
</div>
<p>25、使用自己的jquery标识</p>
<div>
<div>$(document).ready(function(){var $jq = jQuery.noConflict(); $jq(‘#id’).show();});</div>
</div>
</wbr></wbr></wbr></wbr>
分享到:
相关推荐
jQuery攻略 jQuery是目前应用最广泛的JavaScript框架之一。已经成为微软ASP.NET、...作者按照“问题描述——解决方案——知其所以然”的思路组织全书内容,将各种实用的jQuery技巧穿插在案例中,使读者轻松掌握jQuery。
25大实用的jQuery技巧和解决方案 1 去除页面的右键菜单 $ document ready function { $ document bind "contextmenu" function e { return false; } ; } ; 2 搜索输入框文字的消失 当鼠标获得焦点 ...
JQuery AJAX提交中文乱码的解决方案 Jquery css函数用法 JQuery中getJSON的使用方法 Jquery中显示隐藏的实现代码分析 JQuery全选功能的实现 JQuery特效——下拉菜单 JQuery系列教程之XPath选择符 JQuery系列教程之...
全书包含大量的实战案例和开发技巧,总结了CSS开发中的非常好的实践方法(LESS、SASS、Bootstrap、Foundation、Node.js、jQuery),讨论了各种实际问题的解决方案,是一本目前市场上难得一见的CSS高效开发实战书。
该项目中的技术点可谓众多,每个技术点的实现都有一定的技巧,在本项目中老师会带领大家去采用最实用的技术去实现众多技术点。 七、课程安排(大体安排60讲左右,每讲在45分钟以上)。 课程包括数据库层设计,业务流程...
│ │ 9.JAVA并发编程之多线程并发同步业务场景与解决方案.wmv │ │ │ ├─10.微服务架构之Spring Cloud Eureka 场景分析与实战 │ │ 10.微服务架构之Spring Cloud Eureka 场景分析与实战.wmv │ │ │ ├─11....
再比如ASP.Net内置的AJAX解决方案UpdatePanel只在部分要求不高的内网项目中才被使用,因此我们在讲解UpdatePanel的使用和原理之外,把更多的时间放在讲解企业中用的最多的JQuery AJAX解决方案上。 6、B/S系统项目(7...
直到当前它对XML和Web服务的具体支持,内容主要涉及JavaScript的语言特点、JavaScript与浏览器的交互、更高级的JavaScript技巧,以及与在Web应用程序中部署JavaScript解决方案有关的问题,如错误处理、调试、安全性...
2个目标文件,FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户...
2个目标文件,FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户...