零、复习昨日

JQuery功能: 文档操作,事件处理,动画设计,ajax交互
事件
jq中的事件 1）全部都是函数 2）事件名去掉on即可
dom操作
获得设置元素内容
html()
text()
val()
获得设置元素属性
attr(属性)
attr(属性,值)
attr({key:value,key:value,key:value})
removeAttr(属性)
获得设置元素样式
css(属性)
css(属性,值)
css({})
addCss()
removeClass(class)
toggleCss()

一、DOM

1.1 追加元素

内部追加,追加的元素变成子元素
append 追加,元素内部后面追加
prepend 追加,元素内部前面追加

外部追加,追加的元素变成了兄弟元素
after 追加,元素外部后面追加
before 追加,元素外部前面追加

  <body><div id="box" style="width: 500px; height: 300px; border: 2px red solid"><divid="box-1"style="width: 100px; height: 100px; background-color: green"></div></div><button id="btn-1">元素内部后面追加</button><button id="btn-2">元素内部前面追加</button><button id="btn-3">元素外部后面追加</button><button id="btn-4">元素外部前面追加</button><script src="./js/jquery-2.1.0.js"></script><script>$("#btn-1").click(() => {// 元素内部后面$("#box").append("<div style='width: 100px; height: 100px; background-color: yellow'></div>");});$("#btn-2").click(() => {// 元素内部,前面追加$("#box").prepend("<div style='width: 100px; height: 100px; background-color: blue'></div>");});$("#btn-3").click(() => {// 元素外部,后面追加$("#box").after("<div style='width: 100px; height: 100px; background-color: pink'></div>");});$("#btn-4").click(() => {// 元素外部,前面追加$("#box").before("<div style='width: 100px; height: 100px; background-color: purple'></div>");});</script></body>

1.2 删除元素

删除元素
empty() 删除子元素及内容,保留自己
remove() 删除全部元素,包括自己
remove(选择器) 删除指定选择器选到的元素

  <body><div id="box" style="width: 500px; height: 300px; border: 2px red solid"><divid="box-1"style="width: 100px; height: 100px; background-color: green"></div></div><button id="btn-1">元素内部后面追加</button><button id="btn-2">元素内部前面追加</button><button id="btn-3">元素外部后面追加</button><button id="btn-4">元素外部前面追加</button><button id="btn-5">empty删除元素,删除子元素</button><button id="btn-6">remove删除元素,删除所有元素</button><button id="btn-7">remove(选择器)删除元素,删除指定元素</button><script src="./js/jquery-2.1.0.js"></script><script>$("#btn-1").click(() => {// 元素内部后面$("#box").append("<div style='width: 100px; height: 100px; background-color: yellow'></div>");});$("#btn-2").click(() => {// 元素内部,前面追加$("#box").prepend("<div style='width: 100px; height: 100px; background-color: blue'></div>");});$("#btn-3").click(() => {// 元素外部,后面追加$("#box").after("<div style='width: 100px; height: 100px; background-color: pink'></div>");});$("#btn-4").click(() => {// 元素外部,前面追加$("#box").before("<div style='width: 100px; height: 100px; background-color: purple'></div>");});$("#btn-5").click(() => {// 删除子元素,保留自己$("#box").empty();});$("#btn-6").click(() => {// 删除所有元素,包括自己$("#box").remove();});$("#btn-7").click(() => {// 删除选中元素(选中元素必须是选择到多个)中再次选中的元素$("div").remove("#box-1");});</script></body>

二、效果

2.1 隐藏显示

show 无动画直接显示
show(speed,[callback]) 以指定速度完成显示,动作完成会触发回调函数
三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
hide 无动画直接隐藏
hide(speed,[callback]) 以指定速度完成隐藏,动作完成会触发回调函数
速度的写法
三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

 <body><divid="box-1"style="width: 200px; height: 200px; background-color: red"></div><button id="btn-1">无动画直接隐藏</button><button id="btn-2">有动画隐藏</button><button id="btn-3">无动画直接显示</button><button id="btn-4">有动画显示</button><script src="./js/jquery-2.1.0.js"></script><script>$("#btn-1").click(() => {$("#box-1").hide();});$("#btn-2").click(() => {// $("#box-1").hide(3000); // 毫秒值// $("#box-1").hide("fast");  // 固定速度单词$("#box-1").hide(3000, () => {alert("动作完成!");});});$("#btn-3").click(() => {$("#box-1").show();});$("#btn-4").click(() => {$("#box-1").show(3000);});</script></body>

2.2 淡入淡出

fadeIn(speed,[callback]) 淡入
fadeOut(speed,[callback]) 淡出
fadeTo(speed,opacity,[callback]) 淡入/淡出到指定透明度
opacity 不透明,参数是数字,值是0-1之间
0是完全透明 1是完全不透明
fadeToggle(speed,[callback]) 淡入/淡出效果切换

  <body><divid="box-1"style="width: 200px; height: 200px; background-color: red"></div><button id="btn-1">淡入-显示</button><button id="btn-2">淡出-隐藏</button><button id="btn-3">淡入/淡出到指定程度</button><button id="btn-4">淡入/淡出切换</button><script src="./js/jquery-2.1.0.js"></script><script>$("#btn-1").click(() => {$("#box-1").fadeIn(2000);});$("#btn-2").click(() => {$("#box-1").fadeOut(2000);});$("#btn-3").click(() => {// 参数2是透明度,0-1之间// 0完全透明 1完全不透明$("#box-1").fadeTo(2000, 0.33);});$("#btn-4").click(() => {$("#box-1").fadeToggle(2000);});</script></body>

2.3 滑入滑出

slideDown(speed, [callback]) 从上至下滑入
slideUp(speed, [callback]) 从下至上滑出
slideToggle(speed, [callback]) 切换

  <body><divid="box-1"style="width: 200px; height: 200px; background-color: red"></div><button id="btn-1">滑入-显示</button><button id="btn-2">滑出-隐藏</button><button id="btn-3">滑入/滑出切换</button><script src="./js/jquery-2.1.0.js"></script><script>$("#btn-1").click(() => {$("#box-1").slideDown(2000);});$("#btn-2").click(() => {$("#box-1").slideUp(2000);});$("#btn-3").click(() => {$("#box-1").slideToggle(2000);});</script></body>

2.4 动画

animate(参数1,参数2,参数3)
参数1 样式集合,用json形式写
参数2 速度,用速度单词,或者使用时间,毫秒
参数3 回调函数

  <body><button id="go">Run</button><div id="block">Hello!</div><hr /><button id="left">«</button> <button id="right">»</button><button id="change">变形</button><divclass="block"style="width: 100px; height: 100px; background-color: red"></div><script src="./js/jquery-2.1.0.js"></script><script src="./js/jquery.color.js"></script><script>$("#go").click(function () {$("#block").animate({width: "90%",height: "100%",fontSize: "10em",borderWidth: 10,},2000);});$("#right").click(function () {$(".block").animate({ marginLeft: "50px" }, "slow");});$("#left").click(function () {$(".block").animate({ marginLeft: "0px" }, "slow");});/*** JQuery动画里面默认不支持颜色设置* 需要外部设置一个颜色js,再引入*/$("#change").click(function () {$(".block").animate({backgroundColor: "green",borderRadius: "50px",marginLeft: "100px",},2000);});</script></body>

三、JQuery筛选查找

3.1 过滤

  <body><div><p>第一段</p><p>第二段</p><p class="p3">第三段</p><p>第四段</p></div><button id="btn-1">eq(1)</button><button id="btn-2">first</button><button id="btn-3">last</button><button id="btn-4">filter</button><button id="btn-5">not</button><script src="./js/jquery-2.1.0.js"></script><script>$("#btn-1").click(function () {// eq根据下标找到元素,下标从0开始console.log($("p").eq(1).text());});$("#btn-2").click(function () {// 返回第一个console.log($("p").first().text());});$("#btn-3").click(function () {console.log($("p").last().text());});$("#btn-4").click(function () {// filter是在前面选择器,再留下指定选择器的内容console.log($("p").filter(".p3").text());});$("#btn-5").click(function () {// not是在前面选择器,去掉指定选择器的内容console.log($("p").not(".p3").text());});</script></body>

3.2 查找

查找祖先
parent() 直接父级
parents() 查找所有祖先,包括到html根标签
parentsUntil(元素) 返回所有父级,直到指定元素停止

<!DOCTYPE html>
<html lang="en"><head><title>查找</title><style>div {border: 3px red solid;}</style></head><body><button id="btn-1">找直接祖先</button><button id="btn-2">找所有祖先</button><button id="btn-3">找所有祖先,直到body停</button><div id="box-1" style="width: 700px; height: 700px">box-1<div id="box-2" style="width: 400px; height: 400px">box-2<div id="box-3" style="width: 100px; height: 100px">box-3</div><div id="box-4" style="width: 100px; height: 100px">box-4</div><div id="box-5" style="width: 100px; height: 100px">box-5</div></div></div><script src="./js/jquery-2.1.0.js"></script><script>$("#btn-1").click(() => {// 找到box-3的直接祖先,让其边框变黄$("#box-3").parent().css("border-color", "yellow");});$("#btn-2").click(() => {// 找到box-3的所有祖先,直到html// $("#box-3").parents().css("border-color", "yellow");console.log($("#box-3").parents());});$("#btn-3").click(() => {// 找到box-3的所有祖先,直到直到的元素停止,不包含该元素// $("#box-3").parentsUntil("body").css("border-color", "yellow");console.log($("#box-3").parentsUntil("body"));});</script></body>
</html>

查找后代
children() 返回直接后代(子)
find(选择器) 返回所有后代,再跟进指定选择器过滤

<!DOCTYPE html>
<html lang="en"><head><title>查找</title><style>div {border: 3px red solid;}</style></head><body><button id="btn-4">找直接后代</button><button id="btn-5">找所有后代再过滤</button><div id="box-1" style="width: 700px; height: 700px">box-1<div id="box-2" style="width: 400px; height: 400px">box-2<div id="box-3" class="sunzi" style="width: 100px; height: 100px">box-3</div><div id="box-4" class="sunzi" style="width: 100px; height: 100px">box-4</div><div id="box-5" class="sunzi" style="width: 100px; height: 100px">box-5</div></div></div><script src="./js/jquery-2.1.0.js"></script><script>$("#btn-4").click(() => {// 找box-1的直接后代$("#box-1").children().css("border-color", "yellow");});$("#btn-5").click(() => {// 找box-1的所有后代,再根据find中的选择器再过滤// $("#box-1").find("*").css("border-color", "yellow");$("#box-1").find(".sunzi").css("border-color", "yellow");});</script></body>
</html>

查找兄弟
siblings() 所有兄弟
next() 下一个兄弟
prev() 上一个兄弟

<!DOCTYPE html>
<html lang="en"><head><title>查找</title><style>div {border: 3px red solid;}</style></head><body><button id="btn-1">找直接祖先</button><button id="btn-2">找所有祖先</button><button id="btn-3">找所有祖先,直到body停</button><hr /><button id="btn-4">找直接后代</button><button id="btn-5">找所有后代再过滤</button><hr /><button id="btn-6">找box-4所有兄弟</button><button id="btn-7">找box-4前一个兄弟</button><button id="btn-8">找box-4后一个兄弟</button><div id="box-1" style="width: 700px; height: 700px">box-1<div id="box-2" style="width: 400px; height: 400px">box-2<div id="box-3" class="sunzi" style="width: 100px; height: 100px">box-3</div><div id="box-4" class="sunzi" style="width: 100px; height: 100px">box-4</div><div id="box-5" class="sunzi" style="width: 100px; height: 100px">box-5</div></div></div><script src="./js/jquery-2.1.0.js"></script><script>$("#btn-6").click(() => {// 找box-4的所有兄弟$("#box-4").siblings().css("border-color", "green");// console.log($("#box-4").siblings());});$("#btn-7").click(() => {// 找box-4的前一个兄弟$("#box-4").prev().css("border-color", "green");});$("#btn-8").click(() => {// 找box-4的后一个兄弟$("#box-4").next().css("border-color", "#007acc");});</script></body>
</html>

四、Ajax

ajax 是异步JavaScript和XML(Asynchronous JavaScript and XML)
==异步==,页面中科院同时进行多个事情
经典案例: 注册框,输入完用户名直接提示"已注册"
这就是异步,也就是==局部刷新==

使用ajax与服务器进行异步交互,向服务器发送数据,接收服务器发来的数据
PS: 因为现在还没有学习服务器,所以今天的AJAX讲基础的使用,后续学完servlet服务器技术,再来使用ajax

4.1 FastMock网站

这个网站是用来模拟一个服务器地址,这个服务器可以提供一些数据,等会儿使用ajax请求这个服务器的数据

https://www.fastmock.site/mock/5c9f6e1ec0552bd6a3f2a62cb823edc0/qiushiju/users

4.2 $.get

get请求一般用来从服务器获得数据,一般就是用来查询数据

// $.get() 可以向服务器发送一个get请求
// $.get(url, [data], [callback], [type])
// url是服务器路径,必填
// data,是向服务器发送的数据,可选
// callback,请求完成后的回调函数,可选
// type,返回内容类型,可选

<!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><button id="btn">$.get --> go</button><table border="2" id="tb-users"><tr><td>编号</td><td>姓名</td><td>分数</td><td>班号</td><td>生日</td><td>组号</td></tr></table><script src="./js/jquery-2.1.0.js"></script><script>$("#btn").click(function () {// 发送ajax的get请求// 回调函数是,请求完成后执行的函数// 回调函数中,设置一个参数,参数就是服务器返回的数据$.get("https://www.fastmock.site/mock/5c9f6e1ec0552bd6a3f2a62cb823edc0/qiushiju/users",function (ret) {alert("发送请求成功!");console.log(ret);if (ret.status == 200) {var dataArr = ret.data;for (var i = 0; i < dataArr.length; i++) {var user = dataArr[i];$("#tb-users").append("<tr>"+"<td>"+user.sid+"</td>"+"<td>"+user.sname+"</td>"+"<td>"+user.score+"</td>"+"<td>"+user.cid+"</td>"+"<td>"+user.sbirthday+"</td>"+"<td>"+user.zid+"</td>"+"</tr>")}}});});</script></body>
</html>

4.3 $.post(暂时不讲)

post一般是向服务器发送数据的,一般是用来添加

4.4 $.ajax

$.ajax 向服务器发送请求,这种写法很灵活,可以设置请求中的任何参数

$.ajax({url:"",// 服务器路径type:"",// 请求是你的hi，默认是getdata:"",// 向服务器发送的数据success:function() {// 成功的回调函数，参数就是服务器发送的数据},error:function() {// 失败的回调函数，}
})

Java jQuery_2相关推荐

F5负载均衡技术的学习
概述负载均衡(Load Balance) 由于目前现有网络的各个核心部分随着业务量的提高,访问量和数据流量的快速增长,其处理能力和计算强度也相应地增大,使得单一的服务器设备根本无法承担.在此情况下, ...
springboot实现SSE服务端主动向客户端推送数据，java服务端向客户端推送数据，kotlin模拟客户端向服务端推送数据
SSE服务端推送服务器向浏览器推送信息,除了 WebSocket,还有一种方法:Server-Sent Events(以下简称 SSE).本文介绍它的用法. 在很多业务场景中,会涉及到服务端向客户端 ...
Java 获取当前时间之后的第一个周几，java获取当前日期的下一个周几
Java 获取当前时间之后的第一个周几,java获取当前日期的下一个周几 //获得入参的日期 Calendar cd = Calendar.getInstance(); cd.setTime(date ...
在k8s中使用gradle构建java web项目镜像Dockerfile
在k8s中使用gradle构建java web项目镜像Dockerfile FROM gradle:6-jdk8 AS build COPY --chown=gradle:gradle . /home ...
Java | kotlin 手动注入bean，解决lateinit property loginService has not been initialized异常
kotlin.UninitializedPropertyAccessException: lateinit property loginService has not been initialized ...
SpringBoot项目使用nacos，kotlin使用nacos，java项目使用nacos，gradle项目使用nacos，maven项目使用nacos
SpringBoot项目使用nacos kotlin demo见Gitte 一.引入依赖提示:这里推荐使用2.2.3版本,springboot与nacos的依赖需要版本相同,否则会报错. maven ...
OpenAPI使用（swagger3），Kotlin使用swagger3，Java使用swagger3，gradle、Maven使用swagger3
OpenAPI使用(swagger3) demo见Gitte 一.背景及名词解释 OpenAPI是规范的正式名称.规范的开发工作于2015年启动,当时SmartBear(负责Swagger工具开发的公 ...
Gradle错误提示:Java home supplied via ‘xxx.xxx.xxx‘ is invalid
Gradle错误提示:Java home supplied via 'org.gradle.java.home' is invalid 描述:在使用idea采用gradle进行依赖的管理功能,当想切换 ...
查看Hotspot源码，查看java各个版本源码的网站，如何查看jdk源码
java开发必知必会之看源码,而看源码的第一步则是找到源码

Java jQuery_2

零、复习昨日

一、DOM

1.1 追加元素

1.2 删除元素

二、效果

2.1 隐藏显示

2.2 淡入淡出

2.3 滑入滑出

2.4 动画

三、JQuery筛选查找

3.1 过滤

3.2 查找

四、Ajax

4.1 FastMock网站

4.2 $.get

4.3 $.post(暂时不讲)

4.4 $.ajax

Java jQuery_2相关推荐

最新文章

热门文章

Java jQuery_2

零、 复习昨日

一、DOM

1.1 追加元素

1.2 删除元素

二、效果

2.1 隐藏显示

2.2 淡入淡出

2.3 滑入滑出

2.4 动画

三、JQuery筛选查找

3.1 过滤

3.2 查找

四、Ajax

4.1 FastMock网站

4.2 $.get

4.3 $.post(暂时不讲)

4.4 $.ajax

Java jQuery_2相关推荐

最新文章

热门文章

零、复习昨日