01-jQuery基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<!-- 把js写在DOM元素前面,需要写入口函数才能保证js代码的正常执行 -->
<!-- 入口函数的功能,都是等DOM元素加载完毕即可执行js代码,不必等到所有外部资源加载完成 -->
<script>
//$('div').hide()
// 1.入口函数第一种写法
// $(document).ready(function() {
// $('div').hide();
// })
// 2.入口函数第二种写法
$(function() {
$('div').hide();
})
</script>
<div></div>
</body>
</html>
02-jQuery对象和DOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<span></span>
<script>
// 1.DOM对象: 用原生js获取过来的就是DOM对象
var myDiv = document.querySelector('div'); // myDiv 是DOM对象
console.dir(myDiv)
// 2.jQuery对象: 用jquery方式获取过来的就是jQuery对象(利用$对DOM对象包装后产生的对象,以伪数组的形式存储) 本质:通过$把DOM元素进行了包装
$('div') // $('div')是一个jQuery对象
console.dir($('div'))
// 3.jQuery 对象只能使用jQuery方法 DOM对象则使用原生的javaScript属性和方法
// myDiv.style.display = 'none';
// myDiv.hide() 这个写法是错误的,myDiv是DOM对象,不能使用jquery里的hide()方法
$('div').style.display = 'none'; // 这个写法是错误的,这个$('div')是jQuery对象,不能使用原生js的属性和方法
</script>
</body>
</html>
03-jQuery对象和DOM对象相互转化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<video src="mov.mp4" muted></video>
<script>
// 1.DOM对象转换为jQuery对象
// (1)我们直接获取视频,得到的就是jquery对象
// $('video');
// (2)我们已经使用原生js 获取过来的 DOM对象
//var myVideo = document.querySelector('video');
//$(myVideo) DOM对象转换为jQuery对象
// myVideo.play(); // myVideo.play() 正确用法 jQuery里面没有play这个方法
// 2. jQuery对象转换为DOM对象
//$('video')[0] //方法一 0是索引号
// $('video').get(0) //方法二
// jQuery对象转换为DOM对象后再添加play方法
// $('video')[0].play()
$('video').get(0).play()
</script>
</body>
</html>