使用 jquery-2 · 地表最強JS文檔

[toc] ## `scrollTop()` 獲取距離 top 的滾動距離 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> body { height: 20000px; } </style> </head> <body> <script> $(function() { $(document).click(function() { alert($(window).scrollTop()); }); }); </script> </body> </html> ``` ## 編寫彈窗 ### 增加 div 標簽 #### 原生 js 寫法 ```javascript window.onload = function() { var oDiv = document.createElement("div"); oDiv.innerHTML = "hello world"; document.body.appendChild(oDiv); }; ``` #### jquery 寫法 ```javascript $(function() { var oDiv = $("<div>hello world</div>"); $("body").append(oDiv); }); ``` ## 點擊注冊, 彈出彈框 #### 先布局 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> #login { width: 300px; height: 300px; border: 1px #000 solid; position: absolute; } #close { right: 0; top: 0; position: absolute; background: #ccc; } </style> </head> <body> <input type="button" value="注冊" id="input1" /> <div id="login"> <p> 用戶名 <input type="text" /> </p> <p> 密碼 <input type="text" /> </p> <div id="close">關閉</div> </div> </body> </html> ``` 寫 js, 點擊顯示(動態寫入 html 代碼) > [備忘]需要手敲, 幫助同學們加深理解... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> #login { width: 300px; height: 300px; border: 1px #000 solid; position: absolute; } #close { right: 0; top: 0; position: absolute; background: #ccc; } </style> </head> <body> <input type="button" value="注冊" id="input1" /> </body> <script> var str = ""; $(function() { $("#input1").click(function() { if (!str) { str += '<div id="login">'; str += "<p>"; str += "用戶名"; str += '<input type="text" />'; str += "</p>"; str += "<p>"; str += "密碼"; str += '<input type="text" />'; str += "</p>"; str += '<div id="close">關閉</div>'; str += "</div>"; var oDiv = $(str); $("body").append(oDiv); } }); }); </script> </html> ``` 設置 div 垂直水平居中 ```javascript oDiv.css("left", ($(window).width() - oDiv.outerWidth()) / 2); ``` 設置 div 垂直居中 ```javascript oDiv.css("top", ($(window).height() - oDiv.outerHeight()) / 2); ``` 設置有滾動條時的垂直居中 ```javascript $(window).on("resize scroll", function() { oDiv.css("left", ($(window).width() - oDiv.outerWidth()) / 2); oDiv.css( "top", ($(window).height() - oDiv.outerHeight()) / 2 + $(window).scrollTop() ); }); ``` 給關閉按鈕添加功能 ```javascript // 給關閉按鈕添加功能 $("#close").on({ click: function() { oDiv.remove(); str = ""; }, mouseover: function() { $(this).css("cursor", "pointer"); } }); ``` ## (加戲) `$(document)`,`$(window)`,`$('body')`的區別 document 文檔 window 瀏覽器窗口 body 標簽如果有滾動條, window 的寬度會加上滾動條的寬度 window 的高度, 是展示給用戶的高度, 而 document 和 body 是實際高度 ## scrollTop scrollTop 的最大值 = document 的高度 - window 的高度 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> * { margin: 0; padding: 0; } body { height: 2000px; } </style> </head> <body></body> <script> $(function() { // console.log("$(document).width"); // console.log($(document).width()); // console.log("$(document).outerWidth"); // console.log($(document).outerWidth()); // console.log("$(window).width"); // console.log($(window).width()); // console.log("$(window).outerWidth"); // console.log($(window).outerWidth()); // console.log('$("body").width'); // console.log($("body").width()); // console.log('$("body").outerWidth'); // console.log($("body").outerWidth()); console.log("$(document).height"); console.log($(document).height()); console.log("$(document).outerHeight"); console.log($(document).outerHeight()); console.log("$(window).height"); console.log($(window).height()); console.log("$(window).outerHeight"); console.log($(window).outerHeight()); console.log('$("body").height'); console.log($("body").height()); console.log('$("body").outerHeight'); console.log($("body").outerHeight()); }); </script> </html> ``` ## `one`()--事件只執行一次原來的點擊事件, 每次點擊, 都會執行 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { height: 200px; width: 200px; border: 1px solid red; } </style> </head> <body> <div></div> </body> <script> $(function() { $("div").on("click", function() { alert("hello world"); }); }); </script> </html> ``` 只執行一次的寫法 ```javascript $(function() { $("div").one("click", function() { alert("hello world"); }); }); ``` ## `offset`() `position`() 什么是 offset? 先布局 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> * { margin: 0; padding: 0; } #div1 { width: 200px; height: 200px; background-color: red; overflow: hidden; margin: 20px; } #div2 { width: 100px; height: 100px; background-color: yellow; margin: 30px; } </style> </head> <body> <div id="div1"><div id="div2"></div></div> </body> </html> ``` 再寫 js ```javascript $(function() { console.log(document.getElementById("div2").offsetLeft); }); ``` 如果父級有定位的話, 值還會變... ```css #div1 { width: 200px; height: 200px; background-color: red; overflow: hidden; margin: 20px; position: relative; } ``` 所以如果想獲取到左邊屏幕的距離, 你還需要先判斷父級是否有定位, 然后需要加上父級到屏幕的距離, 如果父級還有父級呢? ```javascript $(function() { console.log($("#div2").offset().left); }); ``` ## `offsetParent`() `parent()` parent 獲取父級 offsetParent 獲取有定位的父級 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> * { margin: 0; padding: 0; } #div1 { width: 200px; height: 200px; border: 1px solid red; } #div2 { width: 100px; height: 100px; border: 1px solid green; } </style> </head> <body> <div id="div1"><div id="div2"></div></div> <script> $(function() { $("#div2") .parent() .css("background", "red"); }); </script> </body> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> * { margin: 0; padding: 0; } #div1 { width: 200px; height: 200px; border: 1px solid red; } #div2 { width: 100px; height: 100px; border: 1px solid green; } </style> </head> <body> <div id="div1"><div id="div2"></div></div> <script> $(function() { $("#div2") .offsetParent() .css("background", "red"); }); </script> </body> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> * { margin: 0; padding: 0; } #div1 { width: 200px; height: 200px; border: 1px solid red; /* position: relative; */ /* position: fixed; */ position: absolute; } #div2 { width: 100px; height: 100px; border: 1px solid green; } </style> </head> <body> <div id="div1"><div id="div2"></div></div> <script> $(function() { $("#div2") .offsetParent() .css("background", "red"); }); </script> </body> </html> ``` ## `val`() value 值, 沒有參數表示取值, 有參數表示賦值 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <input type="button" value="123" /> </body> <script> $(function() { console.log($("input").val()); }); </script> </html> ``` ```javascript $(function() { $("input").val(456); }); ``` ## `size`() 獲取一組元素的長度 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li>this is tag li1</li> <li>this is tag li2</li> <li>this is tag li3</li> <li>this is tag li4</li> </ul> </body> <script> $(function() { alert($("li").size()); }); </script> </html> ``` 注意 jquery 版本 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li>this is tag li1</li> <li>this is tag li2</li> <li>this is tag li3</li> <li>this is tag li4</li> </ul> </body> <script> $(function() { alert($("li").length); }); </script> </html> ``` ## `each`() jquery 的循環 - `each()` 是 jquery 的循環 - `each()` 接收一個函數做參數, 函數有兩個參數, key, value - `key` 是下標 - `value` 是一個對象 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li>this is tag li1</li> <li>this is tag li2</li> <li>this is tag li3</li> <li>this is tag li4</li> </ul> </body> <script> $(function() { $("li").each(function(key, value) { console.log("li's key: " + key + ", " + "li's value: " + value); console.log(value.innerHTML); }); }); </script> </html> ``` ## ev 對象, 記錄了事件的一些信息 `ev.data.name` // 傳遞參數 `ev.target` // 當前操作的事件源 `ev.type` // 當前操作的事件類型 ```html <!DOCTYPE html> <html> <head> <script src="js/jquery.js"></script> <script> $(function() { $("#div1").on("click", { name: "hello" }, function(ev) { console.log(ev.data.name); // 傳遞參數 console.log(ev.target); // 當前操作的事件源 console.log(ev.type); // 當前操作的事件類型 }); }); </script> </head> <body> <div id="div1">aaaa</div> </body> </html> ``` `event.pageX` 和 `event.pageY`：獲取鼠標當前相對于頁面的坐標可以確定元素在當前頁面的坐標值，是以頁面為參考點 ```html <!DOCTYPE html> <html> <head> <script src="js/jquery.js"></script> <script> $(function() { $(document).on("mousemove", function(ev) { console.log(ev.pageX + "," + ev.pageY); }); }); </script> </head> <body></body> </html> ``` pageX pageY clientX clientY screenX screenY pageX pageY 距離文檔左上角的 x,y(受滾動條影響) clientX clientY 當前文檔的可視區域的左上角(不受滾動條影響) screenX screenY 到整個顯示器的左上角 x,y ## 編寫拖拽先布局 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: red; position: relative; } </style> </head> <body> <div></div> </body> </html> ``` ```javascript $(function() { var disX = 0; var disY = 0; $("div").mousedown(function(ev) { disX = ev.pageX - $(this).offset().left; disY = ev.pageY - $(this).offset().top; $(document).mousemove(function(ev) { $("div").css("left", ev.pageX - disX); $("div").css("top", ev.pageY - disY); }); $(document).mouseup(function() { $(document).off(); }); return false; }); }); ``` ## 簡單動畫 ### `hover`() 鼠標移入移出的一個結合版 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; } #div1 { background: red; } #div2 { background: blue; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> <script> $(function() { $("#div1").hover( function() { $("#div2").css("background", "yellowgreen"); }, function() { $("#div2").css("background", "blue"); } ); }); </script> </html> ``` ### `show`() `hide`() show ==> display:block hide ==> display:none ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; } #div1 { background: red; } #div2 { background: blue; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> <script> $(function() { $("#div1").hover( function() { $("#div2").hide(); }, function() { $("#div2").show(); } ); }); </script> </html> ``` 可以接收時間作為參數 ```javascript $(function() { $("#div1").hover( function() { $("#div2").hide(7000); }, function() { $("#div2").show(7000); } ); }); ``` ### `fadeIn`() `fadeOut`() 淡入淡出 ```javascript $(function() { $("#div1").hover( function() { $("#div2").fadeOut(); }, function() { $("#div2").fadeIn(); } ); }); ``` 也可以設置時間(默認 400) ```javascript $(function() { $("#div1").hover( function() { $("#div2").fadeOut(7000); }, function() { $("#div2").fadeIn(7000); } ); }); ``` ### `slideDown`() `slideUp`() 向下展開, 向上卷起 ```javascript $(function() { $("#div1").hover( function() { $("#div2").slideUp(); }, function() { $("#div2").slideDown(); } ); }); ``` 同樣可以設置時間 ```javascript $(function() { $("#div1").hover( function() { $("#div2").slideUp(7000); }, function() { $("#div2").slideDown(7000); } ); }); ``` ### `fadeTo`() 給淡入淡出一個結束點兩個參數, 一個是時間, 一個是透明度 ```javascript $(function() { $("#div1").hover( function() { $("#div2").fadeTo(7000, 0.1, function() { alert("完事兒!!!!"); }); }, function() { $("#div2").fadeTo(5000, 1, function() { alert("變回來了!!!!"); }); } ); }); ``` ## `get`() 原生 js 和 jquery 真的不能混用嗎? 比如要彈出元素內容... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>this is a div tag</div> </body> <script> $(function() { alert($("div").html()); }); </script> </html> ``` get: 把 jquery 轉成原生 js ```javascript $(function() { alert($("div").get(0).innerHTML); }); ``` 再來試試 li 循環, 注意 get 不加參數, 表示一個集合 ```javascript console.log($("li")); console.log($("li").get()); ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li>this is a li tag 1</li> <li>this is a li tag 2</li> <li>this is a li tag 3</li> <li>this is a li tag 4</li> <li>this is a li tag 5</li> <li>this is a li tag 6</li> <li>this is a li tag 7</li> <li>this is a li tag 8</li> <li>this is a li tag 9</li> <li>this is a li tag 10</li> </ul> </body> <script> $(function() { for (var i = 0; i < $("li").get().length; i++) { console.log($("li").get(i).innerHTML); } }); </script> </html> ``` 如果我把`get`去掉呢? ```javascript $(function() { for (var i = 0; i < $("li").length; i++) { console.log($("li").get(i).innerHTML); } }); ``` 注意, `console.log($('li'))`, 會發現`length`屬性如果是下標呢? ```javascript $(function() { for (var i = 0; i < $("li").length; i++) { console.log($("li")[i].innerHTML); } }); ``` 注意`$('li')[0]`和`$('li').eq(0)`的區別如果想給第一個 li 設置背景... ## `outerWidth`() width+padding+border, 如果是 true, 再加上 margin 原生的 offsetWidth width+padding+border 他倆最根本的區別... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background: red; } </style> </head> <body> <div></div> </body> <script> $(function() { alert($("div").outerWidth()); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background: red; } </style> </head> <body> <div></div> </body> <script> $(function() { alert($("div")[0].offsetWidth); }); </script> </html> ``` 當 display:none 的時候... offsetWidth ==> 0 jquery 的 outerWidth 依然有值 `visibility: hidden;` 呢? ## `text`() 先看看 text()和 html()的區別 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div><p>hello world</p></div> </body> <script> $(function() { console.log($("div").html()); console.log($("div").text()); }); </script> </html> ``` 如果 div 比較多呢... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div><p>hello world_0</p></div> <div><p>hello world_1</p></div> <div><p>hello world_2</p></div> <div><p>hello world_3</p></div> <div><p>hello world_4</p></div> <div><p>hello world_5</p></div> <div><p>hello world_6</p></div> <div><p>hello world_7</p></div> <div><p>hello world_8</p></div> <div><p>hello world_9</p></div> <div><p>hello world_10</p></div> <div><p>hello world_11</p></div> <div><p>hello world_12</p></div> <div><p>hello world_13</p></div> </body> <script> $(function() { console.log($("div").html()); console.log($("div").text()); }); </script> </html> ``` 那再試試賦值? ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div><p>hello world_0</p></div> <div><p>hello world_1</p></div> <div><p>hello world_2</p></div> <div><p>hello world_3</p></div> <div><p>hello world_4</p></div> <div><p>hello world_5</p></div> <div><p>hello world_6</p></div> <div><p>hello world_7</p></div> <div><p>hello world_8</p></div> <div><p>hello world_9</p></div> <div><p>hello world_10</p></div> <div><p>hello world_11</p></div> <div><p>hello world_12</p></div> <div><p>hello world_13</p></div> </body> <script> $(function() { var str = "<p>hello China</p>"; // console.log($("div").html(str)); console.log($("div").text(str)); }); </script> </html> ``` ## `remove`() : `detach`() 這兩個都是刪除節點先試試自殺... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div></div> <script> $(function() { $("div").remove(); }); </script> </body> </html> ``` 刪除操作, 會返回操作的值, 如果自殺之前, 已經有點擊事件了, 那么恢復后, 事件還在嗎? ```javascript $(function() { $("div").click(function() { alert("hello world"); }); var oDiv = $("div").remove(); $("body").append(oDiv); }); ``` 那 `detach`呢? ```javascript $(function() { $("div").click(function() { alert("hello world"); }); var oDiv = $("div").detach(); $("body").append(oDiv); }); ``` ## `$()` === `$(document).ready()` `$()` !== `window.onload` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <img src="https://www.xujunhao.com/hello.jpg" /> </body> <script> // window.onload = function() { // alert("hello world"); // }; $(function() { alert("hello world"); }); </script> </html> ``` `$()`相當于... ```javascript $(document).ready(function() { alert("hello world"); }); ``` window.onload, 只執行一次 document.ready, 可以執行很多次