jQuery源码解读之hasClass()方法分析

本文较为详细的分析了jQuery源码解读之hasClass()方法。分享给大家供大家参考。具体分析如下：

代码如下:

jQuery.fn.extend({
    hasClass: function( selector ) {
//将要检查的类名selector赋值给className, l为选择器选择的当前要检查的jQuery对象数组的长度。
        var className = " " + selector + " ",
            i = 0,
            l = this.length;
//循环检查每一个DOM元素的类名
        for ( ; i < l; i++ ) {
//this[i].nodeType === 1，判断当前DOM节点的节点类型，1表示元素节点。
//this[i].className，获取当前DOM节点已经存在的类名。
//rclass = /[\t\r\n\f]/g，replace(rclass, " ")表示移除当前DOM节点类名里的制表符，换行符，回车符等。
//indexOf(className)，开始在当前DOM节点的类名里检索是否有你要检查的类名className，如果>=0，表示存在，返回true，跳出函数。
            if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) >= 0 ) {
                return true;
            }
        }
//循环检查完了，发现每一个DOM元素里都没有找到你要检查的类名，则返回false,跳出函数。
//可见，只要你的jQuery对象数组里，发现有一个DOM元素的类名里包含你要查找的类名，则返回true，跳出函数。
        return false;
    }
});

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 通过jQuery源码学习javascript(二)

    通过jQuery源码学习javascript(二)

    巧妙1:函数 在javascript代码中函数是个不可多得的人才. ♥ 它可以归置代码段,封装相对独立的功能. ♥ 它也可以实现类,注入OOP思想. jQuery就是一个函数,你也可以把它当成类(呵呵,本身就是类). 复制代码 代码如下: (function(){ var jQuery = function() { // 函数体 } window.jQuery = window.$ = jQuery; })(); console.log(jQuery); 上面的空函数就是所谓的构造函数,构造函数

  • 通过jQuery源码学习javascript(三)

    通过jQuery源码学习javascript(三)

    疑问 第一篇中有位博友提出了以下的问题,我也不太明白,如果有明白的,能否告知一.二. 复制代码 代码如下: var str = "test"; for(var a in str){ console.log(a + ":" + str[ a ]); } 输出结果 这是一个字符串对象,在使用for的时候,会出现上面的情况. 自调用匿名函数(function(){})(window) 复制代码 代码如下: (function(window, undefined){ //

  • 从JQuery源码分析JavaScript函数的apply方法与call方法

    从JQuery源码分析JavaScript函数的apply方法与call方法

    最近在使用jQuery的$.each方法时很,突然想到$.each($('div'),function(index,entity){});中的这个index和entity是哪冒出来的,而且可有可无的,而且这么高大上的能告诉我们当前遍历的下标和实例.所以看了一下jQuery源代码,是这么写的: 调试的时候走的是标红的这段代码,然后用到了callback.call这个函数,于是翻看了一下<js高级程序设计>,其中有比较深的解释. 首先,function是一个指向Function对象,函数名是一个指

  • 使用JS实现jQuery的addClass, removeClass, hasClass函数功能

    废话不多说,直接上代码 复制代码 代码如下: function addClass(obj, cls){     var obj_class = obj.className,//获取 class 内容.     blank = (obj_class != '') ? ' ' : '';//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.     added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.     obj

  • jQuery源码解读之removeAttr()方法分析

    本文较为详细的分析了jQuery源码解读之removeAttr()方法.分享给大家供大家参考.具体分析如下: 扩展jQuery原型对象的方法: 复制代码 代码如下: jQuery.fn.extend({ //name,传入要DOM元素要移除的属性名.     removeAttr: function( name ) { //使用jQuery.fn对象,即jQuery原型对象的each方法遍历当前选择器选择的jQuery对象数组,并返回该jQuery对象以便链式调用.         return

  • jQuery源码分析之jQuery中的循环技巧详解

    jQuery的源码中有很多值得学习借鉴的技巧,本文即收集了jQuery中出现的各种遍历技巧和场景.具体分析如下: // 简单的for-in(事件) for ( type in events ) { } // 缓存length属性,避免每次都去查找length属性,稍微提升遍历速度 // 但是如果遍历HTMLCollection时,性能提升非常明显,因为每次访问HTMLCollection的属性,HTMLCollection都会内部匹配一次所有的节点 for ( var j = 0, l = ha

  • jQuery源码解读之removeClass()方法分析

    本文较为详细的分析了jQuery源码解读之removeClass()方法.分享给大家供大家参考.具体分析如下: removeClass()方法和addClass()差别不大.这就来看看: 复制代码 代码如下: jQuery.fn.extend({     removeClass: function( value ) {         var classes, elem, cur, clazz, j, finalValue,             i = 0,             len

  • jQuery源码解读之addClass()方法分析

    本文较为详细的分析了jQuery源码解读之addClass()方法.分享给大家供大家参考.具体分析如下: 给jQuery原型对象扩展addClass功能,jQuery.fn就是jQuery.prototype 复制代码 代码如下: jQuery.fn.extend({ /* 可以看出这是一个函数名叫addClass的插件方法. */     addClass: function( value ) {         var classes, elem, cur, clazz, j, finalV

  • jQuery中removeClass()方法用法实例

    本文实例讲述了jQuery中removeClass()方法用法.分享给大家供大家参考.具体分析如下: 此方法从匹配元素删除一个或多个类. 根据方法参数的不同,有以下几种语法结构. 语法结构一: 方法没有参数.把匹配元素所有的类都移除. 复制代码 代码如下: $(selector).removeClass() 实例代码: 代码可以将div的所有css类删除. 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-eq

  • jQuery源码分析之jQuery.fn.each与jQuery.each用法

    本文实例讲述了jQuery源码分析之jQuery.fn.each与jQuery.each用法.分享给大家供大家参考.具体分析如下: 先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个red类 复制代码 代码如下: $('div').each(function(index, elem){       $(this).addClass('red'); } }); 上面用的的.each,即jQuery.fn.each,其内部是通过jQuery.each实现的 复制代码 代码如下: j

随机推荐