Day050--jQuery表单事件 轮播图 插件库 ajax
表单控件的事件
change()表单元素发生改变时触发事件
select()文本元素发生改变时触发事件
submit()表单元素发生改变时触发事件
.focus() 获取焦点
.blur() 释放焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text">
<input type="text">
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function () {
//如果有回调函数参数,表示输入框获取焦点的额时候会触发
//如果没有回调函数,当调用focus() 立马会获取焦点
// $('input[type=text]')[0].focus()
$('input[type=text]').focus(function () {
console.log(111);
}); //3秒后释放焦点
var timer = setTimeout(function () {
$('input[type=text]').blur();
clearTimeout(timer);
},3000); })
</script> </body>
</html>
jQuery事件, 焦点的获取与释放
合成事件 .hover(fn1,fn2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="libs/jquery-3.3.1.js"></script>
<script>
$(function () {
$('.box').hover(function () {
$(this).css('backgroundColor','green')
}, function () {
$(this).css('backgroundColor', 'red')
})
})
</script> </body>
</html>
表单事件
change(), select()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
男<input type="radio" checked name="gender" value="1">
女<input type="radio" name="gender" value="0"> <select name="" id="">
<option value="a">alex</option>
<option value="b">wusir</option>
<option value="c">xiaomage</option>
</select> <input type="text" id="text">
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function () {
$('input[type=radio]').change(function (e) {
console.log('被选中了');
console.log(e.target);
console.log($(this).val());
}); $('select').change(function (e) {
console.log('选中了',$(this).find('option:selected').text());
console.log($(e.target).find('option:selected').val());
console.log(e.target); }); // 只有在选中输入框中文字的时候才能触发事件
$('#text').select(function (e) {
console.log('被选中了');
console.log(e.target);
}); })
</script> </body>
</html>
事件代理
应用条件
- 给多个元素添加相同的事件
- 给未来的元素添加事件
应用原理
通过冒泡事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text">
<button id="append">追加</button>
<div class="box">
<ul>
<li>alex</li>
<li id="box">wusir</li>
</ul>
</div> <script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function () {
$('ul li').click(function () {
alert($(this).text());
}); //事件委托,用on(事件,子元素选择器,fn)
$('.box').on('click','li',function () {
console.log($(this));
}); //未来追加的元素 是没有事件 我们通过事件委托 当你出现点击页面中的DOM没有任何反应
//1.DOM是否undefined 2.考虑事件代理
$('#append').click(function () {
var val = $('input[type=text]').val();
$('ul').append(`<li>${val}</li>`);
}) })
</script>
</body>
</html>
未来追加的元素时没有事件的,需要使用事件代理
选项卡--小米轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;}
ul,ol{ list-style: none;}
.wrapper{
width: 1226px;
height: 460px;
margin: 100px auto;
/*overflow: hidden;*/
position: relative;
}
.wrapper ul{
width: 100%;
height: 460px;
overflow: hidden; }
.wrapper ul li{
float: left;
width: 100%;
/*height: 240px;*/
}
ol{
position: absolute;
right: 0;
bottom: 10px;
width: 290px;
}
ol li{
float: left;
width: 20px;
height: 20px;
margin: 0 5px;
text-align: center;
border-radius: 50%;
cursor: pointer;
background-color: #abc;
}
ol li.current{
background-color: pink;
}
img{
width: 1226px;
}
</style>
<script src="libs/jquery-3.3.1.js"></script>
<script>
$(function () {
// 根据ol下li的索引号，匹配ul下相对应li的索引号
$('.wrapper ol li').mouseenter(function () {
$(this).addClass('current').siblings('li').removeClass('current');
$('.wrapper ul li').eq($(this).index()).stop().fadeIn(100).siblings('li').stop().fadeOut(300);
})
})
</script>
</head>
<body>
<div class="wrapper">
<ul>
<li><img src="data:images/1.jpg" alt=""></li>
<li><img src="data:images/2.jpg" alt=""></li>
<li><img src="data:images/3.jpg" alt=""></li>
<li><img src="data:images/4.jpg" alt=""></li>
<li><img src="data:images/5.jpg" alt=""></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol> </div>
</body>
</html>
ajax技术(XHR === XMLHTTPRequest)
参考:https://www.cnblogs.com/majj/p/9134922.html
作用 :与后端交互,局部作用域刷新页面.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul> </ul> <script src="libs/jquery-3.3.1.js"></script>
<script>
//天气图片地址,数字是json文件中的cond_code
// https://cdn.heweather.com/cond_icon/104.png
$(function () {
function getWeather() {
clearInterval(timer); $.ajax({
url:'https://free-api.heweather.com/s6/weather/now?location=beijing&key=84d13f49fcc1474aba06d11c28e36a74',
type:'get',
success:function (data) {
console.log(data);
var code = data.HeWeather6[0].now.cond_code; $('ul').html(`<img><img src="https://cdn.heweather.com/cond_icon/${code}.png"></li>`)
},
error:function (err) {
console.log(err);
}
})
} getWeather(); var timer = setInterval(function () {
getWeather();
},5000); }) </script> </body>
</html>
{
"HeWeather6":[
{
"basic":{
"cid":"CN101010100",
"location":"北京",
"parent_city":"北京",
"admin_area":"北京",
"cnty":"中国",
"lat":"39.90498734",
"lon":"116.4052887",
"tz":"+8.00"
},
"update":{
"loc":"2018-11-15 18:45",
"utc":"2018-11-15 10:45"
},
"status":"ok",
"now":{
"cloud":"",
"cond_code":"",
"cond_txt":"阴",
"fl":"",
"hum":"",
"pcpn":"0.0",
"pres":"",
"tmp":"",
"vis":"",
"wind_deg":"",
"wind_dir":"北风",
"wind_sc":"",
"wind_spd":""
}
}
]
}
weather.json
Day050--jQuery表单事件 轮播图 插件库 ajax的更多相关文章
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- jquery, js轮播图插件Swiper3
轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...
- 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）
SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...
- 第124天：移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- 原生JavaScript（js）手把手教你写轮播图插件（banner）
---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- Vue轮播图插件---Vue-Awesome-Swiper
轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...
- vue轮播图插件之vue-awesome-swiper
移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesome-swip ...
随机推荐
- 微信公众号签名错误 invalid signature
在出现了 invalid signature签名错误后按照以下步骤进行校验1.确认签名算法正确,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=j ...
- Glide的 java.lang.RuntimeException: Expected instanceof GlideModule, but found:X.GlideModule@2e4554f
问题一 在添加过混淆规则后,App打包的时候,发现报错了 java.lang.RuntimeException: Expected instanceof GlideModule, but found: ...
- MyDAL - .QueryListAsync() 使用
索引: 目录索引 一.API 列表 .QueryListAsync() .QueryListAsync<M>() 如: .QueryListAsync<AgentInventoryR ...
- 【视频】设计模式(C++)视频讲解
设计模式(C++) 视频网址: http://www.qghkt.com/ 设计模式(C++)视频地址: https://ke.qq.com/course/318637?tuin=a508ea62 目 ...
- 任意N个不同数的逆序对平均值
在学习数据结构的时候看到了以下定理: 但是老师并没有解释,本着钻研的精神决定搞清楚为什么是这个数. 在百度 google一番之后并没有找到,决定自己试着证明. 最开始走了一些弯路,但突然灵光一闪很容易 ...
- flask 项目基本框架的搭建
综合案例:学生成绩管理项目搭建 一 新建项目目录students,并创建虚拟环境 mkvirtualenv students 二 安装开发中使用的依赖模块 pip install flask==0.1 ...
- C#：往数据库插入/更新时候关于NUll空值的处理
前几天遇到一个问题,找了好久才找到解决办法.不过也很开心,终于解决了. 问题:前端当我数据为空的时候不赋值,传到后台也为空的时候(注意:是Null不是""),SqlCommand对 ...
- netcore开发windows普通服务(非Web)并一键发布到服务器
如何开发并一键发布WindowsService项目(netcore普通项目) netcore下开发windows服务如果是web项目的话,由于aspnetcore本身是支持的,把默认的host.Run ...
- BigDecimal比较大小，BigDecimal判断是否为0
原文:https://blog.csdn.net/qq_34926773/article/details/83419004 BigDecimal类型的数据,需要比较大小:声明BigDescimal: ...
- 升级：DNAtools for Excel工具箱，2.x英文版- VBA代码破解工具
原始出处:www.cnblogs.com/Charltsing/p/DnaTools.html QQ:564955427 DNA工具箱全部功能一览: 单元格焦点指示(支持Excel 2007~2 ...