jQuery源码浅谈系列---$.nodeName(你没见过？)

最新推荐文章于 2023-06-26 22:38:08 发布

最新推荐文章于 2023-06-26 22:38:08 发布 · 525 阅读

文章标签：

#jQuery.nodeName #xheditor #nodeType

jQuery源码浅析专栏收录该内容

43 篇文章

订阅专栏

本文探讨了xheditor富文本编辑器中如何使用$.nodeName判断当前绑定对象是否为textarea的方法，并对比了通过type属性判断的方式，介绍了nodeName、nodeType及nodeValue的基本概念及其应用场景。

最近做富文本编辑器调研的时候看到xheditor的源码的时候觉得有点东西简单地说说。

第一个：我们判断this对象是否是textarea

/*
截取部分
*/
$.fn.xheditor  = function(options){
     
       this.each(function(){
             //解释一下吧
            //第一你可能用jQuery用到现在第一次见nodeName这个api
            //确实在一些api的chm里面是没有这个api的介绍的
            //不过不要担心我下面会介绍这个api
            //其实就是判断当前绑定的对象是否是textarea
             if(!$.nodeName(this,'TEXTAREA')){
                  return;
             }
       });

}

看到这里，如果你以前写过或者看过类似textarea自适应的相关插件或者有点基础的人，你会觉得是不是这样就可以了

/*
截取部分
*/
$.fn.xheditor  = function(options){
     
       this.each(function(){  //直接读type属性
             if(this.type !== 'textarea'){
                  return;
             }
       });

}

好。我们来看看$.nodeName这个api吧。

ps：如果我面试的话，谁要告诉我他用了好几年jQuery而且通读源码的话，但是连$.nodeName多不知道，我是觉得NO ok的。

/*
nodeName
@param elem ------elem对象
@param name -----指定匹配的nodeName
*/
nodeName : function(elem,name){
    //elem存在nodeName的属性而且转换大写后指定的name是一致的
    return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
}

或者你现在还不知道什么事nodeName或者nodeType或者nodeValue.不要紧，不知道我一一给你道来。

1. nodeType ------返回节点的类型。

简单地举出常见的：