前言
1. jQuery入门例子
2. DOM对象和jQuery对象
- 2.1 dom对象转jQuery对象
- 2.2 jQuery对象转dom对象
3. 选择器
- 3.1 基本选择器
- 3.2 全部选择器
- 3.3 组合选择器
- 3.4 表单选择器
4. 过滤器
- 4.1 基本过滤器
- 4.2 表单属性过滤器
5. 函数
- 5.1 val、text以及attr
- 5.2 remove、empty、append、html以及each
6. on() 绑定事件
7. 结合ajax

前言

关于这篇博客学习的笔记主要是通过该视频进行学习
jQuery入门到精通全套完整版(jQuery2020最新版本)Web前端jQuery初学者零基础学习必备

所涉及的javascript前言知识可看我之前的文章JavaScript从入门到精通（全）
所涉及ajax知识可看我之前的文章Ajax从入门到精通（全）
jQuery的库文件下载资源jQuery库文件.rar

调试网页出现以下情况可看这类文章，如果没有可忽略
idea:出现Copy authorization url to clipboard解决方法

jQuery 是一款跨主流浏览器的 JavaScript 库
封装了 JavaScript 相关方法调用
简化JavaScript 对 HTML DOM 操作
相当于java的工具类，库是存放东西的， jQuery是存放js代码的地方，放的用js代码写的function
优点：写得少，做的多。能够兼容主流浏览器，能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX功能。不用再在 html 里面通过

使用 JavaScript 定位 DOM 对象常用的三种方式：

（1）通过 ID 属性：document.getElementById()
（2）通过 class 属性：getElementsByClassName()
（3）通过标签名：document.getElementsByTagName()

完整代码如图所示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">//单击按钮获取 文本框的 value值function fun1(){var obj = document.getElementById("txt1");alert(obj.value);}function fun2(){var obj = document.getElementById("txt2");alert(obj.value);}</script></head><body><input type="text" id="txt1" value="我是txt1" /> <br/><input type="text" id="txt2" value="我是txt2" /> <br/><input type="button" value="单击按钮 1 " onclick="fun1()" /> <br/><input type="button" value="单击按钮 2 " onclick="fun2()" /></body>
</html>

上面代码可以看出 JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出错。

可以编写一个函数使其不会那么冗长，而且jQuery可以使用$符号当成函数名

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">//自定义方法, 获取js中的dom对象 , $ 是一个函数的名称function $( domId){var obj = document.getElementById(domId);return obj}//单击按钮获取 文本框的 value值function fun1(){// 通过js中的 id 获取dom对象//var obj = document.getElementById("txt1");var obj = $("txt1");alert(obj.value);}function fun2(){// 通过js中的 id 获取dom对象//var obj = document.getElementById("txt2");var obj =$("txt2");alert(obj.value);}</script></head><body><input type="text" id="txt1" value="我是txt1" /> <br/><input type="text" id="txt2" value="我是txt2" /> <br/><input type="button" value="单击按钮 1 " onclick="fun1()" /> <br/><input type="button" value="单击按钮 2 " onclick="fun2()" /></body>
</html>

用 JavaScript 语法创建的对象叫做 JavaScript 对象, JavaScript 对象只能调用 JavaScript 对象的 API
用 JQuery 语法创建的对象叫做 JQuery 对象, jQuery 对象只能调用 jQuery 对象的 API。jQuery 对象是一个数组。在数组中存放本次定位的 DOM 对象。
JQuery 对象与 JavaScript 对象是可以互相转化的，一般地，由于 Jquery 用起来更加方便，我们都是将 JavaScript 对象转化成 Jquery 对象

1. jQuery入门例子

用jQuery的库文件进行指引，别人写好的js文件

<!-- 指定jquery的库文件位置， 使用相对路径，当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>

具体函数名这样定义（标准定义）
jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法。

<script type="text/javascript">$(document).ready(function(){//自定义的功能代码alert("Hello jQuery")
})</script>

具体函数功能：

$(document) , $是jQuery中的函数名称， document是函数的参数
作用是 document对象变成 jQuery函数库可以使用的对象。
ready：是jQuery中的函数，是准备的意思，当页面的dom对象加载成功后会执行ready函数的内容。 ready 相当于js中的onLoad事件
function()自定义的表示onLoad后要执行的功能。

还可以通过一个简写方式的写法

$( function(){//代码内容alert("Hello JQuery 快捷方式")}
)

2. DOM对象和jQuery对象

获取了jquery的对象后
对象内部是数组，数组成员都是dom对象

DOM 对象是用 JavaScript 创建的对象，也看做是 js 对象
比如var obj = document.getElementById("txt1");该obj是dom对象也是js对象
jQuery对象表示的对象都是数组
是一个数组var obj =$("#text1");，现在数组就一个值

以上两类数组是可以相互转换的

dom对象转换为对象：$(dom对象)
jQuery转换为dom对象：从数组中获得第一个对象，第一个对象就是dom对象，使用[0]或者get(0).

两者的互相转换是可以相互使用对象的方法

2.1 dom对象转jQuery对象

只要将dom对象放入$括号内即可转换
相互使用其对象的方法

通过点击按钮框显示其文本内容的内容值
在dom对象中的属性是value而在jQuery对象中的方法为val
一个是属性，一个是方法，注意区分
完整代码演示

<!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(){//获取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>

2.2 jQuery对象转dom对象

通过点击按钮获取文本框的信息
具体转换通过$(id选择器)
再通过下标值可以用get()或者是[]

完整代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">function btnClick(){//使用jquery的语法,获取页面中的dom对象//var obj = $("#txt")[0]; // 从数组中获取下标是0的dom对象var obj = $("#txt").get(0);//从数组中获取下标是0的dom对象//alert( obj.value)var num  = obj.value;obj.value = num * num;}</script></head><body><div><input type="button" value="计算平方" onclick="btnClick()" /><br/><input type="text" id="txt" value="整数" /></div></body>
</html>

3. 选择器

选择器：定位dom的对象，通过jquery定位dom对象也就是一个字符串

3.1 基本选择器

具体选择器可以分为以下几种

id选择器
通过$(" dom对象的id值 ")，id在当前页面是唯一值
class 选择器
通过$(“.class 名称”)，class表示css中的样式
标签选择器
通过$(“标签名”)定位dom对象

jquery的操作是操作数组中的全部成员
先讲解几种常见的jquery函数

改变其样式代码 .css("background","颜色");
补充以下css的样式还可以通过自定义名字不要忘记

.two{background: gold;font-size: 20pt;
}

完整代码显示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">div{background: gray;width: 200px;height: 100px;}</style><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">function fun1(){//id选择器var obj = $("#one");//使用jquery中改变样式的函数obj.css("background","red");}function fun2(){//使用样式选择器var obj = $(".two");obj.css("background","yellow");}function fun3(){//标签选择器var obj = $("div"); //数组有3个对象//jquery的操作都是操作数组中的全部成员.//所以是给所有的div都设置的背景色obj.css("background","blue");}</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/><input type="button" value="获取id是one的dom对象" onclick="fun1()" /><br/><input type="button" value="使用class样式获取dom对象" onclick="fun2()" /><br/><input type="button" value="使用标签选择器" onclick="fun3()" /> </body>
</html>

3.2 全部选择器

通过$("*")将网页中的标签都统一变化

function fun4(){var obj = $("*");obj.css("background","green");
}<input type="button" value="所有选择器" onclick="fun4()"/>

3.3 组合选择器

通过$(“id,class,标签名”)将多个被选对象间使用逗号分隔后形成的选择器，可以组合 id，class，标签名等

function fun5(){var obj = $("#one,span");obj.css("background","red");
}<input type="button" value="组合选择器" onclick="fun5()"/>

3.4 表单选择器

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。
无论是否存在表单<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">

具体用法比如

$(":text") 选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮

细节
细节
细节

数组只有一个值，可以通过obj.val()、obj[0].value、obj.get(0).value三种方式获取
数组有2个值以上的时候，需要通过遍历的方式输出，数组内部是dom对象，通过obj[i].value、$(dom.value).val两种方式获取

完整代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css"></style><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">function fun1(){//使用表单选择器 $(":type的值")var obj = $(":text");//获取value属性的值 val()是jquery中的函数, 读取value属性值alert( obj.val());}function fun2() {//定位radiovar obj = $(":radio");//数组,目前是两个对象 man ,woman//循环数组,数组中的成员是 dom对象,可以dom的属性或者函数for(var i=0;i<obj.length;i++){//从数组值获取成员,使用下标的方式var  dom = obj[i];//使用dom对象的属性,获取value值alert(dom.value)}}function fun3(){//定位checkboxvar obj = $(":checkbox"); //数组,有三个对象for(var i=0;i<obj.length;i++){var dom = obj[i];//alert(dom.value);//使用jqueyr的val函数, 获取value的值//1. 需要jquery对象var jObj = $(dom); // jObj 是jquery对象//2. 调用jquery函数alert("jquery的函数调用=" + jObj.val());}}</script></head><body><input type="text" value="我是type=text" /><br/><br/><input type="radio" value="man" /> 男 <br/><input type="radio" value="woman" /> 女 <br/><br/><input type="checkbox" value="bike" /> 骑行 <br/><input type="checkbox" value="football" /> 足球 <br/><input type="checkbox" value="music" /> 音乐 <br/><br/><input type="button" value="读取text的值" onclick="fun1()"/><br/><input type="button" value="读取radio的值" onclick="fun2()"/><br/><input type="button" value="读取checkbox的值" onclick="fun3()"/></body>
</html>

4. 过滤器

过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，过滤条件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方

jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系
与页面声明的位置是有关系的

<div>1</div> dom1
<div>2</div> dom2
<div>3</div> dom3
$("div") == [dom1,dom2,dom3]

在讲解以下知识的时候
先回顾之前的知识点

$(document).ready( 函数 ):页面中的dom对象加载成功后,会执行ready()，相当于js中的onload
由于js中的绑定事件机制不够灵活，在jquery中增加一种绑定事件$("#btn1").click(function(){})。具体绑定事件是怎样的，可看文中后面有详细介绍

4.1 基本过滤器

定位dom对象后，根据一些基本条件筛选dom对象，过滤器是一个字符串，用来筛选dom对象，不能单独使用，必须和选择器一起使用

选择第一个 first, 保留数组中第一个 DOM 对象
$(“选择器:first”)
选择最后个 last, 保留数组中最后 DOM 对象
$("选择器:last")
选择数组中指定对象
$(“选择器:lt(数组索引)”)
选择数组中小于指定索引的所有 DOM 对象
$(“选择器:lt(数组索引)”)
选择数组中大于指定索引的所有 DOM 对象
$(“选择器:gt(数组索引)”)

完整代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">div{background: gray;}</style><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">// $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(), // 相当于是onLoad().$(function() {//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.$("#btn1").click(function(){//过滤器var obj = $("div:first");obj.css("background","red");}) //绑定事件$("#btn2").click(function(){var obj = $("div:last");obj.css("background","green");})//绑定btn3的事件$("#btn3").click(function(){var obj = $("div:eq(3)");obj.css("background","blue");})$("#btn4").click(function(){var obj = $("div:lt(3)");obj.css("background","orange");})$("#btn5").click(function(){var obj = $("div:gt(3)");obj.css("background","yellow");})$("#txt").keydown(function(){alert("keydown")})})</script></head><body><input type="text" id="txt" /><div id="one">我是div-0</div><div id="two">我是div-1</div><div>我是div-2<div>我是div-3</div><div>我是div-4</div></div><div>我是div-5</div><br /><span>我是span</span><br/><input type="button" value="获取第一个div" id="btn1"/><br/><input type="button" value="获取最后一个div" id="btn2"/><br/><input type="button" value="获取下标等于3的div" id="btn3"/><br/><input type="button" value="获取下标小于3的div" id="btn4"/><br/><input type="button" value="获取下标大于3的div" id="btn5"/></body>
</html>

4.2 表单属性过滤器

根据表单中的dom对象状态情况，定位dom对象

选择可用的文本框$(“:text:enabled”)
选择不可用的文本框$(“:text:disabled”)
复选框选中的元素$(“:checkbox:checked”)
选择指定下拉列表的被选中元素选择器>option:selected

启用状态enabled
不可用状态disabled
选择状态checked，例如radio、checkbox个人感受：- 所谓可用与不可用的意思是，在网页中能不能编辑点入的意思
- 通过表单选择器后面加一些限定条件
- 下拉选项框的`选择器>option:selected`。选择器可以用该id值

完整代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">div{background: gray;}</style><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">// $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(), // 相当于是onLoad().$(function() {//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.$("#btn1").click(function(){//获取所有可以使用的textvar obj  = $(":text:enabled");//设置 jquery数组值所有dom对象的value值obj.val("hello");}) $("#btn2").click(function(){//获取选中的checkboxvar obj  = $(":checkbox:checked");for(var i=0;i<obj.length;i++){//alert( obj[i].value);alert(    $(obj[i]).val()  ) }})$("#btn3").click(function(){//获取select选中的值//var obj= $("select>option:selected");var obj = $("#yuyan>option:selected");alert(obj.val());})})</script></head><body><input type="text"  id="txt1" value="text1" /><br/><input type="text"  id="txt2" value="text2" disabled="true"/><br/><input type="text"  id="txt3" value="text3" /><br/><input type="text"  id="txt4" value="text4" disabled/><br/><br/><input type="checkbox" value="游泳" />游泳 <br/><input type="checkbox" value="健身" checked />健身 <br/><input type="checkbox" value="电子游戏" checked />电子游戏 <br/><br/><select id="yuyan"><option value="java">java语言</option><option value="go" selected>go语言</option><option value="python">python语言</option></select><br/><input type="button" value="设置可以的text的value是hello" id="btn1"/><br/><button id="btn2">显示选中的复选框的值</button><br/><button id="btn3">显示选中下拉列表框的值</button></body>
</html>

5. 函数

5.1 val、text以及attr

val：操作数组中 DOM 对象的 value 属性

$(选择器).val() ：无参数调用形式，读取数组中第一个 DOM 对象的 value 属性值
$(选择器).val(值)：有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值

text：操作数组中所有 DOM 对象的【文字显示内容属性】

$(选择器).text()：无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回
$(选择器).text(值):有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值

attr：对 val, text 之外的其他属性操作

$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值

注意val()与text()的区别
一个是调用第一个值，一个是调用全部值

完整代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">div{background: yellow;}</style><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">//在dom对象创建好后,绑定事件$(function(){$("#btn1").click(function(){//val() 获取dom数组中第一个对象的value属性值var text = $(":text").val();alert(text)})$("#btn2").click(function(){//设置所有的text的value为新值$(":text").val("三国演义");})$("#btn3").click(function(){//获取div ,text()无参数,获取dom对象的文本值,连接成一个字符串alert($("div").text());})$("#btn4").click(function(){//设置div的文本值$("div").text("新的div文本内容");})$("#btn5").click(function(){//读取指定属性的值alert($("img").attr("src"));})$("#btn6").click(function(){//设置指定属性的,指定值$("img").attr("src","img/ex2.jpg");//val(), text();})})</script></head><body><input type="text" value="刘备" /><br/><input type="text" value="关羽" /><br/><input type="text" value="张飞" /><br/><br/><div>1.我第一个div</div><div>2.我第二个div</div><div>3.我第三个div</div><br/><img src="img/ex1.jpg" id="image1" /><br/><input type="button" value="获取第一文本框的值" id="btn1"/><br/><br/><input type="button" value="设置所有文本框的value值" id="btn2"/><br/><br/><input type="button" value="获取所有div的文本值" id="btn3"/><br/><br/><input type="button" value="设置div的文本值" id="btn4"/><br/><br/><input type="button" value="读取src属性的值" id="btn5"/><br/><br/><input type="button" value="设置指定的属性值" id="btn6"/></body>
</html>

5.2 remove、empty、append、html以及each

$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
$(选择器).empty()：将数组中所有 DOM 对象的子对象删除
$(选择器).append("<div>我动态添加的 div</div>")为数组中所有 DOM 对象添加子对象
设置或返回被选元素的内容（innerHTML）
$(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容
$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容
each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数
语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )
index与element都是自定义的参数，不过功能都是下标，元素

补充另外两个命令：
$(选择器).hide() :将数组中所有 DOM 对象隐藏起来
$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来

通俗白话解释
如果使用remove则删除父与子的dom对象，比如下拉候选框中框与选项都删除，如果使用empty，则删除子的dom对象，删除的是选项option对象

区分两个命令

alert($("span").text()); // 我是mysql数据库
alert( $("span").html() ); //我是mysql <b>数据库</b>

区分代码中数组的定义

js代码定义var arr = [ 11, 12, 13];
json代码定义var json={"name":"张三","age":20};
dom代码定义var domArray = $(":text");//dom数组

each中对dom数组的使用有两种方式
each这个方法相当于静态方法
通过类名.静态方法调用

var domArray = $(":text");//dom数组$.each( domArray, function(i,n){
// n 是数组中的dom对象
alert("i="+i+"  , n="+n.value);
})//或者是
//循环jquery对象, jquery对象就是dom数组
$(":text").each(function(i,n){
alert("i="+i+"，n="+ n.value);
})

完整代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">div{background: yellow;}</style><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">//在dom对象创建好后,绑定事件$(function(){$("#btn1").click(function(){//使用remove:删除父和子所有的dom对象$("select").remove();})$("#btn2").click(function(){//使用empty 删除子dom对象$("select").empty();})$("#btn3").click(function(){//使用append,增加dom对象//$("#fatcher").append("<input type='button' value='我是增加的按钮' />")//增加一个table$("#fatcher").append("<table border=1><tr><td>第一列</td><td>第二列</td></tr></table>");})$("#btn4").click(function(){//使用html()函数,获取数组中第一个dom对象的文本值(innerHTML)//alert($("span").text()); // 我是mysql数据库alert( $("span").html() ); //我是mysql <b>数据库</b>})$("#btn5").click(function(){//使用 html(有参数):设置dom对象的文本值$("span").html("我是新的<b>数据</b>");})$("#btn6").click(function(){//循环普通数组,非dom数组var  arr = [ 11, 12, 13];$.each(arr, function(i,n){alert("循环变量："+i + "=====数组成员:"+ n);})})$("#btn7").click(function(){//循环jsonvar json={"name":"张三","age":20};//var  obj = eval("{'name':'张三','age':20}");$.each(json,function(i,n){alert("i是key="+i+",n是值="+n);})})$("#btn8").click(function(){//循环dom数组var domArray = $(":text");//dom数组$.each( domArray, function(i,n){// n 是数组中的dom对象alert("i="+i+"  , n="+n.value);})})$("#btn9").click(function(){//循环jquery对象, jquery对象就是dom数组$(":text").each(function(i,n){alert("i="+i+"，n="+ n.value);})})})</script></head><body><input type="text" value="刘备" /><input type="text" value="关羽" /><input type="text" value="张飞" /><br/><select><option value="老虎">老虎</option><option value="狮子">狮子</option><option value="豹子">豹子</option></select><br/><br/><select><option value="亚洲">亚洲</option><option value="欧洲">欧洲</option><option value="美洲">美洲</option></select><br/><br/><div id="fatcher">我是第一个div</div><br/<br/><span>我是mysql <b>数据库</b></span><br/><span>我是jdbc</span><br/><br/><input type="button" value="使用remove删除父和子对象" id="btn1"/><br/><br/><input type="button" value="使用empty删子对象" id="btn2"/><br/><br/><input type="button" value="使用append,增加dom对象" id="btn3"/><br/><br/><input type="button" value="获取第一个dom的文本值" id="btn4"/><br/><br/><input type="button" value="设置span的所以dom的文本值" id="btn5"/><br/><br/><input type="button" value="循环普通数组" id="btn6"/><br/><br/><input type="button" value="循环json" id="btn7"/><br/><br/><input type="button" value="循环dom数组" id="btn8"/><br/><br/><input type="button" value="循环jquery对象" id="btn9"/></body>
</html>

6. on() 绑定事件

为页面元素绑定事件，即对于指定页面元素，当某个事件发生后，执行指定动作

监听事件名称是 js 事件中去掉 on 后的内容， js 中的 onclick 的监听事件名称是 click，具体定义是$(选择器).监听事件名称(处理函数);
$(选择器).on(event,,data,function)

这个on函数相当于onclick功能
比如以下是相同的

$("#btn1").click(function(){})
//
等同于
$("#btn1").on("click",function(){})

完整代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">div{background: yellow;}</style><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">//在dom对象创建好后,绑定事件$(function(){$("#btn1").click(function(){//使用append增加dom对象$("#mydiv").append("<input id='newBtn' type='button' value='我是新加入的按钮'/>");//使用on给按钮绑定事件$("#newBtn").on("click",function(){alert("新建的按钮被单击了");})})})</script></head><body><div id="mydiv">我是一个div ，需要增加一个button</div><input type="button" value="创建一个button,绑定一个click" id="btn1"/><br/></body>
</html>

7. 结合ajax

使用jquery的函数，实现ajax请求的处理

没有jquery之前，使用XMLHttpRequest做ajax ，有4个步骤。 jquery简化了ajax请求的处理

使用三个函数可以实现ajax请求的处理：

1） $.ajax() : jquery中实现ajax的核心函数。
2） $.post() : 使用post方式做ajax请求。
3） $.get() : 使用get方式发送ajax请求。

==$.post()和$.get() 他们在内部都是调用的 $.ajax() ==

$.ajax({async:true ,
ontentType:"application/json" ,
data: {name:"lisi",age:20 },
dataType:"json",
error:function(){请求出现错误时，执行的函数},
success:function( data ) {// data 就是responseText, 是jquery处理后的数据},
url:"bmiAjax",
type:"get"}                                                                            )

json结构的参数说明：

1)async:是一个boolean类型的值，默认是true ，表示异步请求的。可以不写async这个配置项
xmlHttp.open(get,url,true),第三个参数一样的意思。
2)contentType: 一个字符串，表示从浏览器发送服务器的参数的类型。可以不写。
例如你想表示请求的参数是json格式的，可以写application/json
3)data: 可以是字符串，数组，json，表示请求的参数和参数值。常用的是json格式的数据
4)dataType: 表示期望从服务器端返回的数据格式，可选的有： xml ， html ，text ，json
当我们使用$.ajax()发送请求时，会把dataType的值发送给服务器，那我们的servlet能够
读取到dataType的值，就知道你的浏览器需要的是 json或者xml的数据，那么服务器就可以
返回你需要的数据格式。
5)error: 一个function ，表示当请求发生错误时，执行的函数。
error:function() { 发生错误时执行 }
6)sucess:一个function , 请求成功了，从服务器端返回了数据，会执行success指定函数
之前使用XMLHttpRequest对象， 当readyState==4 && status==200的时候。
7)url:请求的地址
8)type:请求方式，get或者post，不用区分大小写。默认是get方式。

回顾上一节的知识点，如果单纯使用ajax而不用jquery
具体链接可看我上一节的链接
Ajax从入门到精通（全）

用到了上一节所需要的知识点
将此部分修改即可

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>使用json格式的数据</title><script type="text/javascript">function  doSearch() {//1.创建异步对象var xmlHttp = new XMLHttpRequest();//2.绑定事件xmlHttp.onreadystatechange = function() {if( xmlHttp.readyState == 4 && xmlHttp.status == 200){var data = xmlHttp.responseText;//eval是执行括号中的代码， 把json字符串转为json对象var jsonobj = eval("(" + data + ")");//更新dom对象callback(jsonobj);}}//3.初始异步对象的请求参数var proid = document.getElementById("proid").value;// true :异步处理请求。 使用异步对象发起请求后，不用等待数据处理完毕，就可以执行其它的操作。// false:同步，异步对象必须处理完成请求，从服务器端获取数据后，才能执行send之后的代码。 任意时刻只能执行一个异步请求。xmlHttp.open("get","queryjson?proid="+proid,false);//4.发送请求xmlHttp.send();//也可以创建其它的 XMLHttpRequest， 发送其它的请求处理。alert("====在send之后的代码====")}//定义函数，处理服务器端返回的数据function callback(json){document.getElementById("proname").value = json.name;document.getElementById("projiancheng").value=json.jiancheng;document.getElementById("proshenghui").value= json.shenghui;}</script>
</head>
<body><p>ajax请求使用json格式的数据</p><table><tr><td>省份编号：</td><td><input type="text" id="proid"><input type="button" value="搜索" onclick="doSearch()"></td></tr><tr><td>省份名称：</td><td><input type="text" id="proname"></td></tr><tr><td>省份简称：</td><td><input type="text" id="projiancheng"></td></tr><tr><td>省会名称：</td><td><input type="text" id="proshenghui"></td></tr></table>
</body>
</html>

修改为：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>使用json格式的数据</title><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">$(function(){$("#btn").click(function () {//获取dom的value值var proid = $("#proid").val();//发起ajax请求$.ajax({url:"queryjson",data:{"proid":proid},dataType:"json",success:function (resp) {//resp是json对象//alert(resp.name + " === "+resp.jiancheng)$("#proname").val(resp.name);$("#projiancheng").val(resp.jiancheng);$("#proshenghui").val(resp.shenghui);}})});})</script>
</head>
<body><p>ajax请求使用json格式的数据</p><table><tr><td>省份编号：</td><td><input type="text" id="proid"><input type="button" value="搜索" id="btn"></td></tr><tr><td>省份名称：</td><td><input type="text" id="proname"></td></tr><tr><td>省份简称：</td><td><input type="text" id="projiancheng"></td></tr><tr><td>省会名称：</td><td><input type="text" id="proshenghui"></td></tr></table>
</body>
</html>

补充其他的函数

$.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 运行响应，并以对象返回

$.post()

方法使用 HTTP POST 请求从服务器加载数据。
语法：$.post(URL,data,function(data,status,xhr),dataType),参数同$get()

级联查询（由于后面使用的注解比较多，此部分返回过来补充，知识有些用不上了，就没有继续听讲）

点击按钮的时候获取数据库的数据，通过下拉框中显示

实体类：

public class City {private Integer id;private String name;private Integer provinceId;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Integer getProvinceId() {return provinceId;}public void setProvinceId(Integer provinceId) {this.provinceId = provinceId;}@Overridepublic String toString() {return "City{" +"id=" + id +", name='" + name + '\'' +", provinceId=" + provinceId +'}';}
}

public class Province {private Integer id;private String name;private String jiancheng;private String shenghui;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getJiancheng() {return jiancheng;}public void setJiancheng(String jiancheng) {this.jiancheng = jiancheng;}public String getShenghui() {return shenghui;}public void setShenghui(String shenghui) {this.shenghui = shenghui;}@Overridepublic String toString() {return "Province{" +"id=" + id +", name='" + name + '\'' +", jiancheng='" + jiancheng + '\'' +", shenghui='" + shenghui + '\'' +'}';}
}

配合数据库的查询类：

public class QueryDao {private Connection conn;private PreparedStatement pst;private ResultSet rs;private String sql;private String url="jdbc:mysql://localhost:3306/springdb";private String username="root";private String password="123456";//查询所有的省份信息public List<Province> queryProvinceList(){List<Province> provinces  = new ArrayList<>();try{Province p = null;Class.forName("com.mysql.jdbc.Driver");conn = DriverManager.getConnection(url,username,password);sql="select id,name,jiancheng,shenghui from province order by id";pst = conn.prepareStatement(sql);rs = pst.executeQuery();while(rs.next()){p  = new Province();p.setId( rs.getInt("id"));p.setName( rs.getString("name"));p.setJiancheng( rs.getString("jiancheng"));p.setShenghui( rs.getString("shenghui"));provinces.add(p);}}catch(Exception e){e.printStackTrace();}finally{try{if( rs != null){rs.close();}if( pst != null){pst.close();}if( conn != null){conn.close();}}catch (Exception ex){ex.printStackTrace();}}return provinces;}//查询一个省份下面的所有城市public List<City> queryCityList(Integer provinceId){List<City> cities  = new ArrayList<>();try{City city = null;Class.forName("com.mysql.jdbc.Driver");conn = DriverManager.getConnection(url,username,password);sql="select  id, name from city where provinceid = ? ";pst = conn.prepareStatement(sql);//设置省份的参数值pst.setInt(1, provinceId);rs = pst.executeQuery();while(rs.next()){city = new City();city.setId( rs.getInt("id"));city.setName( rs.getString("name"));cities.add(city);}}catch(Exception e){e.printStackTrace();}finally{try{if( rs != null){rs.close();}if( pst != null){pst.close();}if( conn != null){conn.close();}}catch (Exception ex){ex.printStackTrace();}}return cities;}
}

jQuery从入门到精通（全）相关推荐

JQuery从入门到精通(全一章)
活动地址:CSDN21天学习挑战赛文章目录学习目录 1.jQuery介绍官网地址:(https://www.bootcdn.cn/jquery/) 2.JQuery对象基本使用方法 3.Java ...
视频教程-Ajax+jquery从入门到精通2017视频教程-JavaScript
Ajax+jquery从入门到精通2017视频教程 19年软件开发经验,设计开发40多个大型软件,10年从事高等教育,主要为java系列课程,带你轻松进入java生涯. 赖国荣 ¥39.00 立即订阅 ...
Ajax+jquery从入门到精通2017视频教程-赖国荣-专题视频课程
Ajax+jquery从入门到精通2017视频教程-3583人已学习课程介绍 ajax技术是从事WEB开发的课程,本课程是在js及jsp课程的基础上的提高课,从ajax初级开始讲解, ...
原型设计大师：Axure RP网站与APP设计从入门到精通(全彩) 中文pdf扫描版
原型设计大师:Axure RP网站与APP设计从入门到精通内容丰富且实用,由浅入深地传授了Axure 原型设计工具在网站和APP设计中的应用与技巧,并在文中贯穿了众多精彩实战案例.书中完整展现了多个鲜 ...
Arduino从入门到精通全课时教程分享
Arduino从入门到精通全课时教程分享欢迎使用Arduino全套教程下载课程详细图片链接:https://pan.baidu.com/s/1a2xMyWa6n5de1WlRulSmYQ 提取码 ...
python从入门到精通清华_java从入门到精通(第5版)+python从入门到精通+c语言从入门到精通全3册清华大学出版社...
<JAVA从入门到精通(第5版)> <Java从入门到精通(第5版)>从初学者角度出发,通过通俗易懂的语言.丰富多彩的实例,详细介绍了使用Java语言进行程序开发需要掌握的知识 ...
xxljob从入门到精通-全网段最全解说
XXL-JOB特性一览基本概念 xxljob解决的是以下几个痛点: 1) 跑批处理监控无法可视化,当前跑批的状态是:成功?失败?挂起?进度?为什么失败/原因? 2)批处理任务不可重用,特别是无法对批 ...
云之梦php免费教学视频下载_2017年8月云知梦php入门到精通全栈开发全套教程+laravel商城...
php全栈工程师云知梦 2017.7月底更新截止. 全套教程一共172集,每天两小时深入讲解,注意只是讲,课下自己要练习,总和86天课程,直到完全掌握php后端开发从基础变量函数.mysql.缓存 ...
Jquery从入门到精通：二、选择器 2、选择器（1）CSS选择器
1.准备知识:CSS选择器:(参考文档:CSS2.0帮助文档) 代码: <body> <div> <p id="p1">足不出户订窗帘:< ...

jQuery从入门到精通（全）

目录

前言

1. jQuery入门例子

2. DOM对象和jQuery对象

2.1 dom对象转jQuery对象

2.2 jQuery对象转dom对象

3. 选择器

3.1 基本选择器

3.2 全部选择器

3.3 组合选择器

3.4 表单选择器

4. 过滤器

4.1 基本过滤器

4.2 表单属性过滤器

5. 函数

5.1 val、text以及attr

5.2 remove、empty、append、html以及each

6. on() 绑定事件

7. 结合ajax

jQuery从入门到精通（全）相关推荐

最新文章

热门文章