複習-jQuery
阿新 • • 發佈：2022-03-30
咱就是說，發現了一個更好的方法每次把效果圖製作成了一個gif，另外推薦個免費軟體GIFcam很方便製作gif圖，畢竟js是一門動態互動的語言對吧，沒有動態的圖那就是沒有靈魂的所以以後就用這種方式來上傳一些頁面的效果互動，今天是對jQuery的複習，雖然說現在用jq的少了但是學一學還是可以的，學了不吃虧，還別說這裡面還是有難得案例的邏輯性很強，就比如jq那個表單外掛validate主要還是裡面的屬性方法這些要搞清楚。
1.
第一個案例是一個登入切換的案例，用到了jq的自觸發事件，然後都在程式碼裡了，看圖吧
霍，不錯不錯，終於實現了動態互動，我的部落格完成了一大進展，人類進入了一個新社會，然後還是一樣html對應部分➕js的程式碼呈現，這個案例有個新鮮的點
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>demo - 微博登入</title> <link rel="stylesheet" href="./css/style.css" /> </head> <body> <div class="login"> <div class="wrap-box"> <!-- 切換登入場景 --> <div class="multi-type"> <a href="javascript:;" data-label="#account" class="label active"> 賬號登入 </a> <a href="javascript:;" data-label="#secure" class="label">安全登入</a> <a href="javascript:;" data-label="#phone" class="icon"></a> </div> <div class="login-type"> <!-- 賬號登入 --> <div class="account" id="account"> <div class="input-box username"> <input type="text" /> </div> <div class="input-box password"> <input type="text" /> </div> <div class="extra-box"> <label for="login_status"> <input id="login_status" type="checkbox" /> <span>記住我</span> </label> <a href="javascript:;">忘記密碼</a> </div> <div class="button-box"> <button>登入</button> </div> <p class="text-box"> 還沒有微博? <a href="javascript:;">立即註冊!</a> </p> <p class="social-box"> <span>基它登入：</span> <a href="javascript:;" class="taobao"></a> <a href="javascript:;" class="qq"></a> <a href="javascript:;" class="yidong"></a> <a href="javascript:;" class="tianyi"></a> <a href="javascript:;" class="qihu"></a> </p> </div> <!-- 安全登入 --> <div class="secure" id="secure"> <div class="qrcode"> <img src="./images/weibo.png" alt="" /> <span>請用最新版微部落格戶端掃碼</span> </div> <p>還沒有微博？<a href="javascript:;">立即註冊!</a></p> </div> <!-- 手機號登入 --> <div class="phone" id="phone"> <div class="input-box phone-number"> <input type="text" /> </div> <div class="verify-box"> <button>獲取簡訊驗證碼</button> <input class="code" type="text" /> </div> <div class="extra-box"> <label for="login_status"> <input id="login_status" type="checkbox" /> <span>記住我</span> </label> <a href="javascript:;">忘記密碼</a> </div> <div class="button-box"> <button>登入</button> </div> <p class="text-box"> 還沒有微博? <a href="javascript:;">立即註冊!</a> </p> <p class="social-box"> <span>基它登入：</span> <a href="javascript:;" class="taobao"></a> <a href="javascript:;" class="qq"></a> <a href="javascript:;" class="yidong"></a> <a href="javascript:;" class="tianyi"></a> <a href="javascript:;" class="qihu"></a> </p> </div> </div> </div> </div> <!-- 引入 jQuery --> <script src="./assets/jquery/jquery-3.5.1.min.js"></script> <script> // 1.先完成點選切換的功能 var flag = true $('.multi-type').children('a').click(function() { var label = $(this).attr('data-label').substr(1) $('.multi-type').children('.active').removeClass('active') $(this).addClass('active') // 3.小圖示的切換應該有一個開關閥 控制再次點選切換到安全登入 // 2.對應的內容面板切換 $('.login-type').children('div').css('display', 'none') $('.login-type').children('.'+label+'').css('display', 'block') // 3.1這裡我用jq物件來相等好像不太行的樣子不知道為什麼 // 這個案例新鮮點在這裡 一個是怎麼來控制點了第三個圖示兩次 一個是這段程式碼的擺放位置也有作用 放在前面就會執行不了 if (this === document.querySelector('.icon')) { // console.log(11); if (flag) { console.log(11); this.click() flag = false } else { flag = true console.log(11); document.querySelector('.multi-type').children[1].click() } } }) </script> </body> </html>
2.
這一個案例，是一個多方面的案例主要運用到的技術還是jq的動畫，以及它的新增節點之類的，先來兩個效果展示一個是返回頂部的淡入淡出以及帶有緩衝效果的返回頂部，一個是模擬客服反饋頁面的顯示隱藏效果
然後還有一個比較複雜一點是一個輪播版塊的輪播，但是用的是節點和遞迴的操作去達到的
這圖片大小居然還有限制，以後還要卡在十m以內，這是對應的輪播圖html部分
<div class="weibo"> <div class="title"> <h3>悟語</h3> <span> <a href="#">更多>></a> </span> </div> <div class="outer"> <div class="wbdesc"> <div class="wblist"> <div class="userinfo"> <img src="./uploads/photos/use1.jpg" /> <h4>作響_</h4> <p>1分鐘前</p> </div> <div class="cont"> <p> 青春，一場盛世的繁華，願不傾城，不傾國，只傾我所有。只為過簡單安穩的生活，單純不平凡。一支素筆，一杯花茶，一段時光，淺笑又安然。早安！ </p> <img src="./uploads/weibo1.jpg" /> </div> </div> <div class="wblist"> <div class="userinfo"> <img src="./uploads/photos/use2.jpg" /> <h4>大媚子</h4> <p>13分鐘前</p> </div> <div class="cont"> <p> 人生最好的旅行，就是你在一個陌生的地方，發現一種久違的感動。獨自旅行，不受羈絆。有一天，背上包，帶上自己，有多遠，走多遠。 </p> <img src="./uploads/weibo2.jpg" /> </div> </div> <div class="wblist"> <div class="userinfo"> <img src="./uploads/photos/use3.jpg" /> <h4>Honey米兒</h4> <p>6分鐘前</p> </div> <div class="cont"> <p> 任何一場旅行，都似對生活的拯救；每一個沉思的瞬間，都成就了旅行的意義。 </p> <img src="./uploads/weibo3.jpg" /> </div> </div> <div class="wblist"> <div class="userinfo"> <img src="./uploads/photos/use4.jpg" /> <h4>如茅挽君</h4> <p>16分鐘前</p> </div> <div class="cont"> <p> 我想要一次旅行，到處留下足跡，和你一起。我在別人眼裡，你在我心裡。我想要一次旅行，不留任何足跡，獨自一起。我在你的記憶，卻不在你心裡。我們一起走過過去和現在。 </p> <img src="./uploads/weibo4.jpg" /> </div> </div> </div> </div> </div>
這是返回頂部和客服反饋介面
<div class="tools"> <div class="gotop"> <a href="javascript:;"> <i></i>返回頂部 </a> </div> <div class="suggest"> <a href="javascript:;"> <i></i>意見反饋 </a> </div> </div> <div class="sugform"> <div class="sugtitle"> <p>您對<span class="curpage">"當前頁面"</span>滿意嗎?</p> <a href="javascript:;" class="close"> </a> </div> <div class="check"></div> </div>
然後這是js部分
// 1.返回頂部淡入淡出 $('.gotop').css('display', 'none') $(window).scroll(function() { if($(this).scrollTop() >= $('.view h3').offset().top){ $('.gotop').stop().fadeIn(500) } else { $('.gotop').stop().fadeOut(500) } }) // 1.1利用自動以動畫做帶有緩衝效果的返回頂部 $('.gotop').click(function() { $('html').animate({scrollTop : 0}, 500) }) // 2.意見反饋 $('.suggest').click(function() { $('.sugform').show(500) }) $('.close').click(function() { $('.sugform').hide(500) }) // 3.最案例最重要內容 上下輪播 function autoPlay() { $('.wbdesc').prepend($('.wblist').last()) var move = $('.wblist').first().height() $('.wbdesc').css('top',-move) $('.wbdesc').delay(1000).animate({ top : 0 }, 1000,function() { autoPlay() }) } autoPlay()
3.
然後是一個記事本的案例，這個的難點在哪，在一個動畫的新增，不管是新增還是刪除都會有一個jq動畫的效果再在動畫的回撥函式裡面去刪除
html
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>notebook</title> <link rel="stylesheet" href="./css/base.css" /> <link rel="stylesheet" href="./css/index.css" /> </head> <body> <section class="todoapp"> <header class="header"> <h1>記事本</h1> <!-- 輸入框 --> <input id="addTodo" class="new-todo" placeholder="請輸入內容" autofocus /> </header> <section class="main"> <!-- 容器 --> <ul class="todo-list" id="todoList"> <!-- 模板 --> <!-- <li> <div class="view"> <label>模板</label> <button class="destroy"></button> </div> </li> --> </ul> </section> <footer class="footer"> <!-- 計數區域 --> <span class="todo-count"> 合計: <strong>0</strong> </span> </footer> </section> <script src="./libs/jquery-3.5.1.min.js"></script> <script src="./js/index.js"></script> </body> </html>
js部分
// 1.新增功能 $('.new-todo').keyup(function(e) { if (e.keyCode == 13) { var val = $(this).val() // console.log(val); if ($(this).val() != '') { $('.todo-list').prepend('<li><div class="view"><label>'+val+'</label><button class="destroy"></button></div></li>') $('.todo-list li').first().css('display', 'none').slideDown() } $(this).val('') } $('strong').text($('.todo-list').children().length) }) // 2.刪除功能 $('.todo-list').on('click','.destroy', function() { $(this).parent().parent().fadeOut(function() { $(this).remove() $('strong').text($('.todo-list').children().length) }) })
ok 差不多jQuery就這些內容了，你如果覺得還沒完，那就是後面還有一些jq的外掛的使用問題了，這個按著他的api來就完事了