jQuery基礎_3

DOM:文檔處理
內部插入:父子級關係
$("a").append($("b"))把b插入到a中【a裏面的後面】
$("b").appendTo($("a"))把b插入到a中【a裏面的後面】
$("a").prepend($("b"))把b插入到a中【a裏面的前面】
$("b").prependTo($("a"))把b插入到a中【a裏面的前面】
這種方式插入以後必定是父子級關係
外部插入:兄弟級關係
$("a").after($("b"))把b插入到a的後面
$("b").insertAfter($("a"))把b插入到a的後面
$("a").before($("b"))把b插入到a的前面
$("b").insertBefore($("a"))把b插入到a的後面
這鐘方式插入以後必定是兄弟級關係

包裹
wrap:包裹$("a").wrap($("b")) 把a用b包裹起來【每一個元素都會被包裹】
unwrap:取消包裹
wrapAll:把全部的都包裹起來【全部元素都會被一個包裹】
wrapInner:內部包裹

替換
$("a").replaceWith($("b")) 把a用b替換
$("b").replaceAll($("a")) 用b替換a

刪除
empty():刪除內容
remove():刪除整個標籤

複製
clone():複製出一個如出一轍的元素
$("a").clone();

事件:
$(document),$(body)
加載事件:
$(document).ready(fn)
簡寫:$(function(){});
在工做中用的簡寫的方式比較多
注意:
js:window.onload = fn
jq:$(document).ready(fn)
js:把頁面上的DOM和資源加載完成以後執行
jq:把頁面上的DOM加載以後執行
jq來源js，可是超越js

事件切換
hover(over,out)
$("div").hover(function(){鼠標懸浮上去},fu4nction(){鼠標離開});

事件:
$(selector).click(fn);selector的點擊事件，會觸發fn
$(selector).dbclick(fn);雙擊事件
$(selector).focus();得到焦點觸發的事件
$(selector).blur;失去焦點觸發的事件
$(selector).change();發生改變
$(selector).mouseover();鼠標放上
$(selector).mouseout();鼠標離開
$(selector).mousedown();鼠標按下
$(selector).mouseup();鼠標擡起
$(selector).mousemove();鼠標移動
js的事件都帶有on,而jq事件都沒有on

事件處理:
bind綁定【重點】
bind("action",fn)【全部版本都支持】
若是多個事件;
bind({"mouseover":fn1,"mouseout":fn2});
unbind("action")解除綁定,若是沒有參數意味着所有解除綁定

on,off【重點】
$(select).on("click",function(){});綁定事件
$(select).off()解除綁定

one:綁定事件，只會執行一次

查找
$(selector).parent(); 查找父元素
$(selector).find(a);在selector中找a元素

動畫基本:show(時間,fn(){}) 顯示【在效果完成以後會執行fn】hide(時間,fn(){}) 隱藏【在效果完成以後會執行fn】toggle(時間,fn(){}) 切換【show和hide之間】滑動:slideDown(時間,fn(){}) 下滑顯示slideUp(時間,fn(){}) 收起隱藏slideToggle(時間,fn(){}) 切換效果【在slideDown和slideUp之間】淡入淡出:fadeIn(時間,fn(){}) 淡入fadeOut(時間,fn(){}) 淡出fadeToggle(時間,fn(){}) 切換效果【在fadeIn和fadeOut之間】fadeTo(時間,(0-1),fn(){})