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 ...
随机推荐
- Servlet练习：实现增删改查的综合练习
---恢复内容开始--- 本文为原创,转载请注明出处:https://www.cnblogs.com/Tom-shushu/p/9383066.html 本篇内容主要介绍:通过Servlet,JSP, ...
- jsp内置对象-response对象
一.概念 隐含对象response是javax.servlet.HttpServletResponse接口实现类的对象.response对象封装了JSP产生的响应,用于响应客户端的请求,向客户端输出信 ...
- webpack4.x笔记-配置基本的前端开发环境（一）
webpack的基本使用 webpack 本质上是一个打包工具,它会根据代码的内容解析模块依赖,帮助我们把多个模块的代码打包.借用 webpack 官网的图片: 虽然webpack4.x的版本可以零配 ...
- 总结安装webpack过程中遇到的错误及解决方案
1.安装不成功的报错: 解决方案:清除缓存 2.打包不成功: 解决方案:填写打包路径时的“__dirname”有两个下划线 3.打包报错: 解决方案:正确填写路径为“./style.css”
- Android Studio教程04-Task和Back stack
目录 1.Tasks and Back Stack 1.1. 当点击Back按钮返回到上一个Activity时发生了什么? 1.2. 点击HOME按钮 1.3.多次点击进入Activity-Back按 ...
- 从PM到非洲酋长，得人心者得天下
说正事之前,先唠10块钱儿的…… 偶然看到房一波的故事,这个PM了不得了! 房兄是山东电建三公司,派驻到尼日利亚建设燃机电站的PM.本来在非洲,这种“万丈高楼平地起”的项目是很好干的,可是房兄却遭遇了 ...
- rocketmq4.x快速入门指南
以下采用的是apache rocketmq 4.2.0版本 相关文档如下 快速体验: http://blog.seoui.com/2018/07/24/rocketmqinstall/ rocketm ...
- 简单易懂的单元测试框架-gtest（一）
简介 gtest是google开源的一个单元测试框架,以其简单易学的特点被广泛使用.该框架以第三方库的方式插入被测代码中.同其他单元测试框架相似,gtest也通过制作测试样例来进行代码测试.同 ...
- Python基础之函数和模块
函数的基本使用 函数的定义:把具有独立功能的代码块组织成一个小模块,在需要的时候调用.或者说,函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数的使用:1.定义函数:2.调用函数 ...
- win7系统IE浏览器主页被搜狗篡改问题的解决方法
IE浏览器使用一段时间后可能大家就会遇到主页被篡改的问题,篡改之后主页就变成了搜狗页面,我们常用的百度搜索也变成了搜狗搜索,这不仅使得我们操作起 来不习惯,使用起来也会感觉非常别扭.那如果在使用IE浏 ...