JS學習記錄(jQuery)
阿新 • • 發佈：2017-08-11
con 一次 strong 然而 自定義 對象 jquery庫 封裝 自己
jQuery入門
<html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery入門</title> </head> <body> <p id="content" class="first">青島理工大學</p> <p id="content2">青島理工大學</p> <p class="content3">青島理工大學</p> <div class="myDiv">我是DIV</div> </body> <!--.min文件:壓縮文件,沒有空格和換行,瀏覽器閱讀速度快, 程序員閱讀困難,且無法調試,適用於項目發布. .js:未壓縮版文件,文件顯示正常的空格,換行和縮進. 瀏覽器閱讀速度慢,但方便程序員閱讀和調試. 適用於項目開發 .min.js和.js文件功能和使用運行效果是完全一樣--> <!--不管使用任何js庫,第一步都是把jquery庫引入!--> <script src="../js/jquery-3.2.1.min.js"></script> <script> /* /!*純js寫法*!/ var p =document.getElementById("content"); console.log(p.innerHTML); /!*jQuery寫法*!/ /!*id選擇器*!/ var p1 = $("#content"); console.log(p1[0].innerHTML); /!*元素選擇器*!/ var p2 = $("p"); console.log(p2); /!*類選擇器*!/ var p3 = $(".content3"); console.log(p3); /!*通配符選擇器*!/ var all = $("*"); console.log(all); /!*復合選擇器:一次選取多個元素,多個元素之間用逗號分隔*!/ var selected = $("p#content,div.myDiv"); console.log(selected);*/ var zhang = { name:"zhangsan", age:"25" }; zhang.name;/*獲取name屬性*/ zhang.name = "zhangsi";/*修改name屬性*/ /*方法1:getAttribute*/ var p = document.getElementById("content"); var result = p.getAttribute("class");/*獲取class屬性*/ // p.setAttribute("class","lzw");/*修改class屬性*/ // console.log(result); /*方法2: 點符號法 .屬性名*/ var p = document.getElementsByClassName("first")[0]; var result = p.id; /*獲取一個屬性*/ p.id = "lzw";/*屬性修改*/ console.log(result); </script> </html>
結果圖:
id修改為LZW
屬性獲取
<html lang="en"> <head> <meta charset="UTF-8"> <title>屬性獲取</title> </head> <body> <img src="ccy.jpg" alt="陳傳印" id="img"> </body> <script> var img = document.getElementById("img"); /*方法1*/ var result = img.src; img.src = "zhangsan.jpg"; /*方法2*/ img.getAttribute("src"); img.setAttribute("src","zhangsan.jpg"); </script> </html>
jquery的就緒函數
<html lang="en"> <head> <meta charset="UTF-8"> <script src="../js/jquery-3.2.1.min.js"></script> <script> /*方法1: js的文檔就緒函數*/ /* window.onload = function () { document.getElementById("div1").style.display = "none"; $("#div1").hide();/!*hide():jquery提供的隱藏方法*!/ };*/ /*方法2: jquery文檔就緒函數*/ /* $(document).ready(function () { document.getElementById("div1").style.display = "none"; /!*和上面的代碼等效的jquery代碼如下:*!/ $("#div1").hide();/!*hide():jquery提供的隱藏方法*!/ /!*jquery通過把js的各種操作,封裝成一個個的方法,方便用戶使用!!*!/ });*/ /*方法3: jquery文檔就緒函數*/ $(function () { // document.getElementById("div1").style.display = "none"; $("#div1").hide();/*hide():jquery提供的隱藏方法*/ }); </script> <title>jquery的就緒函數</title> </head> <body> <div id="div1">山東科技大學</div> </body> </html>
結果圖:
文字被隱藏了
js文檔就緒函數和jquery的文檔就緒函數的區別
<html lang="en"> <head> <meta charset="UTF-8"> <script src="../js/jquery-3.2.1.min.js"></script> <script> /*window.onload = function () { document.getElementById("btn").onclick = function () { alert("青島理工大學!") } }; window.onload = function () { document.getElementById("btn").ondblclick = function () { alert("青島理工大學棒!") } };*/ $(function () { document.getElementById("btn").onclick = function () { console.log("青島理工大學!") } }); $(function () { document.getElementById("btn").ondblclick = function () { console.log("青島理工大學棒!") } }); /*window.onload不能重復添加,如果有多次,最後一次添加會覆蓋之前的*/ </script> <title>js文檔就緒函數和jquery的文檔就緒函數的區別</title> </head> <body> <button id="btn">青島理工大學</button> </body> </html>
結果圖:
js對象和jquery對象
\
<html lang="en"> <head> <meta charset="UTF-8"> <title>js對象和jquery對象</title> </head> <body> <div id="div1">山東科技大學1</div> <div id="div2">山東科技大學2</div> </body> <script src="../js/jquery-3.2.1.min.js"> </script> <script> /*js對象:原生DOM對象*/ var jsDom = document.getElementById("div1"); jsDom.style.display ="none"; jsDom.hide();/*js對象不能使用jquery的方法*/ /*js----->jquery對象*/ /*$(js對象):jquery對象的加工工廠,可以把js對象轉換成jquery對象*/ var newJsDom = $(jsDom); newJsDom.hide(); // jsDom.hide();/*js對象不能使用jquery的方法*/ var jqDom = $("#div2"); jqDom.style.display = "none";/*jquery對象不能使用js的方法*/ // jqDom.hide(); var newJquery = jqDom[0];/*jquery對象轉換成js對象*/ newJquery.style.display = "none"; // jqDom.style.display = "none";/*jquery對象不能使用js的方法*/ /*結論:js對象和jquery對象有本質的區別 * 方法不能互用*/ </script> </html>
結果圖:
多個js庫的沖突解決方案
<html lang="en"> <head> <meta charset="UTF-8"> <title>多個js庫的沖突解決方案(例子:同時調用prototype.js和jQuery)</title> </head> <body> <!--在Jquery中，$是JQuery的別名，所有使用$的地方也都可以使用JQuery來替換， 如$(‘#msg‘)等同於JQuery(‘#msg‘)的寫法。 然而，當我們引入多個js庫後，在另外一個js庫中也定義了$符號的話，那麽我們在使用$符號時就發生了沖突。 下面以引入兩個庫文件jquery.js和prototype.js為例來進行說明。 第一種情況：jquery.js在prototype.js之後進行引入,如： <script src="prototype.angular" type="text/javascript"/> <script src="jquery.angular" type="text/javascript"/> 在這種情況下,我們在自己的js代碼中如下寫的話： $(‘#msg‘).hide(); $永遠代表的是jquery中定義的$符號，也可以寫成JQuery(‘#msg‘).hide(); 第二種情況：jquery.js在prototype.js之前進行引入,如： <script src="jquery.angular" type="text/javascript"/> <script src="prototype.angular" type="text/javascript"/> 在這種情況下,我們在自己的js代碼中如下寫的話： $(‘#msg‘).hide(); $此時代表的prototype.js中定義的$符號，如果我們想要調用jquery.js中的工廠選擇函數功能的話， 只能用全稱寫法JQuery(‘#msg‘).hide(). 下面先介紹在第一種引入js庫文件順序的情況下，如何正確的使用不同的js庫中定義的$符號。 一.使用JQuery.noConflict() 該方法的作用就是讓Jquery放棄對$的所有權，將$的控制權交還給prototype.js,因為jquery.js是後引入的， 所以最後擁有$控制權的是jquery。 它的返回值是JQuery。當在代碼中調用了該 方法以後，我們就不可以使用$來調用jquery的方法了， 此時$就代表在prototype.js庫中定義的$了。 如下： JQuery.noConflict(); //此處不可以再寫成$(‘#msg‘).hide(),此時的$代表prototype.js中定義的$符號。 JQuey(‘#msg‘).hide(); 自此以後$就代表prototype.js中定義的$,jquery.js中的$無法再使用,只能使用jquery.js中$的全稱JQuery了。 二.自定義JQuery的別名 如果覺得第一種方法中使用了JQuery.noConflict()方法以後,只能使用JQuery全稱比較麻煩的話， 我們還可以為JQuery重定義別名。如下： var $j=JQuery.noConflict(); $j(‘#msg‘).hide();//此處$j就代表JQuery 自此以後$就代表prototype.js中定義的$,jquey.js中的$無法再使用,只能使用$j來作為jquey.js中JQuery的別名了。 三.使用語句塊，在語句塊中仍然使用jquery.js中定義的$，如下： JQuery.noConflict(); JQuery(document).ready(function($){ $(‘#msg‘).hide();//此時在整個ready事件的方法中使用的$都是jquery.js中定義的$. }); 或者使用如下語句塊： (function($){ ..... $(‘#msg‘).hide();//此時在這個語句塊中使用的都是jquery.js中定義的$. })(JQuery) 如果在第二種引入js庫文件順序的情況下,如何使用jquery.js中的$,我們還是可以使用上面介紹的語句塊的方法，--> <div id="div1">山東大學</div> </body> <script src="../js/jquery-3.2.1.min.js"></script> <script> /*方案1:放棄對$的控制權,以後凡是用jquery的地方不能私用$代替, * 必須寫jQuery*/ /*jQuery.noConflict(); jQuery(function () { alert("123"); });*/ /*方案2:放棄對$的控制權,但是另外定義一個特殊符號,來代替jQuery*/ /* var $j = jQuery.noConflict(); $j(function () { alert("123"); });*/ /*方案3:放棄$的控制權,可以在局部使用*/ /*jQuery.noConflict();/!*在就緒函數外不能使用*!/ jQuery(document).ready(function ($) { $("#div1").hide(); });*/ /*方案4:*/ jQuery.noConflict(); (function ($) { $("#div1").hide(); alert("123"); }(jQuery)); </script> </html>
結果圖:
層級關系選擇器
<html lang="en"> <head> <meta charset="UTF-8"> <title>層級關系選擇器</title> </head> <body> <ul id="university"> <li>煙臺大學 <ul> <li id="math">數學院</li> <li>法學院</li> <li>航海學院</li> </ul> </li> <li>青島理工大學</li> <li>山東科技大學</li> </ul> </body> <script src="../js/jquery-3.2.1.min.js"></script> <script> /*後代選擇器*/ // var result = $("#university li"); /*子代選擇器*/ // var result = $("#university > li"); /*相鄰選擇器*/ // var result = $("#math + li"); /*相鄰全部選擇器*/ var result = $("#math ~ li"); console.log(result); </script> </html>
結果圖:
JS學習記錄(jQuery)