jQuery基础
官网下载:jQuery
中文文档:jQuery API 中文文档 | jQuery 中文网jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm
1.jQuery入门
1.1.jQuery介绍
jQuery是一个Javascript库,是对于ECMAScript、dom、bom的一个浅封装,让用户更方便操作。 jQuery功能: 使用CSS选择器进行元素查询 事件机制 Dom操作 属性操作 工具方法 Ajax 我们将会从以上几个点展开讲述
学习jQuery之前需具备顶基础知识:
-
HTML
-
CSS
-
JavaScript
jQuery库包含**以下功能:**
-
HTML选取
-
HTML元素操作
-
CSS操作
-
HTML事件函数
-
JavaScript特效和函数
-
HTML DOM遍历和修改
-
AJAX
提示:除此之外,Jquery还提供了大量的插件,目前jQuery兼容于所有主流浏览器
1.2.jQuery安装
jQuery安装十分简单,只需要将jQuery的库导入到html中即可,我们可以下载下来也可以使用CDN资源。 一般我们在下载或者使用cdn资源的时候,都会让我们选择jquery.js 与 jquery.min.js版本,它们的区别在于jquery.min.js是经过压缩的,体积更小,适用于部署环境。而jquery适用于源码研究,我们对于jquery的学习,应该要上升到源码层次。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-
网页中添加jQuery
-
从jquery.com下载jQuery库
-
从CDN中载入jQuery
-
-
下载jQuery
有两个版本的jQuery可供下载:
-
Production version -用于实际的网站中,已被精简和压缩
-
Development version -用于测试和开发(未压缩,是可读的代码)
以上两个版本都可以在jQuery官网下载
jQuery库是一个JavaScript文件,可以使用HTML的<script>
标签引用,但需要注意引入的jQuery的版本要和API手册版本/开发使用一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-HelloWorld.html</title>
<!-- 本地引入 -->
<script src="../../jquery-3.5.1/jquery-3.5.1.js"></script>
<!-- 通过cdn引入 -->
<!--
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-->
<script>
// 1.原生JS的固定写法
window.onload = function () {
alert('helloworld -- js')
}
// 2.jQuery的固定写法
$(document).ready(function () {
alert('helloworld -- jquery')
})
</script>
</head>
<body>
</body>
</html>
1.3.jQuery函数
通过"jQuery"和"$"来调用jQuery函数 $(选择器) 通过选择器选择到符合条件的Element元素,将其保存到jQuery对象 $(html片段) 将html片段转换成Element元素,然后再封装成一个jQuery对象 $(Element元素) 将Element元素转换成一个jQuery对象 $(匿名函数) 匿名函数在文档加载完毕以后执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02-jQuery的核心函数和核心对象.html</title>
<!--
1.jQuery核心函数
简称:jQuery函数($/jQuery)
引入jQuery库以后,直接使用$/jQuery即可
当函数用:$(params)
当对象用的时候:$.each()
2.jQuery核心对象
简称:jQuery对象 $()
得到jQuery对象:执行jQuery函数返回的就是jQuery对象
使用jQuery对象:$obj.xxx()
-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="../../jquery-3.5.1/jquery-3.5.1.js"></script>
<script>
$(function () {
// jQuery核心函数
console.log($, typeof $);
// jQuery核心对象
console.log($(), $() instanceof Object);
})
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-比较原生js和jQuery.html</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<!-- 需求 通过原生js和jQuery来获取到三个div 并且修改他们的背景颜色 -->
<!-- 导入cdn -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="../../jquery-3.5.1/jquery-3.5.1.js"></script>
<script>
// JS原生DOM
window.onload = function () {
// 1.利用原生JS来查找DOM元素
var div1 = document.getElementsByTagName('div')[0]
var div2 = document.getElementsByClassName('box1')[0]
var div3 = document.getElementById('box2')
// console.log(div1);
// console.log(div2);
// console.log(div3);
// 2.利用原生JS修改背景颜色
// div1.style.backgroundColor