目录
1. jQuery概述
1)JavaScript库
JavaScript库:即library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。
简单理解:就是一个JS文件,里面对原生js代码进行了封装,存放到里面,这样我们就可以比较快速高效的使用这些封装好的功能了。
比如jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)。
常见的JavaScript库:这些库都是对原生JavaScript的封装,内部都是用JavaScript实现的
- jQuery
- Prototype
- YUI
- Dojo
- Ext JS
- 移动端的zepto
2)jQuery概念
jQuery是一个快速、简洁的JavaScript库。
j就是JavaScript,Query就是查询,即查询js,把js中的DOM操作做了封装,就可以快速的查询使用里面的功能。
jQuery封装了JavaScript常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
2. jQuery的基本使用
下载:jQuery
使用:引入jQuery文件,然后使用即可
1)jQuery的入口函数
- 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery帮我们完成了封装
- 相当于原生js中的DOMContentLoaded
- 不同于原生js中的load时间是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码
<!-- 引入jQuery文件,然后使用即可 -->
<script src="jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<script>
// $('div').hide();
//此处时页面DOM加载完成的入口
$(function() {
$('div').hide();
});
// $(document).ready(function() {
// $('div').hide();
// })
</script>
<div></div>
</body>
结果为:隐藏掉了div
2)jQuery顶级对象$
- $是jQuery的别称,在代码中可以使用jQuery代替$,但是一般为了方便通常都直接使用$
- $是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用$包装成jQuery对象,就可以调用jQuery的方法
<script>
//此处时页面DOM加载完成的入口
$(function() {
$('div').hide();
});
//1.$是jQuery的别称
//2.$是jQuery的顶级对象
jQuery(function() {
jQuery('div').hide();
});
</script>
3)jQuery对象和DOM对象
- 用原生JS获取来的对象就是DOM对象
- jQuery方法获取的元素就是jQuery对象
- jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)
<script src="jquery.min.js"></script>
</head>
<body>
<div></div>
<span></span>
<script>
// 1.用原生JS获取来的对象就是DOM对象
var myDiv = document.querySelector('div');
var mySpan = document.querySelector('span');
console.dir(myDiv);
// 2.jQuery方法获取的元素就是jQuery对象
$('div');
$('span');
console.dir($('div')); //伪数组方式存储
// 3.jQuery对象只能用jQuery方法,DOM对象只能使用原生的JS属性和方法
//隐藏元素的方法,DOM对象只能用display,不能使用jQuery对象的hide()方法
// myDiv.style.display = 'none';
// $('div').hide();
</script>
结果为:
DOM对象与jQuery对象之间是可以相互转换的。
因为原生js比jQuery答,原生的一些属性和方法jQuery没有给我们封装,想要使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
1. DOM对象转换为jQuery对象:$(DOM对象)
2. jQuery对象转换为DOM对象(两种方式)
<script src="jquery.min.js"></script>
</head>
<body>
<video src="mov.mp4" muted="muted" autoplay="autoplay"></video>
<script>
//1.DOM对象 -> jQuery对象
//直接获取
$('video');
//使用原生js之后获取
var myVideo = document.querySelector('video');
$(myVideo);
//2.jQuery对象 -> DOM对象 $('video')[index]
$('video')[0],play();
// $('video').get(0).play();
</script>
</body>
结果为: