jQuery的选择器、文本、属性、样式、尺寸、偏移量、事件绑定、事件解绑和触发、动画、Ajax请求
一、下载jQuery版本(3.4.1为例)
下载网址：
https://www.bootcdn.cn
二、jQuery选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li class="a">2</li>
<li>3</li>
<li class="b">4</li>
<li>5</li>
<li class="a">6</li>
<li>7</li>
<li id="box">8</li>
<li>9</li>
<li>10</li>
</ul>
<script src="./jquery/jquery.js"></script>
<script>
// 注意: 不管使用任何选择器, 获取到的元素都是一个元素集合
// id 选择器
console.log($('#box'))
// 类名选择器
console.log($('.a'))
// 标签名选择器
console.log($('li'))
// 结构选择器
console.log($('li:nth-child(odd)'))
console.log($('li:nth-child(even)'))
</script>
</body>
</html>
三、jQuery筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5
<i>子两级</i>
</li>
<i>子一级</i>
<span>我是 ul 内的一个 span 标签</span>
<li>6</li>
<li>7
<p>
<i>子三级</i>
</p>
</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script src="./jquery/jquery.js"></script>
<script>
/*
筛选器
*/
// 1. first()
// console.log($('li').first())
// 2. last()
// console.log($('li').last())
// 3. eq(索引)
// 注意: 索引从0 开始, 依次 +1
// console.log($('li').eq(3))
// 4. next()
// console.log($('span').next())
// 5. nextAll()
// console.log($('span').nextAll())
// 6. prev()
// console.log($('span').prev())
// 7. prevAll()
// console.log($('span').prevAll())
// 8. parent()
// console.log($('span').parent())
// 9. parents()
// 注意: 获取到的是该元素所有父级结构, 逐层获取, 直到 html 标签为止
// console.log($('span').parents())
// 10. siglings()
// 注意: 拿到该元素的所有兄弟元素
// console.log($('span').siblings())
// 11. find(选择器)
// 注意: 找到该元素的所有后代元素中, 满足选择器要求的元素
console.log($('ul').find('i'))
</script>
</body>
</html>
四、jQuery操作文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
hello
<p>你好 世界</p>
world
</div>
<input type="text" value="hello world">
<script src="./jquery/jquery.js"></script>
<script>
/*
操作文本内容
*/
// 1. html()
// 等价于我们原生 JS 中的 innerHTML
// 1-1. html() 获取
// console.log($('div').html())
// 1-2. html() 设置
// 语法: 元素集合.html(你要设置的内容)
// 注意: 可以识别并解析 html 结构字符串
// $('div').html('我是后来设置的内容
')
// 2. text()
// 等价于我们原生 JS 中的 innerText
// 2-1. text() 获取
// console.log($('div').text())
// 2-2. text() 设置
// 语法: 元素集合.text(你要设置的内容)
// 注意: 不可以识别并解析 html 结构字符串
// $('div').text('我是后来设置的内容
')
// 3. val()
// 等价于我们原生 JS 中 value
// 3-1. val() 获取
console.log($('input').val())
// 3-2. val() 设置
// 语法: 元素集合.val(你要设置的内容)
// 作用: 用来设置该表单元素的 value 值
$('input').val('我是后来设置的内容')
</script>
</body>
</html>
五、jQuery操作元素类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="a b c d"></div>
<button>切换</button>
<script src="./jquery/jquery.js"></script>
<script>
/*
操作元素类名
*/
// 1. addClass()
// 语法: 元素集合.addClass(需要添加的类名)
// $('div').addClass('e')
// 2. removeClass()
// 语法: 元素集合.removeClass(你要删除的类名)
// $('div').removeClass('b')
// 3. toggleClass()
// 语法: 元素集合.toggleClass(你要切换的类名)
// 切换: 如果本身有这个类名, 那么就是删除, 如果本身没有这个类名, 那么就是添加
var btn = document.querySelector('button')
btn.onclick = function () {
// 执行 jQuery 切换 div 类名的操作
$('div').toggleClass('box')
}
</script>
</body>
</html>
六、jQuery操作元素样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div style="width: 100px;"></div>
<script src="./jquery/jquery.js"></script>
<script>
/*
操作元素样式
+ css()
*/
// 1. css 获取样式
// 注意: 可以获取到元素的行内样式, 也可以获取到元素的非行内样式
// 语法: 元素集合.css(你要获取的样式名称)
// 返回值: 该样式的样式值
// console.log($('div').css('width'))
// console.log($('div').css('height'))
// console.log($('div').css('background-color'))
// 2. css 设置样式
// 语法: 元素集合.css(样式名, 样式值)
// 注意: 当你需要给一个元素设置样式值为 px 单位的时候, 可以省略单位不写
// $('div').css('width', '300px')
// $('div').css('height', 500)
// $('div').css('background-color', 'red')
// 3. css 批量设置样式
// 语法: 元素集合.css({ 你所有需要设置的样式 })
$('div').css({
width: 260,
height: 320,
opacity: 0.68,
'background-color': 'purple'
})
</script>
</body>
</html>
七、jQuery操作元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box" hello="world"> 我是一个 div 标签 </div>
<script src="./jquery/jquery.js"></script>
<script>
/*
操作元素属性
1. attr()
=> 可以进行设置和获取元素的属性
=> 注意: 一般用于操作元素的自定义属性
=> 注意: attr 操作的所有属性都会直接出现在元素的标签身上
=> 获取:
-> 语法: 元素.attr(你要获取的属性名)
-> 返回值: 该属性名对应的属性值
=> 设置:
-> 语法: 元素.attr(属性名, 属性值)
2. removeAttr()
=> 对元素的属性进行删除操作
=> 语法: 元素集合.removeAttr(你要删除的属性名)
*/
// 1-1. attr() 获取
// console.log($('div').attr('hello'))
// console.log($('div').attr('id'))
// 1-2. attr() 设置
// $('div').attr('a', 100)
// $('div').attr('id', 'container')
// 1-3. removeAttr()
// $('div').removeAttr('hello')
// $('div').removeAttr('id')
/*
1. prop()
+ 可以获取和设置元素的属性
+ 注意:
=> 当 prop 设置元素的原生属性, 会直接响应在元素标签身上
=> 当 prop 设置元素自定义属性, 不会直接响应在元素标签身上, 会响应在元素对象身上
+ 注意: prop 方法不能获取元素标签身上的自定义属性, 只能获取到 prop 方法自己设置的自定义属性
+ prop() 设置
=> 语法: 元素集合.prop(属性名, 属性值)
+ prop() 获取
=> 语法: 元素集合.prop(你要获取的属性名)
=> 返回值: 该属性对应的值
2. removeProp()
+ 用来删除元素属性的方法
+ 注意:
=> 不能删除原生属性
=> 只能删除由 prop 方法设置的自定义属性
+ 语法: 元素集合.removeProp(你要删除的属性名)
*/
// 1-1. prop() 设置
// $('div').prop('id', 'container')
// $('div').prop('a', 100)
// console.log($('div'))
// 1-2. prop() 获取
// console.log($('div').prop('id'))
// console.log($('div').prop('hello'))
// console.log($('div').prop('a'))
// 1-3. removeProp()
// $('div').removeProp('id')
// $('div').removeProp('a')
// console.log($('div'))
</script>
</body>
</html>
八、jQuery获取元素尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
padding: 20px;
border: 20px solid #333;
margin: 20px;
background-color: skyblue;
background-clip: content-box;
/* display: none; */
/* visibility: hidden; */
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
<script src="./jquery/jquery.js"></script>
<script>
/*
获取元素尺寸
+ 注意:
1. 不管该元素是否隐藏, 都能获取到该元素的值
2. 不管盒子模型是什么状态, 拿到的尺寸区域不变
*/
// 1. width() 和 height()
// 获取到的就是元素内容区域的尺寸
console.log($('div').width())
console.log($('div').height())
console.log('------------------')
// 2. innerWidth() 和 innerHeight()
console.log($('div').innerWidth())
console.log($('div').innerHeight())
console.log('------------------')
// 3. outerWidth() 和 outerHeight()
console.log($('div').outerWidth())
console.log($('div').outerHeight())
console.log('------------------')
// 4. outerWidth(true) 和 outerHeight(true)
// 拿到的包含你设置的 margin 尺寸值
console.log($('div').outerWidth(true))
console.log($('div').outerHeight(true))
</script>
</body>
</html>
九、jQuery获取元素偏移量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 500px;
margin: 30px;
background-color: skyblue;
overflow: hidden;
}
p {
width: 300px;
height: 300px;
margin: 30px;
background-color: orange;
overflow: hidden;
position: relative;
}
span {
display: block;
width: 100px;
height: 100px;
/* margin: 30px; */
background-color: pink;
position: absolute;
right: 30px;
bottom: 30px;
}
</style>
</head>
<body>
<div>
<p>
<span></span>
</p>
</div>
<script src="./jquery/jquery.js"></script>
<script>
/*
操作元素偏移量
*/
// 1. offset()
// 获取元素相对于页面左上角的坐标位置
// 注意: 返回值是一个对象数据类型, { top: yyy, left: xxx }
// console.log('div : ', $('div').offset())
// console.log('p : ', $('p').offset())
// console.log('span : ', $('span').offset())
// 2. position()
// 获取的就是元素的定位位置
// 注意: 如果你设置的是 right 和 bottom, 会自动帮你换算成 left 和 top 的值给到你
console.log($('span').position())
</script>
</body>
</html>
十、jQuery的绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 500px;
height: 500px;
background-color: skyblue;
}
p {
width: 300px;
height: 300px;
background-color: orange;
}
</style>
</head>
<body>
<div>我是 div 标签
<p>我是 div 内的 p 标签</p>
</div>
<script src="./jquery/jquery.js"></script>
<script>
/*
绑定事件
*/
// 1. on() 方法绑定事件
// 1-1. 基础绑定事件
// 语法: 元素集合.on('事件类型', 事件处理函数)
// $('div').on('click', function () { console.log('我是div 的点击事件') })
// 1-2. 事件委托绑定事件
// 语法: 元素集合.on('事件类型', 选择器, 事件处理函数)
// 把事件绑定给 div 元素, 当你在 div 内的 p 元素触发事件的时候, 执行事件处理函数
// 事件委托, 把 p 元素的事件委托给了 div 元素来绑定
// $('div').on('click', 'p', function () { console.log('我是事件委托形式的事件') })
// 1-3. 批量绑定事件
// 语法: 元素集合.on({ 事件类型1: 处理函数, 事件类型2: 处理函数 })
// 注意: 不能进行事件委托了
// $('div').on({
// click: function () { console.log('点击事件') },
// mouseover: function () { console.log('鼠标移入事件') },
// mouseout: function () { console.log('鼠标移出事件') }
// })
// 2. one()
// 用来绑定事件, 和 on 方法绑定事件的方式是一样的
// 区别: one 方法绑定的事件, 只能执行一次
// 2-1. 基础绑定事件
// $('div').one('click', function () { console.log('基础绑定事件') })
// 2-2. 事件委托
// $('div').one('click', 'p', function () { console.log('事件委托绑定事件') })
// 2-3. 批量绑定事件
// $('div').one({
// click: function () { console.log('点击事件') },
// mouseover: function () { console.log('鼠标移入事件') },
// mouseout: function () { console.log('鼠标移出事件') }
// })
// 3. hover()
// 注意: jQuery 里面一个特殊的事件
// 语法: 元素集合.hover(移入时触发的函数, 移出时触发的函数)
// 当你只传递一个函数的时候, 会在移入移出都触发
// $('div').hover(
// function () { console.log('函数1') },
// function () { console.log('函数2') }
// )
// 4. 常用事件函数
// jQuery 把我们最长用到的一些事件, 单独做成了事件函数
// 我们通过调用这些事件函数, 来达到绑定事件的效果
// click(), mouseover(), mouseout(), change(), ...
$('div').click(function () { console.log('点击事件') })
</script>
</body>
</html>
十一、jQuery事件的解绑和触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>我是 div 标签</div>
<script src="./jquery/jquery.js"></script>
<script>
/*
事件的解绑和触发
*/
// 准备事件处理函数
function handlerA() { console.log('我是 handlerA 事件处理函数') }
function handlerB() { console.log('我是 handlerB 事件处理函数') }
function handlerC() { console.log('我是 handlerC 事件处理函数') }
// 给 div 元素绑定事件
$('div')
.click(handlerA)
.click(handlerB)
.click(handlerC)
// 1. off() 事件解绑
// 1-1. 解绑全部事件处理函数
// 语法: 元素集合.off(事件类型)
// 会把 div 的 click 事件对应的所有事件处理函数全部移除
// $('div').off('click')
// 1-2. 解绑指定的事件处理函数
// 语法: 元素集合.off(事件类型, 要解绑的事件处理函数)
// 会把 div 的 click 事件对应的 handlerB 事件处理函数移除
// $('div').off('click', handlerB)
// 2. trigger() 事件触发
// 使用代码的方式, 来触发事件
// 语法: 元素集合.trigger(事件类型)
// 就会触发该元素的该事件
setInterval(function () {
// 表示每 1000ms 触发一次 div 的 click 事件
$('div').trigger('click')
}, 1000)
</script>
</body>
</html>
十二、jQuery的基本动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 500px;
background-color: skyblue;
}
</style>
</head>
<body>
<button>show</button>
<button>hide</button>
<button>toggle</button>
<div></div>
<script src="./jquery/jquery.js"></script>
<script>
/*
基本动画
1. show() 显示
2. hidt() 隐藏
3. toggle() 切换
=> 本身如果是显示的, 就隐藏
=> 本身如果是隐藏的, 就显示
+ 对于以上三个运动函数, 有共同的参数
=> 第一个表示运动时间
=> 第二个表示运动曲线
=> 第三个表示运动结束的回调函数
*/
$('button:nth-child(1)').click(function () {
// 执行 show 动画函数
$('div').show(1000, 'linear', function () { console.log('show 结束了') })
})
$('button:nth-child(2)').click(function () {
// 执行 hide 动画函数
$('div').hide(1000, 'linear', function () { console.log('hide 结束了') })
})
$('button:nth-child(3)').click(function () {
// 执行 toggle 动画函数
$('div').toggle(1000, 'linear', function () { console.log('toggle 结束了') })
})
</script>
</body>
</html>
十三、jQuery的折叠动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 500px;
background-color: skyblue;
}
</style>
</head>
<body>
<button>slideDown</button>
<button>slideUp</button>
<button>slideToggle</button>
<div></div>
<script src="./jquery/jquery.js"></script>
<script>
/*
基本动画
1. slideDown() 显示
2. slideUp() 隐藏
3. slideToggle() 切换
=> 本身如果是显示的, 就隐藏
=> 本身如果是隐藏的, 就显示
+ 对于以上三个运动函数, 有共同的参数
=> 第一个表示运动时间
=> 第二个表示运动曲线
=> 第三个表示运动结束的回调函数
*/
$('button:nth-child(1)').click(function () {
// 执行 show 动画函数
$('div').slideDown(1000, 'linear', function () { console.log('show 结束了') })
})
$('button:nth-child(2)').click(function () {
// 执行 hide 动画函数
$('div').slideUp(1000, 'linear', function () { console.log('hide 结束了') })
})
$('button:nth-child(3)').click(function () {
// 执行 toggle 动画函数
$('div').slideToggle(1000, 'linear', function () { console.log('toggle 结束了') })
})
</script>
</body>
</html>
十四、jQuery渐隐渐现动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 500px;
background-color: skyblue;
}
</style>
</head>
<body>
<button>fadeIn</button>
<button>fadeOut</button>
<button>fadeToggle</button>
<button>fadeTo</button>
<div></div>
<script src="./jquery/jquery.js"></script>
<script>
/*
基本动画
1. fadeIn() 显示
2. fadeOut() 隐藏
3. fadeToggle() 切换
=> 本身如果是显示的, 就隐藏
=> 本身如果是隐藏的, 就显示
+ 对于以上三个运动函数, 有共同的参数
=> 第一个表示运动时间
=> 第二个表示运动曲线
=> 第三个表示运动结束的回调函数
4. fadeTo(运动时间, 指定的透明度, 运动曲线, 运动结束的回调函数)
*/
$('button:nth-child(1)').click(function () {
// 执行 show 动画函数
$('div').fadeIn(1000, 'linear', function () { console.log('show 结束了') })
})
$('button:nth-child(2)').click(function () {
// 执行 hide 动画函数
$('div').fadeOut(1000, 'linear', function () { console.log('hide 结束了') })
})
$('button:nth-child(3)').click(function () {
// 执行 toggle 动画函数
$('div').fadeToggle(1000, 'linear', function () { console.log('toggle 结束了') })
})
$('button:nth-child(4)').click(function () {
// 执行 fadeTo 函数
$('div').fadeTo(1000, 0.68, 'linear', function () { console.log('运动到了指定的透明度') })
})
</script>
</body>
</html>
十五、jQuery综合动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background-color: skyblue;
position: absolute;
}
</style>
</head>
<body>
<button>开始 动画</button>
<div></div>
<script src="./jquery/jquery.js"></script>
<script>
/*
综合动画
+ animate()
=> 第一个参数: 要运动的样式, 以一个对象数据类型传递
=> 第二个参数: 运动时间
=> 第三个参数: 运动曲线
=> 第四个参数: 运动结束的回调函数
+ 注意:
=> 关于 颜色 相关的样式是不能运动的
=> 关于 transform 相关的样式是不能运动的
*/
$('button').click(function () {
// 利用 animate 函数来实现运动
$('div').animate({
width: 500,
height: 600,
// 'background-color': 'pink'
// transform: 'rotate(45deg)'
left: 300,
top: 200,
'border-radius': '50%'
}, 1000, 'linear', function () { console.log('运动结束了') })
})
</script>
</body>
</html>
十六、jQuery结束动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 500px;
background-color: skyblue;
}
</style>
</head>
<body>
<button>开始动画</button>
<button>stop()</button>
<button>finish()</button>
<div></div>
<script src="./jquery/jquery.js"></script>
<script>
/*
结束动画
+ 需要用到运动结束的函数
1. stop()
=> 当任何一个元素, 执行了 stop 方法以后
=> 会立即结束当前的所有运动, 目前运动到什么位置, 就停留在什么位置
=> 一般对于结束动画的时候, 都是在运动开始之前
2. finish()
=> 放 任何一个元素, 执行了 finish 方法以后
=> 会立即结束当前的所有运动, 直接去到动画的结束位置
*/
$("button:nth-child(1)").click(function () {
// 开始一个动画
// 使用一个简单的toggle动画
// $('div').toggle(2000)
// 利用结束动画书写动画函数
// 每一次触发的时候, 都会把之前的动画停止下来, 只执行本次最新的动画
// $('div').stop().toggle(2000)
// 利用完成动画书写的动画函数
// 每一次触发的时候, 都会把之前的动画瞬间完成, 只执行本次最新的动画
$('div').finish().toggle(2000)
})
$("button:nth-child(2)").click(function () {
// 停止动画
$('div').stop()
})
$("button:nth-child(3)").click(function () {
// 结束动画
$('div').finish()
})
</script>
</body>
</html>
十七、jQuery的Ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./jquery/jquery.js"></script>
<script>
/*
jQuery 的 ajax 请求
+ 注意:
=> 因为发送 ajax 请求, 不是操作 DOM
=> 不需要依赖选择器去获取到元素
=> 他的使用, 是直接依赖 jQuery 或者 $ 变量来使用
-> 语法: $.ajax({ 本次发送 ajax 的配置项 })
+ 配置项:
1. url: 必填, 表示请求地址
2. method: 选填, 默认是 GET, 表示请求方式
3. data: 选填, 默认是 '', 表示携带给后端的参数
4. async: 选填, 默认是 true, 表示是否异步
5. success: 选填, 表示请求成功的回调函数
6. error: 选填, 表示请求失败的回调函数
*/
// $.ajax({
// url: 'http://localhost:8888/test/first',
// success: function (res) {
// // res 接受的就是后端给回的响应结果
// console.log(res)
// }
// })
// $.ajax({
// url: 'http://localhost:8888/test/second',
// success: function (res) {
// // res 接受的就是后端给回的响应结果
// console.log(res)
// }
// })
// $.ajax({
// url: 'http://localhost:8888/test/third',
// data: { name: '前端小灰狼', age: 18 },
// success: function (res) {
// // res 接受的就是后端给回的响应结果
// console.log(res)
// }
// })
// $.ajax({
// url: 'http://localhost:8888/test/fourth',
// method: 'POST',
// data: { name: '前端小灰狼', age: 18 },
// success: function (res) {
// // res 接受的就是后端给回的响应结果
// console.log(res)
// }
// })
$.ajax({
url: 'http://localhost:8888/test/fourth',
method: 'POST',
async: false,
data: { name: '前端小灰狼', age: 18 },
success: function (res) {
// res 接受的就是后端给回的响应结果
console.log(res)
}
})
</script>
</body>
</html>