Day050--jQuery表單事件 輪播圖 外掛庫 ajax
阿新 • • 發佈：2018-11-15
表單控制元件的事件
change()表單元素髮生改變時觸發事件
select()文字元素髮生改變時觸發事件
submit()表單元素髮生改變時觸發事件
.focus() 獲取焦點
.blur() 釋放焦點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <jQuery事件, 焦點的獲取與釋放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 htmlView Code> <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>View Code
事件代理
應用條件
- 給多個元素點選相同的事件
- 給未來的元素新增事件
應用原理
通過冒泡事件處理
<!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>View Code
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>View Code
{ "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" } } ] }weather.json