入口函數的四種寫法
推薦使用第三種
//第一種
$(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>