前方的言语

  如果只要比较喻jQuery及原生javascript的涉及,我个人觉得是自动档和手动档汽车之区别。使用本生javascript,可以了解离合器以及档位的意图;而使用jQuery,则将离合器和手动档位封装到函数,直接发展、后退或驻车即可。所以,熟练使用原来生javascript,再错过下jQuery是一个坏自然之步调。从本文开始,将接力介绍jQuery的连带内容,并受有有关的本生javascript实现。接下来,将详细介绍jQuery对象$

 

$对象

  说自jQuery,最显著的标志,毫无疑问,就是美元符号$,美元符号$其实是jquery的简写。而以$()包装的目标就是jQuery对象

  与jQuery对象相呼应之就是DOM对象,DOM对象实际就是DOM元素节点目标

  如果一直写document,则指的是document的DOM元素对象

document.onclick = function(){
    alert('dom');
}

  而而用$()包括起来,如$(document),是jQuery(document)的简写形式,则因的是jQuery对象

<script src="jquery-3.1.0.js"></script>    
<script>
    console.log(jQuery(document));//[document]
    console.log($(document));//[document]
    console.log(document);//#document
</script>

  [注意]jQuery对象无法以DOM对象的法门,DOM对象为无法采取jQuery对象的章程

<script src="jquery-3.1.0.js"></script>    
<script>
    //无反应
    $(document).onclick = function(){
        alert(0);
    };
    //Uncaught TypeError: document.click is not a function
    document.click(function(){
        alert(1);
    });
</script>

 

转换

【1】DOM转jQuery对象

  对于一个jQuery对象,只待用$()把DOM对象包装起来,就可获得一个jQuery对象

【2】jQuery转DOM对象

  jQuery是一个类数组对象,可以经过[index]还是get(index)的艺术得到相应的DOM对象

console.log(document === $(document)[0]);//true
console.log(document === $(document).get(0));//true

 

共存

  如果jQuery对象以及DOM对象对同一对象,绑定不同函数,则函数会按照顺序依次执行

//先弹出0,再弹出1
document.onclick = function(){
    alert(0);
}
$(document).click(function(){
    alert(1);
});

 

不报错

  如果以DOM对象,为未存的DOM对象设置样式会报错

//Uncaught TypeError: Cannot read property 'style' of null
document.getElementById('test').style.color = 'red';

  而采取jQuery对象,为非在的jQuery对象设置样式不会见报错

$('#test').css('color','red');

 

看清有

  一般地,DOM对象在行使前需要看清有,防止串

if(document.getElementById('#test')){
    document.getElementById('#test').style.color = 'red';
}

  对于jQuery对象的话,因为$()获取到之永是目标,即使网页上从不该因素。所以未能够使用下面方式判断

if($(#test)){
    //
}

  应该依据取得到元素的长来判定

if($(#test).length){
    //
}

  或者更换成为DOM对象来判定

if($(#test)[0]){
    //
}

 

最后

  最后要取一下jQuery的本问题。jQuery从2.0本开始不再支持IE8-浏览器,且失去丢了片老式的API,从而使体积更粗,运行速率更强。所以,如果生兼容IE8-浏览器的求,需要运用jQuery1.*版本

相关文章

网站地图xml地图