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 ...
随机推荐
- 02 入门 - ASP.NET MVC 5 概述
目录索引:<ASP.NET MVC 5 高级编程>学习笔记 本篇内容: 一.One ASP.NET 二.新的Web项目体验 三.ASP.NET Identity 四.Bootstrap 模 ...
- H3C交换机S5500划分VLAN
好记性不如烂笔头! H3C交换机S5500划分VLAN 将H3C S5500换机现在需要分三网段,分别是VLAN14,VLAN15,VLAN16,交换机中默认全部口是VLAN1. H3 ...
- 【esri-loader】帮助文档翻译 part1 是什么,怎么安装,为什么要用它
是什么 esri-loader是一个JavaScript库(包/模块,Web模块化编程的概念),用于在非Dojo框架的Web页面中加载ArcGIS API for JavaScript 3.x或4.x ...
- Android远程桌面助手(B1391)
ARDC(B1391), Download:https://files.cnblogs.com/files/we-hjb/ARDC%28B1391%29_EN.7z Android远程桌面助手(B13 ...
- jmeter使用TCP请求时，乱码问题，字符集设置
不墨迹,直接上干货.(提示:UTF-8一个汉字占3个字节) TCP请求默认发的是GBK字符集,要想修改成UTF-8,只需要修改bin目录下的jmeter.properties文件,其中tcp.char ...
- Git 密钥对处理
生成密钥对: ssh-keygen -t rsa cd .ssh ls id_rsa 私钥 id_rsa.pub 公钥
- VS2017的MVC和Angular联合开发的配置文件作用
在通过MVC和Angular联合开发项目时,项目里有几个重要的配置文件,下面列出这几个配置文件的分析和比较: 主要配置文件有appsettings.json,tsconfig.json,package ...
- 【vue】iView-admin2.0动态菜单路由
vue项目实现动态路由有俩种方式 一.前端在routers中写好--所有--路由表 <前端控制路由>,登录时根据用户的角色权限来动态的显示菜单路由 二.前端通过调用接口请求拿到当前用户-- ...
- Elasticsearch 通关教程（四）： 分布式工作原理
前言 通过前面章节的了解,我们已经知道 Elasticsearch 是一个实时的分布式搜索分析引擎,它能让你以一个之前从未有过的速度和规模,去探索你的数据.它被用作全文检索.结构化搜索.分析以及这三个 ...
- ASP.NET Core 2.2 十九. Action参数的映射与模型绑定
前文说道了Action的激活,这里有个关键的操作就是Action参数的映射与模型绑定,这里即涉及到简单的string.int等类型,也包含Json等复杂类型,本文详细分享一下这一过程.(ASP.NET ...