理解JQuery对象$.html
来源:互联网 发布:淘宝买烟怎么搜索 编辑:程序博客网 时间:2024/03/28 16:33
$对象
说起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:对于一个jQuery对象,只需要用$把DOM对象包裹起来就可以得到一个jQuery对象
2:由于jQuery是一个类数组的对象,可以通过[index]或者get(index)的方法得到相应的DOM对象.
console.log(document === $(document)[0]);//trueconsole.log(document === $(document).get(0));//true
共存
如果JQuery对象和DOM对象指向同一个对象,绑定不同的函数,则函数会依次按照顺序执行。
//先弹出0 在弹出1document.onclick = function(){ alert(0);}$(document).click(function(){ alert(1);})
不报错
如果是使用的DOM对象,为不存在的DOM对象设置样式会报错
//Uncaught TypeError: Cannot read property 'style' of nulldocument.getElementById('test').style.color = 'red';
而是用jQuery对象,为不存在的对象设置样式不会报错.
$("#container").css({'color','red'});
判断存在
一般的DOM对象在使用之前要判断存在,防止出错;
if(document.getElementById("#container")){ document.getElementById("#container"),style.color = "red";}
对于JQuery对象来说,因为$()回去的永远是对象,即使网页上么有该元素。所以是不能用下面的方式去判断
if($("#container")){ //code}
应该获取元素的长度来判断
if($("#container").length){ //code}
或者是转换DOM对象来判断
if($("#container")[0]){ //code}
最后注意的是jQuery的版本问题,jQuery从2.0版本开始不再支持IE8,且去掉了一些过时的API,从而使的体积更小,运行速率更高,如果说要兼容IE8浏览器的需求,请使用1.*的版本。
0 0
- 理解JQuery对象$.html
- jquery对象转html
- 理解jQuery对象$
- html()方法使用jQuery对象
- Jquery延迟对象的理解
- 对jQuery对象的理解
- html的dom对象转JQuery对象
- JQuery对象转Dom , Jquery对象转html字符串,html字符串转Jquery对象
- HTML/CSS/JS用面向对象理解
- 使用JQuery获取html中的原始对象
- 查看jquery选中对象HTML代码
- jQuery对象方法操作html元素内容
- 理解jQuery解析JSON数据对象原理
- jquery中拖动对象的理解
- 理解jquery对象和DOM对象的区别
- 深刻理解jquery对象和普通对象的区别
- DOM对象与jQuery对象的理解与分析
- jquery对象怎么转换为html对象(也就是js的dom对象)
- js获取鼠标位置的各种方法
- C语言中const,volatile,restrict
- Android Studio 中 gradle 构建 堆栈空间不足
- 括号匹配问题
- java的文件IO编程知识总结
- 理解JQuery对象$.html
- JS严格模式的限制
- ubuntu 更新软件
- git工作区和版本库的概念和一个简单的例子
- poj1986 (树链剖分+线段树或者LCA+RMQ)
- 单链表
- eclipse中配置struts2出现There is no Action mapped for namespace [/] and action name [Login] associated w
- spss、R语言、Python数据分析系列(4):python读取外部数据
- 【js】javascript中的原型prototype