$(document).bind("contextmenu",function(e){ return false; });2、搜索输入框当鼠标获得焦点,默认文字消失,失去焦点,如果为空,文字出现:
$("input.text1").val("请输入内容..."); //执行函数 textFill($('input.text1')); }); //定义函数 function textFill(input){ 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、在新窗口中打开链接
//方法一:所有连接都会在新窗口打开 ^=为通配符,以后面的字符串开始 $('a[href^="http://"]').attr("target", "_blank"); //方法二:只有a连接的rel属性的值为external的时候才会在新窗口打开 $("a[rel='muban']").click(function(){ this.target = "_blank"; }); //方法二的使用方法 <a href="http://www.5imoban.net" rel="muban">网页模板</a>4、检测浏览器
注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量。
//火狐2.0+浏览器 if ($.browser.mozilla && $.browser.version >= "1.8" ){ //执行代码块 } //Safari if( $.browser.safari ){ //执行代码块 } //Chrome if( $.browser.chrome){ //执行代码块 } //Camino if( $.browser.camino){ //执行代码块 } //Opera if( $.browser.opera){ //执行代码块 } //IE6-浏览器 if ($.browser.msie && $.browser.version <= 6 ){ //执行代码块 } //IE6+浏览器 if ($.browser.msie && $.browser.version > 6){ //执行代码块 }5、预加载图片
jQuery.preloadImages = function() { for(var i = 0; i < arguments.length; i++) { $("<img />").attr('src', arguments[i]); } }; //用法 $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');6、页面样式切换
//jQuery代码 $("a.Styleswitcher").click(function() { //点击后替换css路径 $('link[rel=stylesheet]').attr('href',$(this).attr('rel')); }); //切换前的css文件引入代码 <link href="default.css" type="text/css" rel="stylesheet"> //切换样式的链接 <a class="Styleswitcher" href="#" rel="default.css">默认样式</a> <a class="Styleswitcher" href="#" rel="red.css">红色样式</a> <a class="Styleswitcher" href="#" rel="blue.css">蓝色样式</a>7、列高度相同 如果使用了两个CSS列,使用此种方式可以是两列的高度相同。
function equalHeight(group) { tallest = 0; group.each(function() { thisHeight = $(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.height(tallest); } //使用方法 equalHeight($(".left")); equalHeight($(".right"));8、动态控制页面字体大小
//重置字体大小 var originalFontSize = $('html').css('font-size'); $(".resetFont").click(function(){ $('html').css('font-size', originalFontSize); }); //增加字体大小 $(".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; }); //减小字体大小 $(".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、返回顶部代码
$('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; } } }); //放在顶部的锚链接 <A name=top></A> //放在底部的返回顶部按钮 <A href="#top">go to top</A>10、获得鼠标指针XY值
$().mousemove(function(e){ $('#xy').html("X坐标:" + e.pageX + "<br>Y坐标:" + e.pageY); }); //显示X和Y坐标 <div id="xy"></div>11、检测dom节点是否为空
if($('#id').html()){ //执行代码 }12、验证dom对象是否存在
if ($('#id').length) { //执行代码 }13、替换元素
$('#id').replaceWith('<DIV>I have been replaced</DIV>');14、jQuery setTimeout延时加载功能
window.setTimeout(function() {alert("一秒后弹出的对话框!");}, 1000);15、移除替换内容
var el = $('#id'); el.html(el.html().replace(/word/ig, ""));16、使整个DIV可点击
$("div").click(function(){ //跳转 window.location=$(this).find("a").attr("href"); return false; }); //html代码 <div><a href="http://www.5imoban.net/cssmoban">CSS网页模板</a></div>17、改变Window大小时,ID与Class之间切换
function checkWindowSize() { if ( $(window).width() > 1200 ) { $('body').addClass('large'); } else { $('body').removeClass('large'); } } $(window).resize(checkWindowSize);18、克隆对象
var cloned = $('#id').clone(); //被克隆对象的html代码 <div id="id"></div>19、使元素居屏幕中间位置
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"); return this; } $("#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、使用自己的Bullets
$("ul").addClass("Replaced"); $("ul > li").prepend("-"); //调用 ul.Replaced { list-style : none; }23、禁用jQuery(动画)效果
jQuery.fx.off = true;