什么是jQuery？
jQuery 是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化JavaScript 对 HTML DOM 操作。
官方地址：https://jquery.com/
官网首页 jQuery 介绍：
jQuery 是一个快速，小巧，功能丰富的 JavaScript 库。 它通过易于使用的 API 在量浏览器中运行，使得 HTML 文档遍历和操作，事件处理，动画和 Ajax 变得更加简单。 通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。
为什么要使用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 来调用命令了
例如：使用 JavaScript 定位 DOM 对象常用的三种方式：
（1）通过 ID 属性：document.getElementById()
（2）通过 class 属性：getElementsByClassName()
（3）通过标签名：document.getElementsByTagName()
上面代码可以看出 JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出
错。jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法。
如何获取jQuery？
官方下载地址：https://jquery.com/download/
对于每一个同一版本号的 jQuery，其库又分为两个。一个是未压缩版，可查看源码， 开发时使用；一个是压缩版，将注释、空格均做了删除，将变量字符数减少，产品上线时使用。
下面就进入jQuery的学习，先来看三个对象
Dom对象
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展 标志语言的标准编程接口。 通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节 点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。
DOM 对象是用 JavaScript 语法创建的对象，也看做是 js 对象。
JavaScript对象
用 JavaScript 语法创建的对象叫做 JavaScript 对象, JavaScript 对象只能调用 JavaScript 对象的 API。
jQuery对象
用 JQuery 语法创建的对象叫做 JQuery 对象, jQuery 对象只能调用 jQuery 对象的 API。jQuery 对象是一个数组。在数组中存放本次定位的 DOM 对象。
JQuery 对象与 JavaScript 对象是可以互相转化的，一般地，由于 Jquery 用起来更加方便，我们都是将 JavaScript 对象转化成 Jquery 对象
Dom转换为jQuery对象
使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为 jQuery 对象才可以使用 jQuery 中的提供的方法，操作 DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom对象转换为jQuery对象</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
var domBtn=document.getElementById("btn");
alert("1="+domBtn.value);
//对象转换
var $btn=$(domBtn);
alert("2="+$btn.val());
}
</script>
</head>
<body>
<input type="button" id="btn"; value="转换对象" onclick="btnClick()"/>
</body>
</html>
jQuery转换为Dom对象
jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery对象转换为dom对象</title>
</head>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
//从jQuery对象数组中获取dom对象
//var domObj=$("#txt").get(0);//从数组中获取下标是0的dom对象
var domObj=$("#txt")[0];
var num=domObj.value*domObj.value;
domObj.value=num;
}
</script>
<body>
<input type="text" id="txt" /><br/>
<input type="button" id="btn" value="计算平方" onclick="btnClick()" />
</body>
</html>
选择器
选择器: 就是定位条件；通知 jquery 函数定位满足条件的 DOM 对象
基本选择器
id选择器
语法：$(“#id”)
class（类）选择器
语法：$(“.class 名称”)
标签选择器
语法：$(“标签名”)
所有选择器
语法：$(“*”) 选取页面中所有 DOM 对象
组合选择器
$(“id,class,标签名”)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery对象转换为dom对象</title>
</head>
<style type="text/css">
div{
background:gray;
width:100px;
height: 50px;
}
span{
background:gray;
width:100px;
height: 50px;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function fun1(){
//id选择器
var oneDiv=$("#one");
//使用jQuery中改变样式的函数
oneDiv.css("background-color","red");
}
function fun2(){
//样式选择器/类选择器
$(".two").css("background","yellow");
}
function fun3(){
//标签选择器
$("div").css("background","blue");
}
function fun4(){
//所有选择器
$("*").css("background","darkcyan");
}
function fun5(){
//组合选择器
$("#one,span,.two").css("background","azure");
}
</script>
<body>
<div id="one" >oneDiv</div><br/>
<div class="two">twoDiv</div><br/>
<div>threeDiv</div><br/>
<span>span标签</span><br/>
<input type="button" value="获取id是one的dom对象" onclick="fun1()" /><br/>
<input type="button" value="获取class是two的dom对象" onclick="fun2()"/><br/>
<input type="button" value="获取没有id和class的dom对象" onclick="fun3()"/><br/>
<input type="button" value="获取所有的dom对象" onclick="fun4()" /><br/>
<input type="button" value="获取id和class的dom对象" onclick="fun5()" /><br/>
</body>
</html>表单选择器
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">
$(":tr"): 不能用，tr 不是 input 标签
语法： $(":type 属性值")
例如：
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery对象转换为dom对象</title>
</head>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function fun1(){
//表单选择器
alert($(":text").val());
}
function fun2(){
//表单选择器
var $obj=$(":radio");
for(var i=0;i<$obj.length;i++){
var obj=$obj[i];
alert(obj.value);
}
}
function fun3(){
//表单选择器
var $obj=$(":checkbox");
for(var i=0;i<$obj.length;i++){
var obj=$obj[i];
//alert(obj.value);
//使用jQuery的val函数,获取value值
var jObj=$(obj);
alert(jObj.val());
}
}
</script>
<body>
<input type="text" value="我是type=text" /><br/>
<input type="radio" value="man" />男<br/>
<input type="radio" value="woman" />女<br/>
<input type="checkbox" value="bike" />骑行<br/>
<input type="checkbox" value="football" />足球<br/>
<input type="checkbox" value="music" />音乐<br/>
<input type="button" value="读取text的值" onclick="fun1()" /><br/>
<input type="button" value="读取radio的值" onclick="fun2()" /><br/>
<input type="button" value="读取checkbox的值" onclick="fun3()" /><br/>
</body>
</html>
过滤器
jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系
<div>1</div> dom1
<div>2</div> dom2
<div>3</div> dom3
$("div") == [dom1,dom2,dom3]
过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，过滤条件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。
基本过滤器
1.选择第一个 first, 保留数组中第一个 DOM 对象
语法：$(“选择器:first”)
2.选择最后个 last, 保留数组中最后 DOM 对象
语法：$("选择器:last")
3.选择数组中指定对象
语法：$(“选择器:eq(数组索引)”)
4.选择数组中小于指定索引的所有 DOM 对象
语法：$(“选择器:lt(数组索引)”)
5.选择数组中大于指定索引的所有 DOM 对象
语法：$(“选择器:gt(数组索引)”)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery对象转换为dom对象</title>
<style type="text/css">
div{
background: gray;
}
</style>
</head>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//使用标签选择器
/* $(function(){
}) */
$(document).ready(function(){
$("#btn1").click(function(){
$("div:first").css("background","blue")
})
$("#btn2").click(function(){
$("div:last").css("background","deeppink");
})
$("#btn3").click(function(){
$("div:eq(3)").css("background","red");
})
$("#btn4").click(function(){
$("div:lt(3)").css("background","orangered");
})
$("#btn5").click(function(){
$("div:gt(3)").css("background","green");
})
})
</script>
<body>
<div id="zero">我是div-0</div>
<br/>
<div id="one">我是div-1</div>
<br/>
<div>
我是div-2
<br/>
<div class="son">我是div-3</div>
<div class="son">我是div-4</div>
</div>
<br/>
<div>我是div-5</div>
<br/>
<span>我是span</span>
<br/>
<p>
功能按钮
</p>
<input type="button" id="btn1" value="选择第一个div" /><br/>
<input type="button" id="btn2" value="选择最后一个div" /><br/>
<input type="button" id="btn3" value="选择索引等于3的div" /><br/>
<input type="button" id="btn4" value="选择索引小于3的div" /><br/>
<input type="button" id="btn5" value="选择索引大于3的div" /><br/>
</body>
</html>表单过滤器
1. 选择可用的文本框
$(“:text:enabled”)
2.选择不可用的文本框
$(“:text:disabled”)
3.复选框选中的元素
$(“:checkbox:checked”)
4.选择指定下拉列表的被选中元素
选择器>option:selected
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单过滤器</title>
<style type="text/css">
</style>
</head>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btnId1").click(function(){
var $textObj=$(":text:enabled");
$textObj.val("World");
var $textObj1=$(":text:disabled");
$textObj1.val("Hello");
})
$("#btnId2").click(function(){
var $checkboxObj=$(":checkbox:checked");
for(var i=0;i<$checkboxObj.length;i++){
alert($checkboxObj[i].value);
}
})
$("#btnId3").click(function(){
var $selectObj=$("select>option:selected");
/* for(var i=0;i<$selectObj.length;i++){
alert($selectObj[i].value);
} */
alert($selectObj.val());
})
})
</script>
<body>
<input type="text" /><br/>
<input type="text" value="disabled" disabled="disabled" /><br/>
<input type="text" /><br/>
<input type="checkbox" value="bike" />骑行<br/>
<input type="checkbox" value="football" checked />足球<br/>
<input type="checkbox" value="music" />音乐<br/>
<!--下拉框-->
<select>
<option value="java">java语言</option>
<option value="c++">c++语言</option>
<option value="go" selected="selected">go语言</option>
</select>
<br/>
<input type="button" id="btnId1" value="获取可用的文本框" /><br/>
<input type="button" id="btnId2" value="获取复选框选中的元素" /><br/>
<input type="button" id="btnId3" value="获取下拉框中选中" /><br/>
<button>哈哈</button>
</body>
</html>
函数
1. val
操作数组中 DOM 对象的 value 属性.
$(选择器).val() ：无参数调用形式， 读取数组中第一个 DOM 对象的 value 属性值
$(选择器).val(值)：有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值
2.text
操作数组中所有 DOM 对象的【文字显示内容属性】
$(选择器).text():无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回
$(选择器).text(值):有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值
3.attr
对 val, text 之外的其他属性操作
$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数1</title>
<style type="text/css">
div{
background: skyblue;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
var $textObj=$(":text:first");
//var $textObj1=$($textObj[0]);
alert($textObj.val());
})
$("#btn2").click(function(){
var $textObj=$(":text");
$textObj.val("吕布");
})
$("#btn3").click(function(){
var $divObj=$("div");
alert($divObj.text());
})
$("#btn4").click(function(){
var $divObj=$("div:first");
alert($divObj.text());
})
$("#btn5").click(function(){
var $divObj=$("div");
$divObj.text("div");
})
$("#btn6").click(function(){
var $imgObj=$("#img");
alert($imgObj.attr("src"));
$imgObj.attr("width","100px","height","100px");
})
})
</script>
</head>
<body>
<p>文本框</p>
<input type="text" value="刘备" /><br/>
<input type="text" value="关羽" /><br/>
<input type="text" value="张飞" /><br/>
<p>文本数据</p>
<div>第一个div</div>
<div>第二个div</div>
<div>第三个div</div>
<p>图片</p>
<img id="img" src="ex3.jpg" /><br/>
<p>功能按键</p>
<button id="btn1">获取第一个文本的值</button><br/>
<button id="btn2">设置所有文本框新值</button><br/>
<button id="btn3">获取div文本</button><br/>
<button id="btn4">获取第一个div文本</button><br/>
<button id="btn5">设置div新文本</button><br/>
<button id="btn6">设置图片img</button><br/>
</body>
</html>
4.hide
$(选择器).hide() :将数组中所有 DOM 对象隐藏起来
5.show
$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来
6.remove
$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
7.empty
$(选择器).empty()：将数组中所有 DOM 对象的子对象删除
8.append
为数组中所有 DOM 对象添加子对象
$(选择器).append("<div>我动态添加的 div</div>")
9.html
设置或返回被选元素的内容（innerHTML）。
$(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。
$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。
10.each
each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。
语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )
index: 数组的下标
element: 数组的对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数2</title>
<style type="text/css">
div{
background: skyblue;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("#one").hide();
$("#two").hide();
})
$("#btn2").click(function(){
$("#one").show();
$("#two").show();
})
$("#btn3").click(function(){
$("select").remove();
})
$("#btn4").click(function(){
$("select").empty();
})
$("#btn5").click(function(){
$("#father").append("<br/><button id='five'>废物</button>")
})
$("#btn6").click(function(){
alert($("span").html());
})
$("#btn7").click(function(){
$("span").html("<b>oracle</b>");
})
$("#btn8").click(function(){
//循环普通数组,非dom数组
var arr=[1,2,3];
$.each(arr,function(index,element){
alert("循环变量"+index+"====数组成员"+element);
});
})
$("#btn9").click(function(){
//循环json
var json={"name":"张三","age":"20"};
$.each(json,function(i,e){
alert("key="+i+" value="+e);
});
})
$("#btn10").click(function(){
//循环dom数组
var $textObj=$(":text");
/* $.each($textObj,function(i,e){
alert("key="+i+" value="+e.value);
}); */
$textObj.each(function(i,e){
alert("key="+i+" value="+e.value);
})
})
})
</script>
</head>
<body>
<input type="text" value="刘备" />
<input type="text" value="关羽" />
<input type="text" value="张飞" />
<p>show和hide函数</p>
<div id="one">第一个div</div>
<div id="two">第二个div</div>
<p>remove和empty函数</p>
<select>
<option>老虎</option>
<option>豹子</option>
<option>狮子</option>
</select>
<br/>
<select>
<option>美洲</option>
<option>亚洲</option>
<option>欧洲</option>
</select>
<p>append函数</p>
<div id="father" style="background: red;">父div</div>
<p>html函数</p>
<span>我是mysql<b>数据库</b></span><br/>
<span>我是jdbc</span>
<p>功能按键</p>
<button id="btn1">隐藏所有div</button><br/>
<button id="btn2">显示所以div</button><br/>
<button id="btn3">使用remove删除所有对象</button><br/>
<button id="btn4">使用empty删除字dom对象</button><br/>
<button id="btn5">增加一个子dom对象</button><br/>
<button id="btn6">获取文本带有的HTML标签内容</button><br/>
<button id="btn7">设置值</button><br/>
<button id="btn8">循环普通数组</button><br/>
<button id="btn9">循环json</button><br/>
<button id="btn10">循环dom对象</button><br/>
</body>
</html>
事件
为页面元素绑定事件，即对于指定页面元素，当某个事件发生后，执行指定动作
定义元素监听事件
语法：$(选择器).监听事件名称(处理函数);
说明：监听事件名称是 js 事件中去掉 on 后的内容， js 中的 onclick 的监听事件名称是 click
例如：
为页面中所有的 button 绑定 onclick,并关联处理函数 fun1
$("button").click(fun1)
为页面中所有的 tr 标签绑定 onmouseover，并关联处理函数 fun2
$("tr").mouseover(fun2)
on() 绑定事件
on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法
语法：$(选择器).on(event,,data,function)
event：事件一个或者多个，多个之间空格分开
data：可选。规定传递到函数的额外数据，json 格式
function: 可选。规定当事件发生时运行的函数。
<html>
<head>
<meta charset="utf-8">
<title>函数1</title>
<style type="text/css">
div{
background: skyblue;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").on("click",function(){
$("#myDiv").append("<br/><button class='btn'>按钮</button>");
/* $(".btn").on("click",function(){
alert("按钮被单击");
}) */
$(".btn").click(function(){
alert(111);
})
})
})
</script>
</head>
<body>
<div id="myDiv">
div
</div>
<br/>
<button id="btn1">创建dom对象，给dom 对象添加事件</button><br/>
</body>
</html>Ajax
jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新到 DOM 对象。
$.ajax()
$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。
语法：
$.ajax( { name:value, name:value, ... } )
说明：参数是 json 的数据，包含请求方式，数据，回调方法等
async ： 布尔值，表示请求是否异步处理。默认是 true
contentType ：发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
data：规定要发送到服务器的数据，可以是：string， 数组，多数是 json
dataType：期望从服务器响应的数据类型。jQuery 从 xml, json, text,, html 这些中测试最可能的类型
"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
"json" - 以 JSON 运行响应，并以对象返回
error(xhr,status,error)：如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名
success(result,status,xhr)：当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参名
type：规定请求的类型（GET 或 POST 等），默认是 GET， get，post 不用区分大小写
url：规定发送请求的 URL。
以上是常用的参数。 error() , success()中的 xhr 是 XMLHttpRequest 对象。
2.6.2 $.get()
$.get() 方法使用 HTTP GET 请求从服务器加载数据。
语法：$.get(url,data,function(data,status,xhr),dataType)
url 必需。规定您需要请求的 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)可选。当请求成功时运行的函数。data,status,xhr 是自定义形参名。
参数说明：
data - 包含来自请求的结果数据
status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的
类型：
"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
"json" - 以 JSON 运行响应，并以对象返回
2.6.3 $.post()
$.post() 方法使用 HTTP POST 请求从服务器加载数据。
语法：$.post(URL,data,function(data,status,xhr),dataType)
参数同$get()
4090
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
