1、DOM对象和jQuery对象的差异比较
1.1、jQuery本质：使用$把DOM元素进行了包装
| 对比 | DOM对象 | jQuery对象 |
|---|---|---|
| 区别 | 用原生js获取的对象就是DOM对象 | 用原生jQuery获取的对象就是jQuery对象（jQuery本质：使用$把DOM元素进行了包装） |
| 获取对象语法 | var span=document.querySelector('span'); |
$('span'); |
| 属性方法 | 只能使用原生javascript属性和方法，不能调用jQuery的属性和方法 | 只能使用jQuery属性和方法 不能用DOM的属性和方法 |
1.2、获取对象的具体示例
通过原生js获取DOM对象
<body>
<span>DOM对象和jQuery对象的区别</span>
<script>
--- var span=document.querySelector('span');//使用原生js获取的DOM对象span
</script>
</body>
通过jQuery对获取对象
<body>
<span>DOM对象和jQuery对象的区别</span>
<script src="js/jQuery 3.4.1.min.js"></script>
<script>
--- $('span');//使用jQuery获取的DOM对象span
</script>
</body>
| 【注意】 |
|---|
| jQuery对象是以伪数组形式存储的 |
2、DOM对象和jQuery对象之间相互转换
jQuery就是对原生js进行了封装，有些js的原生方法jQuery可能没有实现封装，因此需要转换。
2.1、转换方法
| DOM对象转换成jQuery对象 | jQuery对象转换成DOM对象 |
|---|---|
$('div') |
方法一： $('div')[index]方法二： $('div').get(index)
|
2.2、转换示例
<body>
<video src="wowo.mp4" muted></video>
<script src="js/jQuery 3.4.1.min.js"></script>
<script>
//通过原生js获取video元素DOM对象，并调用play(),进行自动播放
var myVideo = document.querySelector("video");
myVideo .play();
$(myVideo); //转换成jQuery对象
$("video"); //通过jQuery获取video元素jQuery对象
// $(myVideo).play(); 报错
/*因为jQuery未对原生js中的play(),方法进行封装
因此 $("video")对象无法调用play方法,需要装换成DOM对象
jQuery获取的对象都是以伪数组形式存储的
当前页面中只有一个<video>标签因此通过元素选择器获取的对象
只有一个，则按如下数组索引取值转换即可*/
$(myVideo)[0]; //转换成DOM对象
$(myVideo).get(0); //转换成DOM对象
</script>
</body>
网友评论