"收集的程序35个 jQuery 小技巧/代码片段,可以帮你快速开发. 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 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. 在新窗口中打开链接 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 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. 预加载图片 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> }); 10. 获得鼠标指针XY值 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> }); 11.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件。解的技巧 // Back to top $('a.top').click(function () { $(document.body).animate({ scrollTop: 0},程序 800); return false; });<!-- Create an anchor tag --><a class=""top"" href=""#"">Back to top</a> 改变 scrollTop 的值可以调整返回距离顶部的距离,而 animate 的猿都第二个参数是执行返回动作需要的时间(单位:毫秒)。 12.预加载图片 如果你的解的技巧页面中使用了很多不可见的图片(如:hover 显示),你可能需要预加载它们: $.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('<img>').attr('src',程序 arguments[i]); } }; $.preloadImages('img/hover1.png', 'img/hover2.png'); 13.检查图片是否加载完成 有时候你需要确保图片完成加载完成以便执行后面的操作: $('img').load(function () { console.log('image load successful'); }); 你可以把 img 替换为其他的 ID 或者 class 来检查指定图片是否加载完成。 14.自动修改破损图像 如果你碰巧在你的猿都网站上发现了破碎的图像链接,你可以用一个不易被替换的解的技巧图像来代替它们。添加这个简单的程序代码可以节省很多麻烦: $('img').on('error', function () { $(this).prop('src', 'img/broken.png'); }); 即使你的网站没有破碎的图像链接,添加这段代码也没有任何害处。猿都 15.鼠标悬停(hover)切换 class 属性 假如当用户鼠标悬停在一个可点击的解的技巧元素上时,你希望改变其效果,下面这段代码可以在其悬停在元素上时添加 class 属性,当用户鼠标离开时,则自动取消该 class 属性: $('.btn').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); }); 你只需要添加必要的CSS代码即可。如果你想要更简洁的代码,可以使用 toggleClass 方法: $('.btn').hover(function () { $(this).toggleClass('hover'); }); 注:直接使用CSS实现该效果可能是更好的解决方案,但你仍然有必要知道该方法。 16.禁用 input 字段 有时你可能需要禁用表单的 submit 按钮或者某个 input 字段,直到用户执行了某些操作(例如,检查“已阅读条款”复选框)。可以添加 disabled 属性,直到你想启用它时: $('input[type=""submit""]').prop('disabled', true); 你要做的就是执行 removeAttr 方法,并把要移除的属性作为参数传入:
|