有关getElementById,getElementsByClassName和$的区别和互通性

延伸话题:如何获取标签名称(jsjquery

 

1.原生jsdocument.getElementById("archivie_scheme").tagName

    document.getElementById("archivie_scheme").nodeName

2.Jquery:$(".archivie_scheme").get(0).tagName

    $(".archivie_scheme").get(0).nodeName

getElementById:方法可返回对拥有指定 ID 的第一个对象的引用如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()

getElementsByClassName:方法返回文档中所有指定类名的元素集合,作为 NodeList 对象.getElementsByTagName()性质很像,所以要使用方法的时候应该先指定对应的下标

 如下图所示getElementById和getElementsByClassName比较明显的应用区别:

有关getElementById,getElementsByClassName和$的区别和互通性_第1张图片

 

 有关getElementById,getElementsByClassName和$的区别和互通性_第2张图片

$:是jquery常用的一个回传函数,等价于jQuery,可以引用内部封装的方法

其实jquery外层也就是一个闭包,如下实例所示:

 var temp = "Hello World!";
    (function( window, undefined ) {
       var temp = "KAKA World!";
       window.temp = temp;
    })( window );
    alert(temp);

 通过上面实例我们可以看出,它的结果应该是KAKA,而不是Hello。因为我们在闭包中导出了temp局部变量为全局变量,因此会覆盖了第一行声明的全局变量temp.

$("#div")[object Object]返回的是jquery对象,可以使用jquery的内部封装的方法和函数、属性等

document.getElementById("div")[object HTMLDivElement],返回的是一个DOM对象;

但是$和dom可以相互转换,如下所示:

var $v =$("#v") ; //jQuery对象 
var v=$v[0];var v=$v.get(0) //DOM对象 

有关jquery的核心封装:

jQuery = function( selector, context ) {

        return new jQuery.fn.init( selector, context, rootjQuery );

      }

jQuery.fn = jQuery.prototype;

jQuery.fn.init.prototype = jQuery.fn;

上面的两句话,1.jQuery对象的原型赋给了fn属性,2.jQuery对象的原型又赋给了init对象的原型。这样便可以实现:init对象和jQuery具有相同的原型,因此我们在上面返回的init对象,就与jQuery对象有一样的属性和方法

jQuery其实就是将DOM对象加了一层包裹

 有关getElementById,getElementsByClassName和$的区别和互通性_第3张图片

当其进行DOM对象化的时候就可以调用它们的属性方法(tagName,nodeName,如上图所示。

 

你可能感兴趣的:(有关getElementById,getElementsByClassName和$的区别和互通性)