自學jQuery必看的基礎知識總結

入口函數的四種寫法

推薦使用第三種

 //第一種
$(document).ready(function(){
   alert("我是第一個");
});
//第二種
jQuery(document).ready(function(){
  alert("我是第二個");
 });
//第三種
$(function(){
  alert("我是第三個");
});
//第四種
jQuery(function(){
  alert("我是第四個");
});

解決jQuery衝突問題

衝突問題描述

假如存在一個js文件,命名爲text.js,其內容如下

var $ = 1;

將該文件引入使用了jQuery的html文件中

<script src="../jquery.js"></script>
<script src="../text.js"></script>
<script>  
    $(function(){
    alert("我是第一個");
  });
</script>

以上代碼再瀏覽器運行後並不會出現彈出框,這是因爲是順序執行的,即 text.js 中的 $符號 覆蓋了 jquery.js 中的 $符號

//換個位置
<script src="../text.js"></script>
<script src="../jquery.js"></script>
<script>  
    $(function(){
    alert("我是第一個");
  });
</script>

以上代碼運行瀏覽器能顯示彈出框

解決衝突方法一-------釋放$的使用權

注意:
(1)釋放操作必須在編寫其他jQuery代碼之前。
(2)釋放之後就不能再使用$符號,改爲使用jQuery

<script src="../jquery.js"></script>
<script src="../text.js"></script>
<script>  
  //1、釋放$的使用權
  jQuery.noConflict();
  //使用jQuery
  jQuery(function(){
    alert("我是第一個");
  });

</script>

解決衝突方法二------自定義一個訪問符號

注意事項同方法一

<script src="../jquery.js"></script>
<script src="../text.js"></script>
<script>  
  //2、自定義一個訪問符號
  var jq = jQuery.noConflict();
  jq(function(){
    alert("我是第一個");
  });
</script>

jQuery的核心函數

$() 就是jQuery的核心函數

jQuery接收的幾種參數

(1)接收一個函數
(2)接收一個字符串:可以是字符串選擇器(返回一個jQuery對象,對象中保存了找到的DOM元素);可以是一個代碼片段(返回一個jQuery對象,對象中保存了創建的DOM元素)
(3)接收一個DOM元素會被包裝成一個jQuery對象返回

<body>
  <div class="box1"></div>
  <div id="box2"></div>
  <p>ppppp</p>
</body>
<script src="../jquery.js"></script>
<script>  
  //1、接收一個函數
  $(function(){
    alert("1");
  })

  $(function(){
    //2、接收一個字符串
      //2.1 接收一個字符串選擇器
      //返回一個jQuery對象,對象中保存了找到的DOM元素
      var box1 = $(".box1");
      var box2 = $("#box2");
      console.log(box1);
      console.log(box2);
      //2.2 接收一個代碼片段
      //返回一個jQuery對象,對象中保存了創建的DOM元素
      var $span = $("<span>hahahah</span>");
      console.log($span);
      //將創建的DOM元素追加到box2中
      box2.append($span);
      
    //3 接收一個DOM元素
    //會被包裝成一個jQuery對象返回
    var p = document.getElementsByTagName("p")[0];
    console.log(p);
    var $p = $(p);
    console.log($p);     
  })
</script>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章