jQuery 常用代码片段-优快云博客

本文链接：https://blog.youkuaiyun.com/kzbpp/article/details/8596196

本文介绍了jQuery的各种实用技巧，包括选择器优化、元素操作、事件处理等，帮助开发者提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 嵌套的过滤器

过滤器可以有效对结果集就行过滤，最终得到我们想要的结果。例如下面代码就把结果集中包含有类 .selected 的元素给过滤掉了：

.filter(":not(:has(.selected))");

jQuery 缓存选择器结果集

把结果集保存在变量中缓存下来，重用时就无需再次用选择器去选择了。

var allItems = $("div.item");  


var keepList = $("div#container1 div.item");

jQuery 检测某元素上是否包含某个类

jQuery 1.4.* 起新加的这个 has 方法：

$("input").has(".email").addClass("email_icon");

使用 jQuery 切换样式表

用选择器选择出样式表标签元素，然后改变其 href 属性的值即可。

$('link[media='screen']').attr('href', 'Alternative.css');

jQuery 限制选择器选择范围（性能优化）

尽可能地在类名前面指明标签名，这样能大大减少选择器的执行时间，如果能用 ID 之类的选择器缩小查询范围则效果更佳。

var in_stock = $('#shopping_cart_items input.is_in_stock');

假如 HTML 代码如下的话：

<ul id="shopping_cart_items">
        

  <li>
                

    <input value="Item-X" name="item" class="is_in_stock" type="radio"> 

      Item X
        

  </li>
        

  <li>
                

    <input value="Item-Y" name="item" class="3-5_days" type="radio"> 

      Item Y
        

  </li>
        

  <li>
                

     <input value="Item-Z" name="item" class="unknown" type="radio"> 

      Item Z
        

  </li>


</ul>

jQuery ToggleClass 的正确用法

ToggleClass 用来在某元素上添加或移除某个类。

// No


a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');



// Yes


a.toggleClass('blueButton');

jQuery 判断浏览器是否为 IE

if($.browser.msie) { 
        

    // 此浏览器为 IE


} else {
        

    // 非 IE


}

用 jQuery 把某元素替换掉

$('#thatdiv').replaceWith('fnuh');

jQuery 判断某元素中内容是否为空

if( !$('#keks').html() ) {
        

    // 空空如也


}

jQuery 判断无需列表元素的索引

$("ul > li").click(function () {
    var index = $(this).prevAll().length;


});

jQuery 给元素绑定事件执行函数

$('#foo').bind('click', function() {
        

    alert('用户点击了 "foo"');


});

jQuery 在某元素上追加内容

$('#lal').append('sometext');

jQuery 创建元素时，用一个对象为其添加属性及属性的值

var $e = $("<div>", {


    href: "#nav",
        

    "class": "a-class another-class",


    title: "..."


});

注意：class 是JavaScript 的保留字，最好加上引号。

jQuery 用元素的属性作为过滤条件

而且可以用多个属性作为条件：

var elements = $('.someclass input[type=sometype][value=somevalue]').get();

jQuery 使用 delegate 为元素添加事件

自 jQuery 1.4.2 起，建议用 delegate 和 undelegate 来替代 live 和 die，因为 delegate 对上下文有更好的支持。

// 使用 live()


$("table").each(function() {


    $("td", this).live("hover", function() {


      $(this).toggleClass("hover");
        

    });


});




// 使用 delegate()


$("table").delegate("td", "hover", function(){


    $(this).toggleClass("hover");


});

用 jQuery 找到下拉框中被选定的那个元素

$('#someElement').find('option:selected');

jQuery 将包含有某文字的段落隐藏

$("p.value:contains('thetextvalue')").hide();

jQuery 将滚动条滚动到页面上某位置

jQuery.fn.autoscroll = function() {


    $('html,body').animate({


        scrollTop: this.offset().top
                

    },
                500
        );


};



// 执行如下代码开始滚动，其实 autoscroll 就是一个 jQuery 插件。
$('#footer').autoscroll();

jQuery 检测浏览器版本

if( $.browser.safari ) {
        

    // afari


}



if( $.browser.msie && $.browser.version > 6 ) {
        

    // IE6 以上


}
        


if( $.browser.msie && $.browser.version <= 6 ) {
        

    // IE6 及以下


}



if( $.browser.mozilla && $.browser.version >= '1.8' ) {
        

    // FireFox 2 以上


}

jQuery 字符串替换

var el = $('#id');
el.html(el.html().replace(/word/ig, ''));

jQuery 禁用鼠标右键菜单

$(document).bind('contextmenu', function(e) {
        

    return false;


});

jQuery 检测某元素是否存在

if($('#someDiv').length) {
        

    // 存在


}

jQuery 侦测鼠标左击和右击事件

$("#someelement").live('click', function(e) {
        

    if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
                

      alert("左击了");
        

    } else if(e.button == 2) {
                

        alert("右击了");
        

    }


});

jQuery 自动显示、隐藏文本框的默认值

swap_val = [];


$("#s").each(function(i) {


    swap_val[i] = $(this).val();


    $(this).focusin(function() {
                

      if($(this).val() == swap_val[i]) {


        $(this).val("");
                }
        }).focusout(function() {
                

          if ($.trim($(this).val()) == "") {


            $(this).val(swap_val[i]);
                

          }
        

      });


   });

假如文本框 HTML 代码如下的话

<input value="Enter the keyword to search..." id="s" type="text">

jQuery 延时执行 JavaScript 代码

// 1.4 之前版本


setTimeout(function() {


    $('.mydiv').hide('blind', {}, 500);


}, 5000);



// 1.4 及之后版本


$(".mydiv").delay(5000).hide('blind', {}, 500);

jQuery 创建新元素并添加到页面中

var $newDiv = $('<div>');


$newDiv.attr('id','myNewDiv').appendTo('body');

jQuery 限制文本框中字符数

// 插件代码


jQuery.fn.maxLength = function(max) {
        

    this.each(function() {
                

      var type = this.tagName.toLowerCase();
                

      var inputType = this.type ? this.type.toLowerCase() : null;
                

      if(type == "input" && inputType == "text" || inputType == "password") {
                        

          // 最大字符数
                        

         this.maxLength = max;
                

     } else if(type == "textarea") {
                        

          this.onkeypress = function(e) {
                                

              var ob = e || event;
                                

              var keyCode = ob.keyCode;
                                

              var hasSelection = document.selection ? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
                                

             return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
                        };
                        this.onkeyup = function(){
                                if(this.value.length > max) {
                                        this.value = this.value.substring(0,max);
                                }
                        };
                }
        });
};

// 使用方法
$('#comment').maxLength(20);

jQuery 如何克隆一个元素

var $cloned = $('#somediv').clone();

jQuery 检测某元素是否处于可见状态

if($(element).is(':visible') == 'true') {
        // 可见
}

jQuery 让某元素居中显示

jQuery.fn.center = function() {
        this.css('position','absolute');
        this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
        this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');
        return this;
};

// 使用方法
$(element).center();

jQuery 将一批元素的值存到一个数组中

var arrInputValues = new Array();

$("input.someclass").each(function() {
     arrInputValues.push($(this).val());
});

jQuery 剥离 HTML 代码

(function($) {
    $.fn.stripHtml = function() {
        var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,"")
            );
        });
        return $(this);
    }
})(jQuery);


//用法
$('p').stripHtml();

jQuery 使用 closest 获取父元素

$('#searchBox').closest('div');

jQuery 在新窗口中打开超链接

jQuery(document).delegate('a', 'click', function() {
        var root = location.href.replace(location.pathname + location.search + location.hash, '');

        if ( !this.href ) return;

        if ( this.href.indexOf(root) != 0 ) {
                window.open(this.href);
                return false;
        }
});

jQuery 使用 .siblings() 获取姊妹元素

// 这样可以
$('#nav li').click(function() {
        $('#nav li').removeClass('active');
        $(this).addClass('active');
});

// 这样更好
$('#nav li').click(function() {
        $(this).addClass('active')
                .siblings().removeClass('active');
});

jQuery 让页面中所有复选框选中或者非选中

var tog = false;
$('a').click(function() {
        $("input[type=checkbox]").attr("checked", !tog);
        tog = !tog;
});

jQuery 根据特定元素值过滤的过滤器

$('.someClass').filter(function() {
        return $(this).attr('value') == $('input#someId').val();
});

jQuery 获取鼠标指针的坐标

$(document).ready(function() {
        $(document).mousemove(function(e) {
                $('#XY').html('X 坐标 ： ' + e.pageX + ' | Y 坐标 ： ' + e.pageY);
        });
});

jQuery 让整个 List 元素可点击

$("ul li").click(function() {
        window.location=$(this).find("a").attr("href");
        return false;
});

示例 HTML 代码

href="#">Link1
href="#">Link2
href="#">Link3
href="#">Link4

jQuery 解析 XML 的简单示例

function parseXml(xml) {
        $(xml).find("Tutorial").each(function() {
                $("#output").append($(this).attr("author") + " ");
        });
}

jQuery 检测图片是否加载完毕

$('#theImage').attr('src', 'image.jpg').load(function() {
        alert('图片加载完毕！');
});

jQuery 事件及方法的命名空间

// 事件
$('input').bind('blur.validation', function(e) {
        // ...
});

// 方法
$('input').data('validation.isValid', true);

jQuery 检测浏览器是否启用了 cookie

var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
if(!cookiesEnabled) {
        // 未启用
}

jQuery 让 cookie 过期

var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie('example', 'foo', { expires: date });

jQuery 自动为网址加上超链接

$.fn.replaceUrl = function() {
        var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,'$1')
            );
        });
        return $(this);
};

// 用法
$('p').replaceUrl();