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 ...
随机推荐
- 判断点在多边形内算法的C++实现
目录 1. 算法思路 2. 具体实现 3. 改进空间 1. 算法思路 判断平面内点是否在多边形内有多种算法,其中射线法是其中比较好理解的一种,而且能够支持凹多边形的情况.该算法的思路很简单,就是从目标 ...
- vivo7.0以上系统如何无需Root激活Xposed框架的方法
在较多公司的引流或者业务操作中,基本都需要使用安卓的黑高科技术Xposed框架,几天前我们公司购买了一批新的vivo7.0以上系统,基本都都是基于7.0以上版本,基本都不能够获取Root的su超级权限 ...
- Android AutoCompleteTextView和MultiAutocompleteTextView实现动态自动匹配输入的内容
AutoCompleteTextView MultiAutocompleteTextView 这两个控件长的很相似,功能也很相似. AutoCompleteTextView 功能: 动态匹配输入的内容 ...
- android---EventBus的简单使用(一)
是什么: 就是用来发消息通信的 怎么用: 定义事件:(消息体) public class MessageEvent { /* Additional fields if needed */ } 准备订阅 ...
- scrapy安装失败：error:Microsoft Visual C++ 14.0 is reuired.及同类型安装问题解决办法
今天在安装scrapy的时候(pip install Scrapy),出现了如下错误: building 'twisted.test.raiser' extensionerror: Microsoft ...
- July 12th, 2018. Thursday, Week 28th.
People love what other people are passionate about. 人总是会爱上别人倾注热情的事物. From La La Land. This quote has ...
- python defaultdict模块
from collections import defaultdict '''默认值字典'''d = defaultdict(lambda :123)print(d)print(type(d))pri ...
- ztree 为节点添加点击触发事件
<SCRIPT type="text/javascript"> var setting = { data : { key : { title : "code& ...
- Elasticsearch 通关教程（六）： 自动发现机制 - Zen Discoveryedit
发现方式 Zen discovery是内建的.默认的.用于Elasticsearch的发现模块.它提供了单播和基于文件的发现,可以通过插件扩展到支持云环境和其他形式的发现. Zen Discovery ...
- Docker镜像仓库清理的探索之路
用友云开发者中心是基于Docker容器进行微服务架构应用的落地与管理.相信各位同学在使用的过程中,会发现随着Docker镜像的增多,占用磁盘空间也约来越多.这时我们需要清理私有镜像仓库中不需要的镜像. ...