JQuery複習

1、jQuery的優點
2、jQuery使用步驟和語法結構
3、jQuery獲取DOM節點信息的經常使用方法（內容、樣式、屬性）
4、jQuery選擇器的分類和示例
1.基礎選擇器
#id .class div *
並集 div,a,h1{}
交集 div.class{}
2.層次選擇器
後代 div div
直接子集 div>div
相鄰下一個兄弟 #id+.class{下一個兄弟而且知足.class}
後面的全部兄弟 #id~.class{全部的全部兄弟而且知足.class}
3.屬性選擇器
是否包含指定屬性 [屬性名]
判斷屬性值
= != *= ^= $=
4.過濾選擇器
1.位置：
:first :last
:nth-of-type(1)
:nth-child(1)
2.下標
:eq(0)
:lt(0) 小於
:gt(0) 大於
:even 下標0開始的偶數
:odd 下標0開始的奇數
3.取反
:not(選擇器) 不知足的被選中
4.內置屬性、狀態
:header h1~h6標籤
:animated 動畫元素

:focus 鼠標聚焦的元素
:visible 可見的
:hidden 隱藏的
5、jQuery對象與DOM對象的轉換方法

6、jQuery中的事件分類
1.鼠標事件
2.鍵盤事件
3.window事件 頁面加載 頁面滾動條 窗口位置拖動 窗口大小改變
4.表單事件 重置 提交 鼠標聚焦 鼠標離開焦點 內容改變
5.複合事件
hover 鼠標移上移出
toggle 鼠標連續點擊
toggleClass 來回修改class
6.動畫事件
show() hide() 顯示、隱藏
fadeIn() fadeOut() 透明度淡入淡出
slideUp() slideDown() 高度延伸、縮小
animate()動畫
7、jQuery節點操做的分類
1.DOM Core 核心語法，瀏覽器內核支持 js
2.HTML 節點，文檔結構
3.CSS 樣式，將來渲染
8、jQuery節點操做
1.樣式操做
addClass()
removeClass()
toggleClass(className) 自動判斷是否有次classname,有則remove，無則add
hasClass() boolean返回值
css() 樣式設置
2.內容操做
html() 獲取第一個節點的內容
html(content) 全部節點的內容改變
text() 全部節點的文本
text(content) 全部節點的文本改變
val() 獲取節點的value屬性值
attr("屬性名") 獲取指定屬性名的屬性值
attr("屬性名","屬性值") 改變屬性名的值爲指定值
3.節點操做
1.查找子元素 children("選擇器") find("選擇器")
div p a
$("div>p>a") $("div>p").find("a");
$("div>p").click(function(){
$(this).find("a").css("","");
})
2.添加子元素
append 添加到子元素中最後
prepend 添加到子元素中最前
3.添加同輩元素
after 本身的後面 A.after(B) A B
before 本身的前面
4.刪除元素
remove() 刪除自身 包含節點
empty() 清空內容
detach（） 刪除節點，保留事件
5.替換元素
replaceWith
replaceAll
6.複製元素
clone() ture 深度克隆 保留事件和子元素
false 淺度克隆 只複製本身的標籤和屬性
7.屬性操做
attr()
removeAttr("屬性名")
8.關係節點
children() 子元素
next() 下一個同輩
prev() 前一個同輩
slibings() 先後全部同輩
9.父級節點
parent() 直接父級
parents()
10.節點遍歷
$("選擇器").each(function(i,o){
i//下標
o//js Dom對象
$(o) jq對象
$(this) jq對象
})
$.each($("選擇器"),function(i,o){

})
9、CSS操做
語法 功能
css() 設置或返回匹配元素的樣式屬性
height([value]) 設置或返回匹配元素的高度
width([value]) 設置或返回匹配元素的寬度
offset([value]) 返回以像素爲單位的top和left座標。僅對可見元素有效
offsetParent( ) 返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被設置爲relative、absolute或fixed的元素
position( ) 返回第一個匹配元素相對於父元素的位置
scrollLeft([position]) 參數可選。設置或返回匹配元素相對滾動條左側的偏移
scrollTop([position]) 參數可選。設置或返回匹配元素相對滾動條頂