jQuery的檔案引入、入口函式以及js物件和jquery物件之間的互相轉換
阿新 • • 發佈：2018-11-30
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>