2.1 jQuery的入口函数
可以将<script>标签写在元素标签的上方。
传统入口函数:
$(document).ready(function(){
......
})
目前常用的入口函数:
$(function(){
......
})
1、等着DOM结构渲染完毕即可执行内部代码,不必等待所有外部资源加载完毕。
2、入口函数相当于原生js中的DOMContentLoaded。
3、不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
2.2 jQuery等级对象$
1、$等同于jQuery,代码中两者可以相互替换。
2、$为jQuery中的顶级对象,相当于原生js中的window。$把元素进行包装后即可调用jQuery函数。
$('div').hide()
2.3 jQuery对象与DOM对象
1、 DOM对象, 原生js获取过来的就是DOM对象
2、jQuery对象, 用jQuery方式获取过来的对象就是jQuery对象
本质:用$把DOM元素进行了包装,伪数组形式存储
3、jQuery对象只能使用jQuery方法,DOM对象只能使用原生js的属性和方法。
<div></div>
<script>
// 1. DOM对象, 原生js获取过来的就是DOM对象
var myDiv = document.querySelector('div');
console.log(myDiv);
// 2.jQuery对象, 用jQuery方式获取过来的对象就是jQuery对象 本质:用$把DOM元素进行了包装
$('div');
console.dir( $('div'));
// 3、jQuery对象只能使用jQuery方法,DOM对象只能使用原生js的属性和方法。
myDiv.style.display = 'none';
$('div').hide();
</script>
DOM对象与jQuery对象可以相互转换。
因为原生js比jQuery更大,原生的一些属性和方法jQuery并没有封装进去,想要使用这些属性和方法就要把jQuery对象转变为DOM对象。
1. DOM对象转换为jQuery对象
$(DOM对象)
2.jQuery对象转换为DOM对象(两种方式)
$('div')[index] index是索引号
$('div').get(index)
<video src="mov.mp4" muted></video>
<script>
// 1. DOM对象转换为jQuery对象
$('video');
var myvideo = document.querySelector('video');
$(myvideo).play(); jQuery里面没有play这个方法
// 2.jQuery对象转换为DOM对象
myvideo.play();
$('video')[0].play();
$('video').get(0).play();
</script>