jQuery
jQuery内部封装了原生的js代码（还额外添加了很多的功能）能够让你书写更少的代码完成js操作，类似于python里面的模块 在前端不叫模块 叫类库
jQuery兼容多个浏览器 在使用jQuery的时候不需要考虑浏览器兼容的问题
JQuery的宗旨是 write less do more 让你用更少的代码完成更多的事情
导入模块需要消耗资源，jQuery在使用的时候也需要导入但是他的文件非常的小（几十KB）基本不影响网络的速度
需要从 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 这几个方面进行学习
jQuery文件的下载 一般采用压缩文件 容量更小 未压缩的也是可以使用的 但是企业一般采用压缩版
在使用jQuery之前 一定要保证已经导入了jQuery的文件
针对于导入问题一般采用两种方法
1.文件下载到本地 方便没有网络的时候使用 但是本地需要每一次使用都需要导入文件的路径反复抒写jQuery的路径 也可以使用pycharm 的自动初始化模板功能但是路径还是不能固定下载网址：jQuery中文使用文档 jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)
（1）pycharm 的模板功能怎么设置
设置 Editou ——》file and code ——》HTML File 里面设置模板将下面这段话写进模板
<script src="对应文件路径"><script>
2. 直接引入jQuery提供的CDN服务网址（基于网络直接请求加载）简单的说就是将你的网址写到模板中，使用这个情况的要求就是必须连接网络。
CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术，简答的说就是将文件存储到国内的各个角落的服务器上，当需要文件时进行请求，服务器会进行计算将离你最近的一个服务器进行收到请求给你发送数据，增加收发速度。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
jQuery的基本语法
jQuery(选择器).action() 等于 jQuery === $()
秉持着jQuery的宗旨简写为$
jQuery与js代码的对比感受jQuery的简洁高效
将p标签内部的文本颜色改为红色
// 原生js代码操作标签
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// jQuery操作标签
$('p').css('color','blue')
先学习如何查找标签
基本选择器
<body> <div id="d1">div <span>div>span</span> <p>div>p <span>div>p>span</span> </p> </div> <p class="c1">p</p> <span>span</span> </body>$(#id) //id选择器 返回的是jQuery的数组对象w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0)
组合选择器的div结构
<body> <span>span</span> <span>span</span> <div id="d1">div <span>div>span</span> <p id="d2">div>p <span>div>p>span</span> </p> <span>div>span</span> </div> <div class="c1"></div> <span>span</span> <span>span</span> </body>
$(".c1") //class选择器
w.fn.init [p.c1, prevObject: w.fn.init(1)]0: p.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
$("span") // 标签选择器
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
"""一定要区分开(重点)"""
//jQuery对象如何变成标签对象的
$("#d1")[0] ===document.getElementById("d1")
//标签对象转换成jQuery对象
$(document.getElementById("d1"))
//下面是组合选择器/分组与嵌套
$("div") //找到的是所有的div的jQuery的对象
w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)]
$("div.c1") //找到的是有c1 class类的div标签
w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
$("div#d1") //找到的是div下带有id=d1的标签
w.fn.init [div#d1, prevObject: w.fn.init(1)]
$("*")// 找到的所有
$("#d1,c1,p") // 表示并列关系 +混用
//w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]
$("div span") //表示找到div span 下所有的后代
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)
$("div>span") //表示 div span下的所有儿子 也就是下一代的所有标签
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$("div+span") // 表示找到所有紧挨在div后面的span
w.fn.init [span, prevObject: w.fn.init(1)]
$("div ~span") // 找到div后面的所有同级标签span
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
基本筛选器：针对已经选出来的结果进行二次筛选
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素,值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$("ul li") //找到ul下所有的li的标签对象
$("ul li:first") //拿到第一个li的标签对象
$("ul li:last") //拿到最后一个li的标签对象
$("ul li:eq(2)") //类似于拿索引的第二个标签 注意索引是从0开始的标签对象
$("ul li:even") // 只取索引下标为偶数的的索引标签对象
$("ul li:odd") // 只取索引下表为奇数的索引标签对象
$("ul li:gt(2)")// 取下标索引大于2的索引的标签对象
$("ul li:lt(2)") // 取下标索引小于2的索引标签对象
$("ul li:not("#d1")") 不要ul下li class的id为d1的标签对象
$("div:has("p")") //选取出包含一个或是多个标签在内的标签对象
自定义模态框jquery版本
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>自定义模态框</title> <style> .cover { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: darkgrey; z-index: 999; } .modal { width: 600px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -300px; margin-top: -200px; z-index: 1000; } .hide { display: none; } </style> </head> <body> <input type="button" value="弹" id="i0"> <div class="cover hide"></div> <div class="modal hide"> <label for="i1">姓名</label> <input id="i1" type="text"> <label for="i2">爱好</label> <input id="i2" type="text"> <input type="button" id="i3" value="关闭"> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> var tButton = $("#i0")[0]; tButton.onclick=function () { var coverEle = $(".cover")[0]; var modalEle = $(".modal")[0]; $(coverEle).removeClass("hide"); $(modalEle).removeClass("hide"); }; var cButton = $("#i3")[0]; cButton.onclick=function () { var coverEle = $(".cover")[0]; var modalEle = $(".modal")[0]; $(coverEle).addClass("hide"); $(modalEle).addClass("hide"); } </script> </body> </html>
属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
<body> <input type="text" username="jason"> <input type="text" username="egon"> <p username="egon"></p> </body>
$("[username]") // 找到带有属性为usernam的所有标签
w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]
$("[username='json']") //找到带有属性为username='json'的所有标签对象
w.fn.init [input, prevObject: w.fn.init(1)]
$("p[username='egon']") //找到p标签下带有username='egon'的标签对象
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
$("[type=text]") //找到属性为[type=text]的标签对象
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
表单选择器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表单选择器只适用于表单
$("input[type="text"]") 等价于 $(":text")
$('input[type="password"]') 等价于 $(':password')
表单对象属性
:enabled
:disabled
:checked
:selected
'''特殊情况 需要注意'''
$(':checked') # 它会将checked和selected两个属性都拿到
$(':selected') # 它不会 只拿selected
解决办法就是
$('input:checked') # 自己加一个限制条件
筛选器方法
下一个元素
$("#id").next() 拿到下一个同级别标签 拿到的是一个jQuery对象
$("#id").nextAll() 拿到下面所有对象
$("#id").nextUntil("#i2") 从#id开始直到#i2结束 不包括#i2元素标签
上一个元素
$("#id").prev() 拿到上一个
$("#id").prevAll() 拿到上面所有
$("#id").prevUntil("#i2") 从#id2开始查找到 #i2结束不包括#i2
父亲元素 可以连续向上找直到html
$("#id").parent() 查看自己的父元素
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子和兄弟元素 副标签
$("#id").children();// 儿子们 子元素
$("#id").siblings();// 兄弟们 同级别上下所有
查找 搜索与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p") 等价于 $("div p")
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
等价于 $("div.c1")
操作标签
样式类
js版的操作标签
classList.add() 添加指定的CSS类名。
classLise.remove() 移除指定的css类名
classList.contains() 判断指定的css类名
classList.toggle() 切换css类名 有则删除，没有则添加
jQuery版本操作标签
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
css操作
"""一行代码将第一个p标签变成红色第二个p标签变成绿色"""
$('p').first().css('color','red').next().css('color','green')
# jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
# jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法
类比pytho的链式操作
class MyClass(object):
def func1(self):
print('func1')
return self
def func2(self):
print('func2')
return self
obj = MyClass()
obj.func1().func2()
结果是 func1
func2
位置操作
offset() //相对于浏览器窗口的像素
position（） // 相对于父标签
scolltop() // x相对于浏览器顶部的像素点
$(window).scrollTop() 固定用法
随着页面的浏览 像素点也在不断地变动
$(window).scrollTop() # 括号内不加参数就是获取像素点
$(window).scrollTop(0) # 加了参数就是设置像素点
# 尺寸
$('p').height() # 文本
20
$('p').width()
1670
$('p').innerHeight() # 文本+padding
26
$('p').innerWidth()
1674
$('p').outerHeight() # 文本+padding+border
26
$('p').outerWidth()
1674
文本操作
js
innerText 参数为空就是获取 参数就是设置
innerHTML 获取标签加文本
$("div").html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
文本值：
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
值：
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
像文件这样的下载需要转换成js标签进行获取
$('#d2')[0].files[0] # 牢记两个对象之间的转换
属性操作
js中
setAttribute()
getAttribute()
removeAttribute()
jQuery中
attr(name,value) 设置属性的值
attr(name) 获取属性的值
removeAttr(name)移除属性的值
在用变量储存对象的时候 js中推荐使用 xxxEle 作为标签对象
jQuery中推荐使用 $xxxEle 作为jQuery对象
let $pEle = $('p') // 创建jquery对象
$pEle.attr('id') //获取id的属性值
$pEle.attr('class','c1') //添加个属性为class=c1
$pEle.attr('id','id666') //更改id的属性值
对于标签上有的能够看到的属性和自定义属性用attr
$('#d3').attr('checked','checked') # 无效
$('#d2').prop('checked')
true
$('#d3').prop('checked',true)
w.fn.init [input#d3]
$('#d3').prop('checked',false)
w.fn.init [input#d3]
对于返回布尔值比如checkbox radio option是否被选中用prop
文档的处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
js document.createElement("p") //创建标签 appendChild()//将标签插入到 jQuery let $pEle = $('<p>') // 创建标签 let $pEle = $('<p>') $pEle.text('你好啊 草莓要不要来几个?') $pEle.attr('id','d1') $('#d1').append($pEle) # 内部尾部追加 $pEle.appendTo($('#d1')) $('#d1').prepend($pEle) # 内部头部追加 w.fn.init [div#d1] $pEle.prependTo($('#d1')) w.fn.init [p#d1, prevObject: w.fn.init(1)] $('#d2').after($pEle) # 放在某个标签后面 w.fn.init [p#d2] $pEle.insertAfter($('#d1')) $('#d1').before($pEle) w.fn.init [div#d1] $pEle.insertBefore($('#d2')) $('#d1').remove() # 将标签从DOM树中删除 w.fn.init [div#d1] $('#d1').empty() # 清空标签内部所有的内容 w.fn.init [div#d1]
事件
// 第一种
$('#d1').click(function () {
alert('别说话 吻我')
});
// 第二种(功能更加强大 还支持事件委托)
$('#d2').on('click',function () {
alert('借我钱买草莓 后面还你')
})
移除事件
$(" ").off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
events： 事件
selector: 选择器（可选的）
function: 事件处理函数
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
表格中每一行的编辑和删除按钮都能触发相应的事件。
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})
克隆事件
<button id="d1">屠龙宝刀，点击就送</button> <script> $('#d1').on('click',function () { // console.log(this) // this指代是当前被操作的标签对象 // $(this).clone().insertAfter($('body')) // clone默认情况下只克隆html和css 不克隆事件 $(this).clone(true).insertAfter($('body')) // 括号内加true即可克隆事件 }) </script>
左侧菜单栏
<head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .left { float: left; background-color: darkgray; width: 20%; height: 100%; position: fixed; } .title { font-size: 36px; color: white; text-align: center; } .items { border: 1px solid black; } .hide { display: none; } </style> </head> <body> <div class="left"> <div class="menu"> <div class="title">菜单一 <div class="items">111</div> <div class="items">222</div> <div class="items">333</div> </div> <div class="title">菜单二 <div class="items">111</div> <div class="items">222</div> <div class="items">333</div> </div> <div class="title">菜单三 <div class="items">111</div> <div class="items">222</div> <div class="items">333</div> </div> </div> </div> <script> $('.title').click(function () { // 先给所有的items加hide $('.items').addClass('hide') // 然后将被点击标签内部的hide移除 $(this).children().removeClass('hide') }) </script> </body> </html>
返回顶部
<head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .hide { display: none; } #d1 { position: fixed; background-color: black; right: 20px; bottom: 20px; height: 50px; width: 50px; } </style> </head> <body> <a href="" id="d1"></a> <div style="height: 500px;background-color: red"></div> <div style="height: 500px;background-color: greenyellow"></div> <div style="height: 500px;background-color: blue"></div> <a href="#d1" class="hide">回到顶部</a> <script> $(window).scroll(function () { if($(window).scrollTop() > 300){ $('#d1').removeClass('hide') }else{ $('#d1').addClass('hide') } }) </script> </body>
自定义登录校验
<head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <p>username: <input type="text" id="username"> <span style="color: red"></span> </p> <p>password: <input type="text" id="password"> <span style="color: red"></span> </p> <button id="d1">提交</button> <script> let $userName = $('#username') let $passWord = $('#password') $('#d1').click(function () { // 获取用户输入的用户名和密码 做校验 let userName = $userName.val() let passWord = $passWord.val() if (!userName){ $userName.next().text("用户名不能为空") } if (!passWord){ $passWord.next().text('密码不能为空') } }) $('input').focus(function () { $(this).next().text('') }) </script> </body>
input实时监控
<head> <meta charset="UTF-8"> <title>k</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <input type="text" id="d1"> <script> $('#d1').on('input',function () { console.log(this.value) }) </script> </body>
hover事件
<body> <p id="d1">到家啊就是度假酒店</p> <script> // $("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开 // alert(123) // }) $('#d1').hover( function () { alert('我来了') // 悬浮 }, function () { alert('我溜了') // 移开 } ) </script> </body>
键盘按下事件
<body> <script> $(window).keydown(function (event) { console.log(event.keyCode) if (event.keyCode === 16){ //每一个按键都对应着一个数字 可以通过该数字判断进行相应的触发操作 alert('你按了shift键') } }) </script> </body>
常用事件
click(function(){...}) 单击事件 hover(function(){...}) 悬浮时间 支持两个函数 悬浮+离开 blur(function(){...}) 失去焦点事件 focus(function(){...}) 聚焦事件 change(function(){...})当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
scroll(function(){...}) 检测滚动条的滚动距离
keyup(function(){...}) 按键事件
阻止后续事件的执行 ：当点击一下的时候会显示一下字，想要长期显示就要阻止后续事件的执行
<script> $('#d2').click(function (e) { $('#d1').text('宝贝 你能看到我吗?') // 阻止标签后续事件的执行 方式1 // return false // 阻止标签后续事件的执行 方式2 // e.preventDefault() }) </script>
阻止事件冒泡：当每个标签都绑定了一个事件后，执行最里面的标签时，外层标签也会自动执行。
<script> $('#d1').click(function () { alert('div') }) $('#d2').click(function () { alert('p') }) $('#d3').click(function (e) { alert('span') // 阻止事件冒泡的方式1 // return false // 阻止事件冒泡的方式2 // e.stopPropagation() }) </script>
事件的委托 ：当动态创建一个标签时，绑定事件是没有办法控制动态创建的对象的，要使用事件委托方式。
<button>是兄弟，就来砍我!!!</button> <script> // 给页面上所有的button标签绑定点击事件 // $('button').click(function () { // 无法影响到动态创建的标签 // alert(123) // }) // 事件委托 $('body').on('click','button',function () { alert(123) // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的 }) </script>
页面加载(了解)
# 等待页面加载完毕再执行代码
window.onload = function(){
// js代码
}
"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
// js代码
})
# 第二种
$(function(){
// js代码
})
# 第三种
"""直接写在body内部最下方"""
动画效果(了解)
$('#d1').hide(5000) //5秒后消失
w.fn.init [div#d1]
$('#d1').show(5000) //5秒后展示
w.fn.init [div#d1]
$('#d1').slideUp(5000) // 5秒后向上卷
w.fn.init [div#d1]
$('#d1').slideDown(5000) //5秒后向下卷 类似于卷轴效果
w.fn.init [div#d1]
$('#d1').fadeOut(5000) //5秒后渐变效果 渐变没
w.fn.init [div#d1]
$('#d1').fadeIn(5000) // 5秒后渐变出来
w.fn.init [div#d1]
$('#d1').fadeTo(5000,0.4)
w.fn.init [div#d1
补充 each()方法：有了each之后 就无需自己写for循环了 用它更加的方便
data()方法：能够让标签帮我们存储数据 并且用户肉眼看不见，隐藏多余的标签
# each() # 第一种方式 $('div') w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)] $('div').each(function(index){console.log(index)}) VM181:1 0 VM181:1 1 VM181:1 2 VM181:1 3 VM181:1 4 VM181:1 5 VM181:1 6 VM181:1 7 VM181:1 8 VM181:1 9 $('div').each(function(index,obj){console.log(index,obj)}) VM243:1 0 <div>1</div> VM243:1 1 <div>2</div> VM243:1 2 <div>3</div> VM243:1 3 <div>4</div> VM243:1 4 <div>5</div> VM243:1 5 <div>6</div> VM243:1 6 <div>7</div> VM243:1 7 <div>8</div> VM243:1 8 <div>9</div> VM243:1 9 <div>10</div> # 第二种方式 $.each([111,222,333],function(index,obj){console.log(index,obj)}) VM484:1 0 111 VM484:1 1 222 VM484:1 2 333 (3) [111, 222, 333] """ 有了each之后 就无需自己写for循环了 用它更加的方便 """ # data() """ 能够让标签帮我们存储数据 并且用户肉眼看不见 """ $('div').data('info','回来吧，我原谅你了!') w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)] $('div').first().data('info') "回来吧，我原谅你了!" $('div').last().data('info') "回来吧，我原谅你了!" $('div').first().data('xxx') undefined $('div').first().removeData('info') w.fn.init [div#d1, prevObject: w.fn.init(10)] $('div').first().data('info') undefined $('div').last().data('info') "回来吧，我原谅你了!"
jQuery 与ajax的应用案例
<body> 城市:<input type="text" name='city'> <button>提交</button> <div id='box'></div> <script> // http://wthrcdn.etouch.cn/weather_mini $(function(){ $("button").on('click',function(){ var cityname = $('[name=city]').val() console.log(cityname) // 使用ajax 向远程获取数据 $.ajax({ type:"get", // 发送的类型:get , post. url:'http://wthrcdn.etouch.cn/weather_mini', // 请求的地址 data: {city:cityname}, // 携带的参数 dataType:"json", // 返回的数据类型 async: true, // true 异步 false 同步 beforeSend:function(){ // 在发送数据之前,做什么事情 console.log('在发送数据之前,做什么事情'); }, success:function(msg){ // 成功返回数据时,进行的逻辑 console.log(msg) $('#box').html("<span style='color:lawngreen'>成功了</span>") }, error:function(msg){ // 失败时,进行的逻辑 console.log(msg) $('#box').html("<span style='color:lawngreen'>失败了</span>") }, complete:function(msg){ // 所有数据无论成功与否,最后走的函数 console.log(msg) console.log('所有数据无论成功与否,最后走的函数') } }) }) }) </script> </body>
ps: 想要成为一个厉害的人，必须要眼里有高山，胸中有丘壑。
