1.什么是jQuery？
jQuery 是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化 JavaScript 对 HTML DOM 操作。
jQuery其实就是js库，其中存放的是js代码，也就是用js代码写的function。
官网地址：https://jquery.com/
jQuery 是一个快速，小巧，功能丰富的 JavaScript 库。 它通过易于使用的 API 在大量浏览器中运行，使得 HTML 文档遍历和操作，事件处理，动画和 Ajax 变得更加简单。 通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。
2.为什么使用jQuery？
非常重要的理由就是：它能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX 异步对象。
其他优点：
（1）写少代码,做多事情【write less do more】
（2）免费，开源且轻量级的 js 库，容量很小
（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome
（4）能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX 功能
（5）文档手册很全，很详细
（6）成熟的插件可供选择，多种 js 组件，例如日历组件（点击按钮显示下来日期）
（7）出错后，有一定的提示信息
（8）不用再在 html 里面通过<script>标签插入一大堆 js 来调用命令了
3.jQuery的下载
官网下载地址：https://jquery.com/download/
这里直接将官网的两个文件（压缩和未压缩的）复制粘贴到记事本中，然后将文件后缀名改为 .min.js 和 .js 就可以了。
之后在HBuilderX中，新建一个项目，在这个项目中新建一个目录，将上面两个文件中的 jquery-3.6.0.js 复制粘贴到这个目录中。
4.DOM对象和jQuery对象
DOM对象：用 JavaScript 语法创建的对象，也看做是 js 对象。
jQuery对象：使用jQuery语法表示的对象，注意，jQuery表示的对象都是数组。
为什么要进行DOM对象和jQuery对象之间的转换？=======目的是要使用对象的方法。
4.1 DOM对象转jQuery对象
使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为 jQuery 对象才可以使用 jQuery 中的提供的方法，操作 DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以 $ 开头，这不是必须的。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>dom对象转为jQuery</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
function btnClick() {
//获取dom对象
var obj=document.getElementById("btn");
//使用dom对象的value属性获取值
alert("使用dom对象的属性=" + obj.value);
//把dom对象转为jQuery，使用jQuery库中的函数
var $jobj=$(obj);
//调用jQuery中的函数，获取value值
alert(jobj.val());
}
</script>
</head>
<body>
<input type="button" id="btn" value="===我是按钮===" onclick="btnClick()" />
</body>
</html>
4.2 jQuery对象转DOM对象
jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM 对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery对象转为dom</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
function btnClick() {
//使用jQuery语法获取页面中的dom对象
var obj=$("#txt")[0];//从数组中获取下标是0的dom对象
var num=obj.value;
obj.value=num*num;
alert("整数" + num + "的平方是" + obj.value);
}
</script>
</head>
<body>
<div>
<input type="button" value="计算平方" onclick="btnClick()" /><br />
<input type="text" id="txt" value="整数" />
</div>
</body>
</html>
5.jQuery选择器
选择器: 就是定位条件；通知 jquery 函数定位满足条件的 DOM 对象。
5.1 基本选择器
根据 ID，class 属性，标签类型名定位 HTML 元素，转为 jQuery 对象。
5.1.1 id选择器
语法：
$("#id")5.1.2 class选择器
语法：
$(".class名称")5.1.3 标签选择器
语法：
$("标签名")5.1.4 全部选择器
语法：
$("*")5.1.5 组合选择器
语法：
$("#id, .class, 标签名")5.1.6 小实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
background-color: gray;
width: 200px;
height: 100px;
}
</style>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
function fun1() {
//id选择器
var obj=$("#one");
//使用jQuery中改变样式的函数
obj.css("background","red");
}
function fun2() {
//class选择器
var obj=$(".two");
//使用jQuery中改变样式的函数
obj.css("background","blue");
}
function fun3() {
//标签选择器
var obj=$("div");//$("span")
//jQuery操作是操作数组中的全部成员
//这里会把所有div标签的背景颜色改为绿色
obj.css("background","green");
}
//全部选择器 $("*")
//组合选择器 $("#one,span")
</script>
</head>
<body>
<div id="one">我是one的div</div>
<br />
<div class="two">我是样式two的div</div>
<br />
<div>我是没有id、class的div</div>
<br />
<span>我是span标签</span><br />
<br />
<input type="button" value="获取id=one的dom对象" onclick="fun1()" />
<input type="button" value="获取class=two的dom对象" onclick="fun2()" />
<input type="button" value="获取标签为div的dom对象" onclick="fun3()" />
</body>
</html>
5.2 表单选择器
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。使用<input>标签的type属性值，定位dom对象的方式。
语法：
$(":type 属性值")
例如：
$(":text") 选取所有的单行文本框
$(":password") 选取所有的密码框
$(":radio") 选取所有的单选框
$(":checkbox") 选取所有的多选框5.2.1 小实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>表单选择器</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
function fun1() {
var $obj=$(":text");
alert($obj.val());
}
function fun2() {
var $obj=$(":radio");
for(var i=0;i<$obj.length;i++) {
var dom=$obj[i];
alert(dom.value);
}
}
function fun3() {
var $obj=$(":checkbox");
for(var i=0;i<$obj.length;i++) {
var dom=$obj[i];
alert(dom.value);
}
}
</script>
</head>
<body>
<input type="text" value="我的type=text" />
<br />
<input type="radio" value="man" /> 男 <br />
<input type="radio" value="woman" /> 女 <br />
<br />
<input type="checkbox" value="red" /> 红色 <br />
<input type="checkbox" value="green" /> 绿色 <br />
<input type="checkbox" value="blue" /> 蓝色 <br />
<br />
<input type="button" value="读取text值" onclick="fun1()" /><br /><br />
<input type="button" value="读取radio值" onclick="fun2()" /><br /><br />
<input type="button" value="读取checkbox值" onclick="fun3()" /><br /><br />
</body>
</html>
