Jquery選擇器
$(document).ready(function(){})
$(function(){})
如果獲取的對象是jQuery對象，那么在變量前面加上$,例如：var $variable=jQuery對象
選擇器
1， 判斷頁面是否存在某元素：if($(“#tt”).length>0){} 或者if($(“#tt”)[0]){};
2， 基本選擇器
$(“#test”) 選擇id為test的元素 |
$(“.test”)選擇class為test的所有元素 |
$(“p”)選擇所有的<p>標簽 |
$(“*”)選擇頁面上的所有元素 |
$(“span ,#two”)選擇頁面上所有的<span>標簽和id為two的元素 |
3， 層次選擇器
$(“div span”)表示選取div中的所有的span元素 |
$(“parent>children”)選取parent下所有children的子元素 |
$(‘.one+span')選取class為one的下一個span元素 |
$(‘.one~div')選取class為one的后面的所有的div兄弟元素 |
$(‘.one+span')等價于$(“.one”).next(“span”)
$(‘one~div')等價于$(“.one”).nextAll(“div”)
$(“.one”).siblings(“div”) 選取class為one的所有的兄弟元素div，無論前后
4， 過濾選擇器
（1）基本的過濾器
$(“div:first”)選取所有div元素中第一個div元素 |
$(“div:last”)選取所有div元素最后一個div元素 |
$(“input:not(.myClass)”)選取class不是myClass的input元素 |
$(“input:even”)選取索引是偶數(shù)的input元素 |
$(“input:odd”)選取索引時奇數(shù)的input元素 |
$(“input:eq(1)”)選取索引等于1的input元素 |
$(“input:gt(1)”)選取索引大于1的input元素（大于1不包括1） |
$(“input:lt(1)”)選取索引小于1的input元素 （小于1不包括1） |
$(“:header”)選取網(wǎng)頁中所有的h1、h2…… |
$(“div:animated”)選取正在執(zhí)行動畫的div元素 |
（2）內容過濾器
$(“div:contains(‘我')”)選取含有文字“我”的div元素 |
$(“div:empty”)選取不包含子元素（包含文本元素）的div空元素 |
$(“div:has(p)”)選取含有p元素的div元素 |
$(“div:parent”)選取擁有子元素（包含文本元素）的div元素 |
（3）可見性過濾選擇器
$(“:hidden”)選取所有不可見的元素。包括<input type=”hidden”/>,<div style=”display:none;”>和<div style=”visibility:hidden;”>等元素。如果只想選取<input>元素，可以使用$(“input:hidden”) |
$(“div:visible”)選取所有可見的<div>元素 |
（4）屬性過濾選擇器
$(“div[id]”)選取擁有屬性id的元素 |
$(“div[title=test]”)選取屬性title為test的div元素 |
$(“div[title!=test]”)選取屬性title不是test的div元素（沒有屬性title的div也會被選取） |
$(“div[title^=test]”)選取屬性title以test開始的div元素 |
$(“div[title$=test]”)選取屬性title以test結束的div元素 |
$(“div[title*=test]”)選取屬性title包含test的div元素 |
$(“div[id][title$='test']”)選取擁有屬性id，并且屬性title以test結束的div元素 |
（5）子元素過濾選擇器
:eq(index)只匹配一個元素，而:nth-child將為每一個父元素匹配子元素，并且:nth-child(index)的index是從1開始的，而:eq(index)是從0算起的 |
:first只返回單個元素，而:first-child選擇符將為每個父元素匹配第一個子元素。 例如$(“ul li:first-child”)選取每個ul中第一個li元素 |
:last只返回單個元素，而:last-child選擇符將為每個父元素匹配最后一個子元素 |
$(“ul li:only-child”)在ul中選取是唯一子元素的li元素 |
:nth-child()選擇器是很常用的子元素過濾選擇器，詳細功能如下：
1.:nth-child(even)能選取每個父元素下的索引值是偶數(shù)的元素
2. :nth-child(odd)能選取每個父元素下的索引值的奇數(shù)的元素
3.:nth-child(2)能選取每個父元素下索引值等于2的元素
4.nth-child(3n)能選取每個父元素下的索引值是3的倍數(shù)的元素(n從0開始)
5.nth-child(3n+1)能選取每個父元素下的索引值是（3n+1）的元素（n從0開始）
（6）表單對象屬性過濾選擇器
$(“#form1 :enabled”)選取id為form1的表單內的所有可用元素 |
$(“#form2 :disabled”)選取id為“form2”的表單內的所有不可用元素 |
$(“input:checked”)選取所有被選中的input元素 |
$(“select :selected”.text())選取所有被選中的選項元素 |
5．表單選擇器
$(“:input”)選取所有input、textarea、select和button元素 |
$(“:text”)選取所有的單行文本框 |
$(“:password”)選取所有的密碼框 |
$(“:radio”)選取所有的單選框 |
$(“:checkbox”)選取所有的復選框 |
$(“:submit”)選取所有的提交按鈕 |
$(“:image”)選取所有的圖像按鈕 |
$(“:reset”)選取所有的重置按鈕 |
$(“:button”)選取所有的按鈕 |
$(“:file”)選取所有的上傳域 |
$(“:hidden”)選取所有不可見元素 |
Dom操作
Dom core（核心）、HTML-DOM和CSS-DOM
1. 插入節(jié)點的方法
append() | $(“p”).append(“<b>你</b>”) <p>test <b>你</b></p> |
appendTo() | $(“<b>你</b>”).appendTo(“p”) <p>test <b>你</b></p> |
prepend() | $(“p”). prepend ( “<b>你</b>”) <p><b>你</b>test </p> |
prependTo() | $(“p”). prependTo ( “<b>你</b>”) <p><b>你</b>test </p> |
After() | $(“p”). after ( “<b>你</b>”) <p>test </p><b>你</b> |
insertAfter() | $( “<b>你</b>”). insertAfter (“p”) <p>test </p><b>你</b> |
Before() | $(“p”). before ( “<b>你</b>”) <b>你</b><p>test </p> |
insertBefore() | $( “<b>你</b>”). insertBefore (“p”) <b>你</b><p>test </p> |
2. 刪除節(jié)點
Remove()方法 empty()清空節(jié)點
3. 復制節(jié)點
Clone() $(this).clone(true).appendTo(“body”)
復制元素的同時復制元素中所綁定的事件
4. 替換節(jié)點
replaceWith():$(“p”).replaceWith(“<a>test</a>”);
replaceAll():$(“<a>test</a>”). replaceAll (“p”);
5. 包裹節(jié)點
Wrap() | $(“strong”).wrap(“<b></b>”);<b><strong>ssss</strong></b> |
wrapAll() | $(“strong”). wrapAll (“<b></b>”);<b><strong>ssss</strong> <strong>ssss</strong></b> |
wrapInner() | $(“strong”).wrapInner (<b></b>”);<strong><b>ssss</b></strong> |
6. 屬性操作
Attr(); 設置多個$(“p”).attr({“title”:”dd”,”name”:”myp”})
removeAttr()移除屬性
7. 樣式操作
獲取和設置樣式 | Attr() |
追加樣式 | addClass() |
移除樣式 | removeClass() removeClass(“one two”) |
切換樣式 | toggle()主要控制行為上的重復切換 toggleClass()樣式上的重復切換 |
判斷是否含有某個樣式 | hasClass()等價于is(“.one”) |
8.設置和獲取html、文本和值
html() | 讀取或者設置某個元素中的HTML內容 |
text() | 讀取或者設置某個元素中文本內容 |
val() | 設置和獲取元素的值defaultValue初始值 |
9.遍歷節(jié)點
Children() | 取得匹配元素的子元素的集合，只考慮子元素不考慮后代元素 |
Next() | 取得匹配元素后面緊鄰的同輩元素 |
Prev() | 取得匹配元素前面緊鄰的同輩元素 |
Siblings() | 取得匹配元素前后所有的同輩元素 |
Closest() | 取得最近的匹配元素 |
還有很多遍歷方法：find(),filter(),nextAll(),prevAll(),parent(),parents()等 | |
CSS-DOM操作
獲取樣式 | $(“.one”).css(“color”) |
設置樣式 | $(“.one”).css(“color”,”red”) $(“.one”).css({“opacity”:”0.5”,”background-color”:”blue”}) |
Height() | $(“.one”).height(),設置：$(“.one”).height(“20px”) |
Width() | $(“.one”).width(),設置：$(“.one”).width(“200px”) |
Offset() | 獲取元素在當前視窗的相對偏移，包括top和left |
Position() | 獲取元素相對于最近的一個position樣式屬性設置為relative或者absolute的祖父節(jié)點的相對偏移，它返回的對象也包括兩個屬性，即top和left |
ScrollTop() | 獲取和設置元素的滾動條距頂端的距離 |
ScrollLeft() | 獲取和設置元素的滾動條距左側的距離 |
事件和動畫
事件
（1） 綁定事件
bind(type[,data],fn);
參數(shù)：type：事件類型，也可以自定義名稱
data:作為event.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象
fn：用來綁定的處理函數(shù)
綁定多個事件類型
Ex：$(“div”).bind(“mouseover mouseout”,function(){
$(this).toggleClass(“over”);
})
（2） 合成事件
Hover(enter,leave);
用于模擬光標懸停事件。當光標移動到元素上時，會觸發(fā)指定的第一個函數(shù)（enter）；當光標移除這個元素時，會觸發(fā)指定的第二個函數(shù)（leave）
toggle(fn1,fn2,….fnN);
用戶模擬鼠標連續(xù)單擊事件。第一次單擊元素，觸發(fā)指定的第一個函數(shù)；當在次單擊同一個元素時，則觸發(fā)指定的第二個函數(shù)（fn2）；如果有更多的函數(shù)，則依次觸發(fā)，知道最后一個。
（3） 冒泡事件
假設網(wǎng)頁上有2個元素，其中一個元素嵌套在另一個元素里，并且都被綁定了click事件，同時body元素也綁定了click事件，當點擊最里面元素的事件時，同時其它事件也會觸發(fā)。從內向外
停止事件冒泡的方法：stopPropagation()
Ex:$(‘span').bind(“click”,function(event){
Var txt=$().html()+”<p>內層span元素被單擊</p>”;
$(‘#msg').html(txt);
Event.stopPropagation(); 停止事件冒泡
})
停止表單默認提交：event.preventDefault()==return false;
（4） 移除事件
Unbind([type][,data]);
Type:事件類型
Data：將要移除的函數(shù)
（5） 觸發(fā)一次函數(shù)
One（type，[data],fn）;
事件觸發(fā)后立即解除
動畫
Show() | Slow:600毫秒、normal：400毫秒、fast：200毫秒 |
Hide() | |
Fadeln() | 在指定的一段時間內降低元素的不透明度，直到元素完全消失 |
fadeout() | 和上相反 |
slideUp() | 與下相反 |
slideDown() | 元素將由上之下延伸顯示 |
自定義動畫animate
語法結構：animate(params,speed,callback);
參數(shù)說明如下：
1． Params：一個包含樣式屬性及值的映射，比如{property1：“value1”，property2:”value2”,….}
2． Speed:速度參數(shù)，可選。
Callback：在動畫完成時執(zhí)行的函數(shù)，可選
就暫時先添加這點吧，以后再慢慢完善吧！
新聞熱點
疑難解答
