文章目录
一、jQuery概述
1.1JS库
是一个很好的封装好的特定的集合(方法和函数)。从封装一大推的函数理解,就是再这个库中,封装了很多预先定义好的函数在里面,比如动画,获取元素
简单理解:就是一个JS文件,里面对我们原生JS代码进行了封装,存放到里面。我们可以以高效使用封装好的功能
jQuery就是为了快速操作DOM
1.2jQuery的概念
是一个快速简洁的js库,写更少的代码,做更多的事情
封装了常用的函数
二、jQuery的基本使用
2.1jquery下载
https://code.jquery.com/jquery-3.6.0.min.js
2.2jquery的使用步骤
1.引入jQuery文件
2.3jquery的入口函数
$function(){}
$(function (){
// DOM加载完成的入口
});
$(document).ready(function (){
// DOM加载完成的入口
})
1.等DOM结构渲染完毕即可执行内部代码,不必等到所有资源加载完成,jQuery帮我们完成了封装
2.相当于js中的DOMContentLoaded
3.不同于js中的load事件是等所有页面文档、外部的js文件、css、图片全部加载完成才执行内部代码。
2.4jQuery的顶级对象$
1.$是jQuery的别名
<script>
// $(function (){
// alert(11);
// })
jQuery(function (){
alert(11);
})
</script>
2.是顶级对象,相当于JS中的window。利用$把元素包装成jQuery对象,就可以调用jQuery方法。
2.5jQuery对象和DOM对象
1.用原生JS获取来的对象就是DOM对象
2.jQuery方法取的就是jQuery对象
3.jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式)
DOM对象与jQuery对象之间是可以相互转换的
因为原生js比jQuery更大,原生的一些属性和方法jQuery没有给我们封装
1.DOM对象转jQuery对象
<script src="jquery.min.js"></script>
</head>
<body>
<video src="mov.mp4" muted></video>
<script>
// 1.DOM对象转换为jQuery对象
// (1)直接俄获取视频,得到的就是jQuery对象
$('video');
// (2)使用JS获取来的
var myvideo = document.querySelector('video');
// $(myvideo).play(); jquery没有play方法
// 2.jquery对象转为DOM对象
// myvideo.play();
$('video')[0].play();
$('video').get(0).play();
</script>