首页 > 建站教程 > JS、jQ、TS >  jQuery的22个使用技巧合集正文

jQuery的22个使用技巧合集

1、去除页面的右键菜单
$(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="https://5.jimth.com" 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="https://5.jimth.com/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;
TAGS: jQuery技巧