1. jQuery概述
1.1 JavaScript库
- jQuery就是一个JS库
- 以前学的JS称为原生的JS
1.2 常见的JavaScript库
- jQuery
- Prototype
- YUI
- Dojo
- Ext JS
- 移动端的zepto
这些库都是对原生JS的封装，内部都是JS实现的，我们主要学习jQuery，主要用来操作DOM
1.3 jQuery概念
1. 概念
2. 优点
2. jQuery的使用
2.1 下载
- 官网：https://jquery.com/download/
- Download the compressed, production jQuery 3.4.1：就是压缩版：jQuery.min.js(这里使用)
- Download the uncompressed, development jQuery 3.4.1:非压缩版：jQuery.js
2.2 引入到自己的html页面
<script src="jquery-3.4.1.min.js"></script>
2.3 具体用法
1. 让div隐藏
<body>
<div></div>
<script>
$('div').hide();//隐藏div
</script>
</body>
<style>
div {
200px;
height: 200px;
background-color: pink;
}
</style>
2. jQuery的入口函数
- 两种写法
- 举例
<body>
<div></div>
<script>
//方法1. 等着页面DOM元素加载完毕再去执行js代码
// $(document).ready(function() {
// $('div').hide();
// })
//方法2. 等着页面DOM元素加载完毕再去执行js代码
$(function() {
$('div').hide();
})
</script>
</body>
2.4 jQuery顶级对象$
<body>
<div></div>
<script>
//1. $=jQuery
// $(function() {
// $('div').hide();
// });
//等效于
jQuery(function() {
jQuery('div').hide();
});
</script>
</body>
(将元素div包装成jQuery对象)('div')，这样就可以调用hide()方法啦：$('div').hide();
2.5 jQuery对象和DOM对象
1. jQuery对象和DOM对象是不同的
<body>
<div></div>
<span></span>
<script>
//1. DOM对象：用原生js获取过来的对象就是DOM对象
var myDiv = document.querySelector('div'); //myDiv是DOM对象
var mySpan = document.querySelector('span'); //mySpan就是DOM对象
console.dir(myDiv);
//2. jQuery对象：用jQuery方式获取来的对象就是jQuery对象。 本质：通过$将DOM元素进行了包装
$('div'); //$('div')是一个jQuery对象
$('span'); //$('span')是一个jQuery对象
console.dir($('div'));
//3. jQuery对象只能使用jQuery方法，DOM对象只能原生的JS属性和方法
// myDiv.style.display = 'none';正确
// myDiv.hide();错误
// $('div').style.display = 'none';错误
// $('div').hide();正确
</script>
</body>
2. jQuery对象和DOM对象是可以相互转换的
<body>
<video src="mov.mp4" muted></video>
<script>
//1. DOM对象转换成jQuery对象
//方式1：
$('video');
//方式2
var myvideo = document.querySelector('video');
$(myvideo);
//自动播放
myvideo.play(); //正确：可以实现自动播放
//$(myvideo).play(); 错误：因为jQuery里面没有这个play方法
//2. jQuery对象转化为DOM对象
//方式1
$('video')[0];
//方式2
$('video').get(0);
//自动播放
$('video')[0].play(); //正确：可以实现自动播放
$('video').get(0).play(); //正确：可以实现自动播放
</script>
</body>