鋒利的jquery總結

瓜瓜東西發表於2014-04-18
jQuery

一 第一章 簡介和簡單演示例子

1 官網地址和解釋

 http://jquery.com

分為壓縮和非壓縮，壓縮的小，適合做產品，非壓縮的適合開發

2 js自動載入程式方法

window.onload=function()

{

         alert(“hello”);

}

3 區別有無空格的樣式的定義元件$("div #a")和$("div#a")

有空格是其下面，沒有空格是其本身

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />

<title>1-1</title>

<!-- 引入 jQuery -->

<scriptsrc="../scripts/jquery-1.3.1.js"type="text/javascript"></script>

<scripttype="text/javascript">

//等待dom元素載入完畢.

$(document).ready(function(){

         alert("HelloWorld!");

         $("div#a").css("color","red");

         //$("div#a").css("color","red");

});

</script>

</head

<body>

 

<div id="a" >

hello

<div id="b">

demo

</div>

</div>

</body>

</html>

二 jquery強大選擇器（過濾器以：開頭）

1 常用選擇—5種--標籤（div），#id，.class, *(選擇所有),以逗號隔開

  //* 表示所有的

逗號表示多個或者關係的

2 層次過濾—4種—（父子）--空格(多個多層)，>（多個單層）,+（後單個同輩），~（多個後同輩），

空格：後代說有

>:子類 只是兒子部分

+ 選擇下一個 同輩份的元素（next），可以是不同元素

~ 多個後同輩

3 常用過濾—11種—（大小位置）--針對自--:first,:last,:not(常用選擇器)，:even,:odd,:eq(index),:lt(index),

:gt(index),:header(。。。例如h1，h2)，:animated,:focus

：odd:基數的,索引0開始的

：even：偶數的

很好理解的

4 內容過濾—4種—:contains()文字內容，:has()標籤，:empty沒有內容(文字算內容),:parent(有子元素的，包含文字text)

5 可見過濾—2種--:visible,hidden

6 屬性內容--8種-[id]（包含id屬性），[id=a],[id!=a](不等),[id^=a]開頭，$結尾，*（包含a即可）,~（以空格分隔的），[][][]多個都滿足條件的

1 例項：div[title~=bw]title包含，並且用空格分隔開來的

<scriptsrc="../scripts/jquery-1.3.1.js"type="text/javascript"></script>

<scripttype="text/javascript">

//等待dom元素載入完畢.

$(document).ready(function(){

         //alert("HelloWorld!");

         $("div[title~=bw]").css("color","red");

         //$("div:last").css("color","red");

         //$("div#a").css("color","red");

         //$("div#a").css("color","red");

});

</script>

</head

<body>

 

<div id="a" title="ukml" >

hello

<div id="b" title="bwok">

demo

</div>

</div>

7 子元素—4種—帶分隔空格:last-child,

first-child,only-child,nth-child(序號，基偶)

和層次過濾的最大區別是，他是子元素，而層次例如 :first

層次是本層同輩的，不好說，有空格就是下面，沒空格就是自己

$("div:nth-child(even)").css("color","red");

8 表單動作過濾—4種--:enabled,disabled,:checked(單選複選),:selected（下拉選單）

9 表單物件專門的—11種--:input,:text,:password,:radio,:checkbox,:submit,

:image,:reset,:button,:file,:hidden

三 dom操作查詢，建立，插入，刪除，複製，替換，包裹，操作屬性和操作樣式，遍歷,偏移量

1 查詢內容和屬性text(),attr()

2 建立

Var $li = $(“<li><li>”)

3 插入節點 8個

Append,appendTo,prepend,prepedTo,afterinsertAfter before,insertBefore

4 刪除3個

Remove,detch,empty

5 colne 複製 1個

6 替換 replacewith/replaceAll 方向不同

7 包裹3個wrapAll （只一個）wrap（符合的都包括），wrapInner（內部）

8 操作—獲取和設定 text,html,value(帶value屬性的)

9 樣式操作

A：獲取和設定attr(a),attr(a,b)

B：追加 addClass(a)同時包含了原來的樣式

10 遍歷節點—7個

Children，next，prev，siblings，parent，parents，closest

10 3個綜合方法

Offset(left,top),position(left,top),scrollTop,scrollLeft

相關文章