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 对象。
语法： $("#id")
语法： $(".class名称")
语法： $("标签名")
语法： $("*")
语法： $("#id, .class, 标签名")
<!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>
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。使用<input>标签的type属性值，定位dom对象的方式。
语法： $(":type 属性值") 例如： $(":text") 选取所有的单行文本框 $(":password") 选取所有的密码框 $(":radio") 选取所有的单选框 $(":checkbox") 选取所有的多选框
<!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>
