表单控件的事件

　　change()表单元素发生改变时触发事件
　　select()文本元素发生改变时触发事件
　　submit()表单元素发生改变时触发事件

　　

  1. .focus() 获取焦点
  2. .blur()  释放焦点
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <input type="text">
  9. <input type="text">
  10. <script src="./libs/jquery-3.3.1.js"></script>
  11. <script>
  12.     $(function () {
  13.         //如果有回调函数参数,表示输入框获取焦点的额时候会触发
  14.         //如果没有回调函数,当调用focus() 立马会获取焦点
  15.         // $('input[type=text]')[0].focus()
  16.         $('input[type=text]').focus(function () {
  17.             console.log(111);
  18.         });
  19.  
  20.         //3秒后释放焦点
  21.         var timer = setTimeout(function () {
  22.             $('input[type=text]').blur();
  23.             clearTimeout(timer);
  24.         },3000);
  25.  
  26.     })
  27. </script>
  28.  
  29. </body>
  30. </html>

jQuery事件, 焦点的获取与释放

　　合成事件  .hover(fn1,fn2)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .box{
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15. <div class="box"></div>
  16. <script src="libs/jquery-3.3.1.js"></script>
  17. <script>
  18.     $(function () {
  19.         $('.box').hover(function () {
  20.             $(this).css('backgroundColor','green')
  21.         }, function () {
  22.             $(this).css('backgroundColor', 'red')
  23.         })
  24.     })
  25. </script>
  26.  
  27. </body>
  28. </html>

　　表单事件

　　change(), select()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. 男<input type="radio" checked name="gender" value="1">
  9. 女<input type="radio" name="gender" value="0">
  10.  
  11. <select name="" id="">
  12.     <option value="a">alex</option>
  13.     <option value="b">wusir</option>
  14.     <option value="c">xiaomage</option>
  15. </select>
  16.  
  17. <input type="text" id="text">
  18. <script src="./libs/jquery-3.3.1.js"></script>
  19. <script>
  20.     $(function () {
  21.         $('input[type=radio]').change(function (e) {
  22.             console.log('被选中了');
  23.             console.log(e.target);
  24.             console.log($(this).val());
  25.         });
  26.  
  27.         $('select').change(function (e) {
  28.             console.log('选中了',$(this).find('option:selected').text());
  29.             console.log($(e.target).find('option:selected').val());
  30.             console.log(e.target);
  31.  
  32.         });
  33.  
  34.         // 只有在选中输入框中文字的时候才能触发事件
  35.         $('#text').select(function (e) {
  36.             console.log('被选中了');
  37.             console.log(e.target);
  38.         });
  39.  
  40.     })
  41. </script>
  42.  
  43. </body>
  44. </html>

事件代理

　　应用条件

  • 给多个元素添加相同的事件
  • 给未来的元素添加事件

　　应用原理

　　通过冒泡事件处理

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <input type="text">
  9. <button id="append">追加</button>
  10. <div class="box">
  11.     <ul>
  12.         <li>alex</li>
  13.         <li id="box">wusir</li>
  14.     </ul>
  15. </div>
  16.  
  17. <script src="./libs/jquery-3.3.1.js"></script>
  18. <script>
  19.     $(function () {
  20.         $('ul li').click(function () {
  21.             alert($(this).text());
  22.         });
  23.  
  24.         //事件委托,用on(事件,子元素选择器,fn)
  25.         $('.box').on('click','li',function () {
  26.             console.log($(this));
  27.         });
  28.  
  29.         //未来追加的元素  是没有事件 我们通过事件委托  当你出现点击页面中的DOM没有任何反应
  30.         //1.DOM是否undefined  2.考虑事件代理
  31.         $('#append').click(function () {
  32.             var val = $('input[type=text]').val();
  33.             $('ul').append(`<li>${val}</li>`);
  34.         })
  35.  
  36.     })
  37. </script>
  38. </body>
  39. </html>

未来追加的元素时没有事件的,需要使用事件代理

　　选项卡--小米轮播图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{margin: 0;padding: 0;}
  8.         ul,ol{ list-style: none;}
  9.         .wrapper{
  10.             width: 1226px;
  11.             height: 460px;
  12.             margin: 100px auto;
  13.             /*overflow: hidden;*/
  14.             position: relative;
  15.         }
  16.         .wrapper ul{
  17.             width: 100%;
  18.             height: 460px;
  19.             overflow: hidden;
  20.  
  21.         }
  22.         .wrapper ul li{
  23.             float: left;
  24.             width: 100%;
  25.             /*height: 240px;*/
  26.         }
  27.         ol{
  28.             position: absolute;
  29.             right: 0;
  30.             bottom: 10px;
  31.             width: 290px;
  32.         }
  33.         ol li{
  34.             float: left;
  35.             width: 20px;
  36.             height: 20px;
  37.             margin: 0 5px;
  38.             text-align: center;
  39.             border-radius: 50%;
  40.             cursor: pointer;
  41.             background-color: #abc;
  42.         }
  43.         ol li.current{
  44.             background-color: pink;
  45.         }
  46.         img{
  47.             width: 1226px;
  48.         }
  49.     </style>
  50.     <script src="libs/jquery-3.3.1.js"></script>
  51.     <script>
  52.         $(function () {
  53.             // 根据ol下li的索引号，匹配ul下相对应li的索引号
  54.             $('.wrapper ol li').mouseenter(function () {
  55.                 $(this).addClass('current').siblings('li').removeClass('current');
  56.                 $('.wrapper ul li').eq($(this).index()).stop().fadeIn(100).siblings('li').stop().fadeOut(300);
  57.             })
  58.         })
  59.     </script>
  60. </head>
  61. <body>
  62.     <div class="wrapper">
  63.         <ul>
  64.             <li><img src="data:images/1.jpg" alt=""></li>
  65.             <li><img src="data:images/2.jpg" alt=""></li>
  66.             <li><img src="data:images/3.jpg" alt=""></li>
  67.             <li><img src="data:images/4.jpg" alt=""></li>
  68.             <li><img src="data:images/5.jpg" alt=""></li>
  69.         </ul>
  70.         <ol>
  71.             <li class="current">1</li>
  72.             <li>2</li>
  73.             <li>3</li>
  74.             <li>4</li>
  75.             <li>5</li>
  76.         </ol>
  77.  
  78.     </div>
  79. </body>
  80. </html>

ajax技术(XHR === XMLHTTPRequest)

参考:https://www.cnblogs.com/majj/p/9134922.html

　　作用 :与后端交互,局部作用域刷新页面.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <ul>
  9.  
  10.     </ul>
  11.  
  12.     <script src="libs/jquery-3.3.1.js"></script>
  13.     <script>
  14.         //天气图片地址,数字是json文件中的cond_code
  15.     // https://cdn.heweather.com/cond_icon/104.png
  16.         $(function () {
  17.             function getWeather() {
  18.                 clearInterval(timer);
  19.  
  20.                 $.ajax({
  21.                 url:'https://free-api.heweather.com/s6/weather/now?location=beijing&key=84d13f49fcc1474aba06d11c28e36a74',
  22.                 type:'get',
  23.                 success:function (data) {
  24.                     console.log(data);
  25.                     var code = data.HeWeather6[0].now.cond_code;
  26.  
  27.                     $('ul').html(`<img><img src="https://cdn.heweather.com/cond_icon/${code}.png"></li>`)
  28.                 },
  29.                 error:function (err) {
  30.                     console.log(err);
  31.                 }
  32.             })
  33.             }
  34.  
  35.             getWeather();
  36.  
  37.             var timer = setInterval(function () {
  38.                 getWeather();
  39.             },5000);
  40.  
  41.             })
  42.  
  43.     </script>
  44.  
  45. </body>
  46. </html>
  1. {
  2.     "HeWeather6":[
  3.         {
  4.             "basic":{
  5.                 "cid":"CN101010100",
  6.                 "location":"北京",
  7.                 "parent_city":"北京",
  8.                 "admin_area":"北京",
  9.                 "cnty":"中国",
  10.                 "lat":"39.90498734",
  11.                 "lon":"116.4052887",
  12.                 "tz":"+8.00"
  13.             },
  14.             "update":{
  15.                 "loc":"2018-11-15 18:45",
  16.                 "utc":"2018-11-15 10:45"
  17.             },
  18.             "status":"ok",
  19.             "now":{
  20.                 "cloud":"",
  21.                 "cond_code":"",
  22.                 "cond_txt":"阴",
  23.                 "fl":"",
  24.                 "hum":"",
  25.                 "pcpn":"0.0",
  26.                 "pres":"",
  27.                 "tmp":"",
  28.                 "vis":"",
  29.                 "wind_deg":"",
  30.                 "wind_dir":"北风",
  31.                 "wind_sc":"",
  32.                 "wind_spd":""
  33.             }
  34.         }
  35.     ]
  36. }

weather.json

Day050--jQuery表单事件 轮播图 插件库 ajax的更多相关文章

  1. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  2. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...

  3. 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  4. 第124天：移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

  5. 原生JavaScript（js）手把手教你写轮播图插件（banner）

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...

  6. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  7. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  8. Vue轮播图插件---Vue-Awesome-Swiper

    轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...

  9. vue轮播图插件之vue-awesome-swiper

    移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesome-swip ...

随机推荐

  1. arcgis api 3.x for js 入门开发系列十八风向流动图（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  2. Android Material Design控件使用（一）——ConstraintLayout 约束布局

    参考文章: 约束布局ConstraintLayout看这一篇就够了 ConstraintLayout - 属性篇 介绍 Android ConstraintLayout是谷歌推出替代PrecentLa ...

  3. js饼状图（带百分比）功能实现，新人必懂

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. FelxCell常用属性设置(未完待续......)

    this.grid1.AllowUserPaste//返回或设置是否允许用户粘贴文字和格式 grid1.Cell(Rows, 1).WrapText = true;//设置单元格自动换行

  5. C#几个经常用到的字符串的截取

    string str="123abc456";int i=3;1 取字符串的前i个字符   str=str.Substring(0,i); // or  str=str.Remov ...

  6. 根据Webservice地址，动态传入参数(Webservice代理类)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sunlib; ...

  7. MySQL SET数据类型

    SET: 多选字符串数据类型,适合存储“多个值”. 设定set的时候,同样需要设定“固定的几个值”:存储的时候,可以存储其中的若干个值. 设定set的格式: 字段名称  SET("选项1&q ...

  8. 简单shellcode编写

    0x00 介绍 Shellcode 是指经过精心设计的一串指令,一旦注入正在运行的应用程序中即可运行,常用于栈和基于堆的溢出.术语Shellcode意思指的便是用于启动一个命令Shell的已编写好的可 ...

  9. 自定义react数据验证组件

    我们在做前端表单提交时,经常会遇到要对表单中的数据进行校验的问题.如果用户提交的数据不合法,例如格式不正确.非数字类型.超过最大长度.是否必填项.最大值和最小值等等,我们需要在相应的地方给出提示信息. ...

  10. tensorflow 训练之tensorboard使用

    1.add saclar and histogram tf.summary.scalar('mean', mean) tf.summary.histogram('histogram', var) 2. ...