摘要:?1. 去除页面的右键菜单$(document).ready(function(){ $(document).bind(“contextmenu”,function(e){returnfalse;});}); 2、搜索输入框文字的消失

脚本宝典收集整理的这篇文章主要介绍了

javascript代码实例教程-25个实用的jQuery技巧和解决方案

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

?

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^="https://"]‘).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

open link
4、判断hga008.com|首页器类型

注意: 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”).attr(“src”, arguments[i]);}}// how to use $.preloadImages(“image1.jpg”);});
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

// the links Default Theme Red Theme Blue Theme });
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

// the link go to top
10、获取鼠标位置

$().mousemove(function(e){//display the x and y axis values inside the p with the id XY $(‘#XY’).html(“X Axis : “+ e.pageX+” | Y Axis “+ e.pageY);});
11、判断一个元素是否为空

if($(‘#id’).html()){// do something }
12、替换元素

$(‘#id’).replaceWith(‘

I have been replaced

?? ‘);
13、jquery timer 返回函数

$(document).ready(function(){ window.setTimeout(function(){// do something },1000);});
14、jquery也玩替换

$(document).ready(function(){var el = $(‘#id’); el.html(el.html().replace(/word/ig,”"));});
15、判断元素是否存在

$(document).ready(function(){if($(‘#id’).length){// do something }});
16、让p也可以click

$(“p”).click(function(){//get the url from href attribute and launch the url window.location=$(this).find(“a”).attr(“href”);returnfalse;});
// how to use

home


17、使用jquery来判断hga008.com|首页器大小添加不同的class

$(document).ready(function(){function checkWindowSize(){if( $(window).width()>1200){ $(‘body’).addClass(‘large’);}else{ $(‘body’).removeClass(‘large’);}} $(window).resize(checkWindowSize);});
18、几个字符就clone!

var cloned = $(‘#id’).clone()
19、设置p在屏幕中央

$(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();});
20、创建自己的选择器

$(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’);});});
21、计算元素的数目

$(document).ready(function(){ $(“p”).size();});
22、设置自己的li样式

$(document).ready(function(){ $(“ul”).addClass(“Replaced”); $(“ul > li”).prepend(“? “);// how to use ul.Replaced{ list-style : none;}});
23、使用google的主机来加载jquery库

?? // Example 2:(the best and fastest way)
24、关闭jquery动画效果

$(document).ready(function(){ jQuery.fx.off=true;});
25、使用自己的jquery标识

$(document).ready(function(){var $jq = jQuery.noConflict(); $jq(‘#id’).show();});

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦!?js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

javascript代码实例教程-25个实用的jQuery技巧和解决方案

全部内容,希望文章能够帮你解决

javascript代码实例教程-25个实用的jQuery技巧和解决方案

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过