|
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”)選取索引是偶數的input元素 | $(“input:odd”)選取索引時奇數的input元素 | $(“input:eq(1)”)選取索引等于1的input元素 | $(“input:gt(1)”)選取索引大于1的input元素（大于1不包括1） | $(“input:lt(1)”)選取索引小于1的input元素 （小于1不包括1） | $(“:header”)選取網頁中所有的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也會被選?。?/span> | $(“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)能選取每個父元素下的索引值是偶數的元素 2. :nth-child(odd)能選取每個父元素下的索引值的奇數的元素 3.:nth-child(2)能選取每個父元素下索引值等于2的元素 4.nth-child(3n)能選取每個父元素下的索引值是3的倍數的元素(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); 參數：type：事件類型，也可以自定義名稱 data:作為event.data屬性值傳遞給事件對象的額外數據對象 fn：用來綁定的處理函數 綁定多個事件類型 Ex：$(“div”).bind(“mouseover mouseout”,function(){ $(this).toggleClass(“over”); }) （2） 合成事件 Hover(enter,leave); 用于模擬光標懸停事件。當光標移動到元素上時，會觸發(fā)指定的第一個函數（enter）；當光標移除這個元素時，會觸發(fā)指定的第二個函數（leave） toggle(fn1,fn2,….fnN); 用戶模擬鼠標連續(xù)單擊事件。第一次單擊元素，觸發(fā)指定的第一個函數；當在次單擊同一個元素時，則觸發(fā)指定的第二個函數（fn2）；如果有更多的函數，則依次觸發(fā)，知道最后一個。 （3） 冒泡事件 假設網頁上有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：將要移除的函數 （5） 觸發(fā)一次函數 One（type，[data],fn）; 事件觸發(fā)后立即解除 動畫 Show() | Slow:600毫秒、normal：400毫秒、fast：200毫秒 | Hide() | Fadeln() | 在指定的一段時間內降低元素的不透明度，直到元素完全消失 | fadeout() | 和上相反 | slideUp() | 與下相反 | slideDown() | 元素將由上之下延伸顯示 |
自定義動畫animate 語法結構：animate(params,speed,callback); 參數說明如下： 1． Params：一個包含樣式屬性及值的映射，比如{property1：“value1”，property2:”value2”,….} 2． Speed:速度參數，可選。 Callback：在動畫完成時執(zhí)行的函數，可選 就暫時先添加這點吧，以后再慢慢完善吧！
|
