jQuery學習筆記-01
1.jq獲取元素設定樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> </head> <body> <div class="box"></div> <div id="box"></div> </body> </html>
2.入口函式原生會後面的覆蓋前面的jq會依次執行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq入口函式</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> /* window.onload=function(){ alert(1); } window.onload=function(){ alert(2);//2覆蓋1，多個入口函式原生的後面會覆蓋前面的,jq會依次執行 } */ </script> <script type="text/javascript"> $(function(){ //原生js和jq入口函式的載入模式不同 //原生會等到dom元素載入完畢，並且圖片也載入完畢才執行 //jq不會等到圖片載入 alert(1); }) $(function(){ alert(2); }) </script> </head> <body> </body> </html>
3.入口函式寫法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多種寫法</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){//第一種 alert(1); }); jQuery(document).ready(function(){//第二種 alert(2); }); $(function(){//第三種推薦 alert(3); }); jQuery(function(){//第四種 alert(4); }); </script> </head> <body> </body> </html>
4.jq$符號衝突問題
//$符號衝突 //1.釋放$使用權 //釋放操作必須在jq程式碼之前，釋放後不可使用$，改用jQuery //jQuery.noConflict(); //2.自定義一個訪問符號 //var nj=jQuery.noConflict();
5.jq物件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq物件</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script> $(function(){ console.log($('div')); //1.什麼是jq物件 //jq物件是一個偽陣列 //2.什麼是偽陣列 //有0到length-1屬性，並且有length屬性 }) </script> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
6.靜態方法和例項
<script type="text/javascript"> //1.靜態方法直接新增給類 //2.例項方法是直接新增給類的原型的 function Aclass(){ } Aclass.staticMethod=function(){ alert('靜態方法'); } Aclass.staticMethod(); Aclass.prototype.instanceMethod=function(){ alert('例項方法'); } var a=new Aclass();//建立一個例項 a.instanceMethod();//通過例項呼叫 </script>