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 ...
随机推荐
- OPP的三大特征之封装总结
'''封装: 1.什么是封装? 封装是把什么东西装到容器中,再封闭起来 与隐藏有相似之处,但不是单纯的隐藏 官方解释:封装是指对外部隐藏实现细节,并提供简单的使用接口 封装的好处: 1.提高安全性 2 ...
- Hacking Bsides Vancouver 2018 walkthrough
概述: Name: BSides Vancouver: 2018 (Workshop) Date release: 21 Mar 2018 Author: abatchy Series: BSides ...
- Spring WebFlux 响应式编程学习笔记(一)
各位Javaer们,大家都在用SpringMVC吧?当我们不亦乐乎的用着SpringMVC框架的时候,Spring5.x又悄(da)无(zhang)声(qi)息(gu)的推出了Spring WebFl ...
- 深入理解Java中的不可变对象
深入理解Java中的不可变对象 不可变对象想必大部分朋友都不陌生,大家在平时写代码的过程中100%会使用到不可变对象,比如最常见的String对象.包装器对象等,那么到底为何Java语言要这么设计,真 ...
- extjs ajax 请求成功也会进入failure
Ext.Ajax.request({ url: '路径', method : 'post', params : { 传的参数 }, success: function (action ...
- PostgreSQL For Windows 全功能精简版
预览 精简部分 保留全部 PostgreSQL 相关功能 删除自带的 pgadmin 4 删除文档 删除开发用头文件 删除开发用静态连接库 删除 Stack Build 工具 写了一个管理数据库用的批 ...
- java网络爬虫基础学习（三）
尝试直接请求URL获取资源 豆瓣电影 https://movie.douban.com/explore#!type=movie&tag=%E7%83%AD%E9%97%A8&sort= ...
- python学习_1
1.python2和python3 从宏观上讲,python2源码不标准.混乱.重复,和龟叔的理念背道而驰. 在python3上,实现了源码的统一化和标准化,去除了重复的代码. 2.编译型语言和解释型 ...
- CentOS 安装 ceph 单机版（luminous版本）
一.环境准备 CentOS Linux release 7.4.1708 (Core)一台,4块磁盘(sda.sdb,.sdc.sdd) 192.168.27.130 nceph 二.配置环境 1.修 ...
- python day05
数字类型 1.整型:整数 num = 1000000000000 type(num) --->int 2.浮点型:小数 num = 123.2341 type(num) --->float ...