jQuery 简单介绍
jQuery的定义
jQuery是一个快速,小巧,功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行,使得 HTML文档遍历和操作,事件处理,动画和Ajax更加简单。通过多功能性和可扩展性的结合,jQuery改变 了数百万人编写JavaScript的方式。
jQuery 中 98% 的都是方法 只有两个属性: 索引和 length
为什么要使用jQuery?
window.onload 事件有事件覆盖的问题,因此只能写一个事件。 •代码容错性差。 •浏览器兼容性问题。 •书写很繁琐,代码量多。 •代码很乱,各个页面到处都是。 •动画效果很难实现。
jQuery的下载
https://jquery.com/ 下载对应的jQuery https://www.bootcdn.cn/ 通过cdn的方式引入 https://www.npmjs.com/ npm 包管理器下载(未来讲)
JQuery的使用
引包
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" class="box"></div>
<!--引包-->
<script type="text/javascript" src="jQku/jquery-3.3.1.js"></script>
</body>
</html>
jQuery的入口函数
<!--入口函数 文档加载完成之后 会调用-->
$(document).ready(function(){}) <!--等待图片加载完成之后 才执行-->
$(window).ready(function(){}) <!--简便写法 文档加载完成之后 会调用-->
$(function(){})
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// // window.onload会有事件覆盖
// window. onload = function(){
// alert(1)
// }
// window.onload = function(){
// alert(2)
// }
</script>
</head>
<body>
<script src="jQku/jquery-3.3.1.js"></script>
<script>
// 不会覆盖
// $(document).ready(function(){
// alert(1);
// });
// $(document).ready(function(){
// alert(2);
// }); </script> </body>
</html>