鋒利的jQuery-----讀書筆記
阿新 • • 發佈：2017-08-20
head 窗口 行為 contains fse onf 清空 時間處理 oct
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鋒利的jquery</title>
<script type="text/javascript" src=‘js/jquery-2.2.1.min.js‘></script>
<style type="text/css">
body{
background-color: gray;
}
</style>
</head>
<body>
<a href="#">提交</a>
<script type="text/javascript">
/*
1.2.2、jquery優勢
1、輕量級
2、強大的選擇器
3、出色的DOM操作封裝
4、可靠的時間處理機制
5、完善的Ajax
6、不可汙染頂級變量
7、出色的瀏覽器兼容性
8、鏈式操作方式
9、隱式叠代
10、行為層與結構層的分離
11、豐富的插件支持
12、完善的文檔
13、開源
1.3.2
ready：等待DOM文檔加載完畢
onload ： 等待網頁所有內容加載完畢後，包括圖片
1.4.2DOM對象jQuery對象轉換
var $cr = $("#cr");//jQuery對象
var cr = $cr.get(0);// DOM對象
var $cr = $(cr);
//平時使用的jQuery函數都是$()函數制造出來的，$()是JQuery的一個制造函數
1、認識jQuery
1.5解決jQuery和其他庫的沖突
jQuery.noConfict();
//將變量$的控制權移交給其他的Javascript庫
2、jquery選擇器
a、基本選擇器 p
b、層次選擇器 p~span
c、過濾選擇器
基本過濾選擇器：first
內容過濾選擇器：contains
可見性過濾選擇器：hidden
屬性過濾選擇器：attr=
子元素過濾選擇器：first-child
表單對象過濾選擇器：select：selected
3、DOM操作
1、document.forms;//提供了一個forms對象
2、刪除節點
detach：將所有匹配的元素從DOM中去除，
這個方法不會把匹配的元素從jQuery對象中去除，
因而可以在將來再使用的時候用到這些匹配的元素,
所有綁定的事件、附加的數據等都會保留下來
empty：清空所有後代節點
remove：刪除節點
3、wrapAll包在外面
wrapInner包在裏面
4、遍歷節點
childent();
next();
prev();
siblings();
closest();//獲取最近的元素
5、offset當前窗口的相對偏移量
scrollTop獲取元素的滾動條到頂端的距離
4、jQuery中的時間和動畫
1、時間綁定bind
2、合成時間toggle
3、事件冒泡：事件會像水泡一樣不斷向上直至頂端
同時給a和body綁定不同事件
$("a").click(function(){
console.log("a");
})
$("body").click(function(){
console.log("body");
})
$(window).click(function(){
console.log("window");
})
//點擊小範圍的同時會觸發大範圍的事件
*/
</script>
</body>
</html>
鋒利的jQuery-----讀書筆記