jQuery的文件引入、入口函數以及js對象和jquery對象之間的互相轉換
阿新 • • 發佈：2018-11-30
現象 length 一個 cti 編寫 3.3 方法 使用 ntb
JavaScript與jquery的區別
- JavaScript是一門編程語言，用來編寫客戶端瀏覽器腳本。
- jQuery是javascript的一個庫，包含多個可重用的函數，用來輔助簡化javascript開發
- jQuery能做的javascript都能做到，而JavaScript能做的事情，jQuery不一定能做到
jQuery文件的引入
<body> <div class="box"></div> <!--引包（引入jquery庫）--> <script type="text/javascript" src="jQuery3.3.1.js"></script> <script> //調用時使用jQuery與$是一樣的 //第一個參數是選擇器（類選擇器） console.log(jQuery(‘box‘)); console.log($(‘box‘)); </script>
jQuery的入口函數
<body> <!--Jquery框架封裝的時候模仿得失偽數組對象，有索引和length，以及n個方法--> <script type="text/javascript" src="jQuery3.3.1.js"></script> <script> //window.onload() 1 覆蓋現象。2 等待圖片資源加載完成之後才調用腳本代碼，用戶體驗極差 //入口函數 //返回的是jquery //jquery對象與js對象之間的轉換 console.log($(document)[0]); //等待文檔資源加載完成之後調用此方法： $(document).ready(function () { alert(1) }); //jquery簡便寫法入口函數，兩種入口函數沒有覆蓋現象 $(function () { alert(2) }); $(window).ready(function () { alert(3) //表示圖片資源加載完成之後 }) </script> </body>
jQuery對象與js對象的互相轉換
為什麽兩種對象要進行互相轉換，解釋在註釋裏！
<body> <div id="box"></div> <div id="box2"></div> <script type="text/javascript" src="jQuery3.3.1.js"></script> <script> $(function () { //轉換為jqery對象 js對象更加希望轉換成jquery對象操作簡便的dom //轉換為js對象的原因：因為js是包含jquery，jquery只是封裝了DOM，事件，ajax，動畫。 //假如說jquery對象要使用的方法不在封裝裏面，只能轉換成js對象 //js對象與jquery對象一定要分清除，對應對象只能調用對應的方法，不能混淆 //獲取jquery對象 console.log($(‘#box2‘)); //獲取js對象 var box = document.getElementById(‘box2‘); console.log(box); //jquery對象轉換成js對象 console.log($(‘#box2‘)[0]); //js對象轉換為jquery,直接將js對象傳到$()中 console.log($(box)); }) </script> </body>
jQuery的文件引入、入口函數以及js對象和jquery對象之間的互相轉換