表单控件的事件
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>
合成事件 .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="images/1.jpg" alt=""></li> <li><img src="images/2.jpg" alt=""></li> <li><img src="images/3.jpg" alt=""></li> <li><img src="images/4.jpg" alt=""></li> <li><img src="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技术
<!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 () { $.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); } }) }) </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":"0", "cond_code":"104", "cond_txt":"阴", "fl":"5", "hum":"18", "pcpn":"0.0", "pres":"1029", "tmp":"9", "vis":"29", "wind_deg":"4", "wind_dir":"北风", "wind_sc":"3", "wind_spd":"14" } } ] }