使用jQuery需要去官网下载一个文件 jquery-3.3.1.js(普通版)或者 jquery-3.3.1.min.js（压缩版,本地改的名称）
在body里面引包，在前端 一个js文件就相当于一个模块
<script src="jquery-3.3.1.js"></script>
使用jquery的入口函数：当文档加载的时候调用此方法
$(document).ready(function(){});
简化后可以写成 $(function(){})
改变单个样式：
$('.box').css('background-color','green')
改变多个样式：
$('.box').css({
'width':500, //里面用逗号
'background-color':'green'
}）
jQuery和js对象的转化
在入口函数$(function(){})中，this 表示 js对象
$就是jQuery
jQuery对象，例如：$('.box')
js对象 ，例如：$('.box')[0]
下面以一个例子说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--链接css样式-->
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="box">alex</div>
<!--引包：一个js文件就是一个模块-->
<script src="jquery-3.3.1.js"></script>
<script>
// $和jQuery是一样的
console.log($);
console.log(jQuery);
//入口函数 当文档加载的时候调用此方法
// $(document).ready(function(){});
// $(function(){}) //等同于上面
$(function(){
console.log($('.box')[0]);//jQuery转化成js
$('.box').click(function(){
// $('.box').css('background-color','green')
$('.box').css({
// 'width':500, //里面用逗号
// 'background-color':'green' //也可以使用 backgroundColor
// 变化的命令：<div class="box" style="width: 500px; background-color: green;">alex</div>
});
//this可以表示js对象
console.log(this) ; //<div class="box" style="width: 500px; background-color: green;">alex</div>
// js转换成jQuery对象 $(this)
$(this).css('background-color','green') //实现了同样的效果
})
})
</script>
</body>
</html>
jquery对象：https://www.processon.com/view/link/5b7d6458e4b0534c9bb76ad9
jquery事件：https://www.processon.com/view/link/5ad1c48de4b0b74a6dd65426
浙公网安备 33010602011771号