jQuery介紹 在說jQuery之前，先說一個概念吧，什麼是JavaScript框架庫，其實就是一個普通的js文件，裡面封裝了很多函數或者說封裝了很多相容的代碼；當然啦，jQuery就是眾多庫的一員，那麼我們為什麼要學習jQuery呢，那就講一下他的特點； 1. 很好的解決了不同瀏覽器之間的相容性 ...
jQuery介紹
在說jQuery之前，先說一個概念吧，什麼是JavaScript框架庫，其實就是一個普通的js文件，裡面封裝了很多函數或者說封裝了很多相容的代碼；當然啦，jQuery就是眾多庫的一員，那麼我們為什麼要學習jQuery呢，那就講一下他的特點；
- 很好的解決了不同瀏覽器之間的相容性問題(IE6+，FF 2+， Safari 3.0+， Opera 9.0+ ，Chrome) 只是針對js的相容性；
- 體積小 幾十kb 使用簡單方便 鏈式編程 隱式迭代 插件豐富 開源 免費；
jQuery 學習網站
jQuery官網： https://jquery.com/
jQuery線上API： https://api.jquery.com/
jQueryUI: https://jqueryui.com/
只是說還是不行下麵咱們還是通過一些實例體驗一下吧
jQuery快速體驗
下麵就用DOM和jQuery 的方式來實現一個小案例，體驗一下吧；
要求：點擊按鈕使按鈕下方div顯示出來並增加背景圖；
<-- 這是頁面結構 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" value="顯示效果" id="btn">
<div id="dv"></div>
</body>
</html><script>
// DOM方式
// 如果在頁面頂部加script標簽的話，需要用window.onload
window.onload = function () {
document.getElementById('btn').onclick = function () {
var div = document.getElementById('dv');
div.style.width = '200px';
div.style.height = '200px';
div.style.backgroundColor = 'yellow';
}
}
</script>// jQuery 方式
<script src="../jquery-1.12.2.js"></script>
<script>
// 如果使用jQuery就要先引入文件
$(function () {
$('btn').click(function () {
$('dv').css({'width': '200px', 'height': '200px', 'backgroundColor': 'red'});
});
});
</script>以上實例可以看出jQuery還是比DOM要簡潔一些的；要系統的學習，還是要從開始慢慢來，下麵怎們來說說jQuery中的頂級對象！
jQuery頂級對象
在講頂級對象之前，剛好回憶一下DOM和BOM中的頂級對象；
- DOM中的頂級對象 document ----- 頁面中的頂級對象
- BOM中的頂級對象 window ----- 瀏覽器中的頂級對象
- jQuery中的頂級對象 jQuery 或者 $
jQuery中的頁面載入事件
// 在DOM中頁面載入事件 onload 只能有一次，比如
window.onload = function () {
console.log('hello');
}
window.onload = function () {
console.log('world');
}
// 此時頁面只會輸出world，那這個肯定是我們不能接受的；// jQuery則不會，而且還不止一種方法
<script src="../jquery-1.12.2.js"></script>
<script>
// 第一種 與onload功能完全相同
// 頁面中所有的內容都載入完成後才觸發 標簽 圖片。。。
$(window).load(function () {
console.log('hello');
});
$(window).load(function () {
console.log('world');
});
// 此時頁面就會輸出 hello world
// 第二種 頁面中基本的標簽載入完畢後就可以觸發了
// 1. ready() 頁面載入事件的寫法都是 ---- 方法
$(document).ready(function () {
console.log('hello');
});
$(document).ready(function () {
console.log('world');
});
jQuery(function () {
console.log('hello');
});
jQuery(function () {
console.log('world');
});
$(function () {
console.log('hello');
});
$(function () {
console.log('world');
});
// 可以看出咱們前面說過jQuery中的頂級對象是jQuery 和 $
// 所以大多數人更偏向與最後一種使用方式
</script>DOM對象和jQuery對象互轉
DOM 對象轉Jquery對象操作方便,畢竟Jquery中方法都是封裝 好了的,而且相容問題解決的很好,代碼少,方便. Jquery對象轉DOM對象,因為Jquery中文件一直在更新，很多 東西都是隨著使用而進行封裝和升級,不太可能把所有dom中 用到的進行封裝,還有很多未知的相容問題沒有封裝進去,所以, 有的時候jquery中不能解決的問題,還需要原生的js代碼來解決, 所以,jquery對象有的時候需要轉成dom對象來進行操作。
<script src="../jquery-1.12.2.js"></script>
<script>
// 還是上面那個HTML的案例 咱們試一下轉換
// DOM操作按鈕，修改顏色
window.onload = function () {
// btn 就是DOM對象
var btn = document.getElementById('id');
// DOM對象轉換jQuery對象，只需要把DOM對象放在$(DOM對象) ---- 對象
$(btn).click(function () {
// 此時要通過$(this) 把this指向 jQuery
$(this).css('backgroundColor', 'red');
});
}
// jQuery對象轉DOM對象 有兩種方式 下麵咱們演示一下
$(function () {
// $('#btn') 是jQuery對象 通過 .get(0) 轉換為DOM對象
$('#btn').get(0).onclick = function () {
this.style.backgroundColor = 'red';
}
});
$(function () {
// $('#btn') 是jQuery對象 通過後面追加[0] 的方式轉換為DOM對象
$('#btn')[0].onclick = function () {
this.style.backgroundColor = 'red';
}
});
/*
* DOM對象和jQuery對象可以互轉
* DOM對象轉jQuery對象
* $(DOM對象) --- jQuery對象
* jQuery對象轉DOM對象
* $(#btn)[0] --- DOM對象
* $(#btn).get(0) ---- DOM對象
*/
</script>網頁開關燈案例
要求：點擊按鈕切換body的背景顏色；下麵咱們用DOM和jQuery的方式分別實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../jquery-1.12.2.js"></script>
<script>
// DOM 方式
window.onload = function () {
// 獲取按鈕，註冊點擊事件
document.getElementById('btn').onclick = function () {
// 判斷開燈還是關燈
if (this.value == '關燈') {
document.body.style.backgroundColor = 'black';
this.value = '開燈';
} else {
document.body.style.backgroundColor = 'white';
this.value = '關燈';
}
}
}
// jQuery 方式
$(function () {
$('#btn').click(function () {
// .val() --- 獲取按鈕對象的值
if ($(this).val() == '關燈') {
$('body').css('backgroundColor', 'black');
// .val('content') --- 設置按鈕的value值
$(this).val('開燈');
} else {
$('body').css('backgroundColor', 'white');
$(this).val('關燈');
}
});
});
</script>
</head>
<body>
<input type="button" value="關燈" id="btn">
</body>
</html>
