整理版jq 複習貼子

1絕對定位(abs)與相對定位(relative)

區別是相對定位參照本身的位置進行移動(固然須要設置top left這些生效)而且原來的位置保留着 偏移後會把 其它的層遮罩住 絕對定位就是的參照位置就不像相對那樣是本身了 至因而哪一個 就看它的上級或上上級有沒有定位了 也就是有沒有position:relative 或position:fixed 等吧 當要絕對定位的層設好要參照位置的層後 就能夠用top left這些來定位置了 若是它的上級或上上級都沒定位的話就 會根據body的位置來定位了 還有最後一點絕對定位是不佔位置的 ctrl + shift + delete 清除瀏覽器緩存

 

 

2項目開發中提交表單有如下三種方法:

第一種：用form自帶屬性action提交

第二種：用jquery提交：$("#formid").submit();

第三種：用ajax提交：

3接收表單數據

但若是form表單中數據不少時，不可能一一列出，只須要用$('#yourformid').serialize()就能夠了

 

jq筆記

載入 至關於onload

jq 選擇器

jq 子選擇和後代選擇器的區別

1 寫法不樣

後代選擇器的標識爲：空格 如：ul li{width:150px;} 【ul和li之間用空格隔開】 子選擇器的標識爲：> 如：ul>li{width:150px;}【ul和li之間用>隔開】

 

2 功能不同

後代選擇器是選擇ul包圍的 因此元素中的全部li元素，包括子元素、孫元素、曾孫元素等等等。 子選擇器僅僅選擇ul包圍的 子元素中的 li元素，不包括孫元素、曾孫元素等等等。

3 兼容性不同

後代選擇器是全部瀏覽器都兼容的均可使用。 子選擇器在IE六、IE七、IE8中則是不被支持的選擇器，各自bug！

jq 過濾選擇器

1 基本過濾器

:first 寫法:$("p:first")第一個<p>元素 :last $("p:last")最後一個<p>元素 :even $("tr:even")全部偶數<tr>元素 :odd $("tr:odd")全部奇數<tr>元素 :eq(index) $("ul li:eq(3)") 列表中的第四個元素(index從0開始) :gt(no) $("ul li:gt(3)") 列出index大於3的元素 :lt(no) $("ul li:lt(3)") 列出index小於3的元素 :not(selector) $("input:not(:empty)") 全部不爲空的input元素

 

2 可見性過濾選擇器

:hidden $("p:hidden") 全部隱藏的<p>元素 :visible $("table:visible") 全部可見的表格

3 關係選擇器

1 prev()

 

選擇前面的緊挨的同輩元素

2 prevall()

 

選擇前面的全部的同輩元素

3 next()

選擇box 的後面的同輩元素

4 nextall()

選擇box 的全部的後面元素

5 parent()

選擇box 的父元素

6 children()

選擇box 的全部子元素

7 siblings()

選擇box的同級元素

8 find()

搜索某個元素的全部的子孫元素

 

jq實現操做網頁

1 顯示或隱藏網頁內容

語法:$(selector).show(speed,callback);//顯示隱藏的函數 $(selector).hide(speed,callback);//隱藏函數 $(selector).toggle(speed,callback);//顯示與隱藏能自動切換 再也不是單一的切換顯示 toggle()函數用於切換頁面元素的可見狀態 speed設置顯示的速度 slow,fast或毫秒 callback設置動做完成後所執行的函數

2實現幻燈片式淡入淡出

fadeOut()淡出 fadeIn()淡入

3頁面滑動隱藏

** 滑動隱藏效果經過'slideUp()'函數實現** 滑動顯示效果經過'slideDown()'函數實現

 

 

jq 動畫animate 方法

基本語法

語法:$(selector).animate({params},speed,callback); 必須的params參數定義造成動畫的css屬性。 可選的speed參數規定效果的時長 它能夠取如下值:"slow","last"或毫秒. 可選的callback參數是動畫完成以後所執行的函數名稱.

jq 進行獲取html 操做

三個簡單的用於dom操做的jq 方法

1 text()

text()-設置或返回所選元素的文本內容

2 html()

設置或返回所選元素的內容(包括html標記 也就是html代碼)

3 val()

設置或返回表單字段的值

label 的使用

label標籤單獨使用沒有什麼意義 要結合着input標籤使用纔有意義

 

獲取當前元素的索引

1 index()函數可獲取當前元素的索引值 index()函數返回指定元素相對於其餘指定元素的index位置 這些元素可經過 jquery選擇器或dom元素來指定

插入節點元素

1 append() 函數

1 append()函數 (將新建立的節點元素插入到某個文檔) 語法:$(selector).append(content); (content參數表示要插入的內容 可包含html標籤)

2 appendTo() 函數

2 appendTo()函數在被選元素的結尾(仍然在內部)插入指定內容 語法:$(content).appendTo(selector); (selector參數表示把內容追加到哪一個元素上)

3 prepend()

3 prepend()函數(將新建立的節點元素插入某個文檔) 語法:$(selector).prepend(content);

 

4 prependTo()

4 prependTo()函數在被元素的結尾(仍然在內部)插入指定內容 語法:$(content).prependTo(selector)

5 after()

5 after()函數在被選元素後插入指定的內容 語法:$(selector).after(content)

6 insertAfter()

6 insertAfter()函數在被選元素以後插入HTML標記或已有的元素 語法:$(content).insertAfter(selector)

 

7 before()

7 before()函數在被選元素以後插入html標記或者已有的元素 語法:$(selector).before(content)

8 insertBefore()

8 insertBefore()函數在被選元素以前html標記或已有的元素 語法:$(content).insertBefore(selector);

複製節點元素

clone()函數可完成節點元素複製功能 $(this).clone(true).appendTo("ul") 能夠往復制後的節點追加內容的添加 例如經過點擊複製追加添加內容

替換節點元素

replaceWith()函數用指定的HTML內容或元素替換被選元素 $(selector).replaceWith(content)

刪除節點元素

remove()函數移除被選元素 包括它全部的文本和子節點 empty()函數從被選元素移除全部內容 包括它全部的文本和子節點 $(selector).empty()//這樣寫就行

jq 常見dom 操做 方法

1 addclass()

addClass() 向匹配的元素指定的類名

2 attr()

attr() 設置返回匹配元素的屬性和值//經過匿名函數 function(){}來進行指定參數設置值

3 hasclass()

hasClass() 檢查匹配的元素是否擁有指定的類

 

4 html()

html() 設置或返回匹配的元素集合中的html內容

5 removeattr()

removeAttr() 從全部匹配的元素中移除指定的屬性

 

6 removeclass()

removeClass() 從全部匹配的元素中刪除所有或者指定的類

7 toggleclass()

toggleclass() 從匹配的元素中添加或刪除一個類

8 val()

val() 設置或返回匹配元素的值input 標籤

jq 操做css 經常使用函數

1 css()

css() 設置或返回匹配元素的樣式屬性

2 height()

height() 設置或返回匹配元素的高度

3 offset()

offset() 返回第一個匹配元素相對於文檔的位置

4 offsetParent()

返回最近的定位祖先元素

5 position()

position() 返回第一個匹配元素相對於父元素的位置

6 width()

width() 設置或返回匹配元素的寬度

 

1絕對定位(abs)與相對定位(relative)

區別是相對定位參照本身的位置進行移動(固然須要設置top left這些生效)而且原來的位置保留着 偏移後會把 其它的層遮罩住 絕對定位就是的參照位置就不像相對那樣是本身了 至因而哪一個 就看它的上級或上上級有沒有定位了 也就是有沒有position:relative 或position:fixed 等吧 當要絕對定位的層設好要參照位置的層後 就能夠用top left這些來定位置了 若是它的上級或上上級都沒定位的話就 會根據body的位置來定位了 還有最後一點絕對定位是不佔位置的 ctrl + shift + delete 清除瀏覽器緩存

 

 

2項目開發中提交表單有如下三種方法:

第一種：用form自帶屬性action提交

第二種：用jquery提交：$("#formid").submit();

第三種：用ajax提交：

3接收表單數據

但若是form表單中數據不少時，不可能一一列出，只須要用$('#yourformid').serialize()就能夠了

 

jq筆記

載入 至關於onload

jq 選擇器

jq 子選擇和後代選擇器的區別

1 寫法不樣

後代選擇器的標識爲：空格 如：ul li{width:150px;} 【ul和li之間用空格隔開】 子選擇器的標識爲：> 如：ul>li{width:150px;}【ul和li之間用>隔開】

 

2 功能不同

後代選擇器是選擇ul包圍的 因此元素中的全部li元素，包括子元素、孫元素、曾孫元素等等等。 子選擇器僅僅選擇ul包圍的 子元素中的 li元素，不包括孫元素、曾孫元素等等等。

3 兼容性不同

後代選擇器是全部瀏覽器都兼容的均可使用。 子選擇器在IE六、IE七、IE8中則是不被支持的選擇器，各自bug！

jq 過濾選擇器

1 基本過濾器

:first 寫法:$("p:first")第一個<p>元素 :last $("p:last")最後一個<p>元素 :even $("tr:even")全部偶數<tr>元素 :odd $("tr:odd")全部奇數<tr>元素 :eq(index) $("ul li:eq(3)") 列表中的第四個元素(index從0開始) :gt(no) $("ul li:gt(3)") 列出index大於3的元素 :lt(no) $("ul li:lt(3)") 列出index小於3的元素 :not(selector) $("input:not(:empty)") 全部不爲空的input元素

 

2 可見性過濾選擇器

:hidden $("p:hidden") 全部隱藏的<p>元素 :visible $("table:visible") 全部可見的表格

3 關係選擇器

1 prev()

 

選擇前面的緊挨的同輩元素

2 prevall()

 

選擇前面的全部的同輩元素

3 next()

選擇box 的後面的同輩元素

4 nextall()

選擇box 的全部的後面元素

5 parent()

選擇box 的父元素

6 children()

選擇box 的全部子元素

7 siblings()

選擇box的同級元素

8 find()

搜索某個元素的全部的子孫元素

 

jq實現操做網頁

1 顯示或隱藏網頁內容

語法:$(selector).show(speed,callback);//顯示隱藏的函數 $(selector).hide(speed,callback);//隱藏函數 $(selector).toggle(speed,callback);//顯示與隱藏能自動切換 再也不是單一的切換顯示 toggle()函數用於切換頁面元素的可見狀態 speed設置顯示的速度 slow,fast或毫秒 callback設置動做完成後所執行的函數

2實現幻燈片式淡入淡出

fadeOut()淡出 fadeIn()淡入

3頁面滑動隱藏

** 滑動隱藏效果經過'slideUp()'函數實現** 滑動顯示效果經過'slideDown()'函數實現

 

 

jq 動畫animate 方法

基本語法

語法:$(selector).animate({params},speed,callback); 必須的params參數定義造成動畫的css屬性。 可選的speed參數規定效果的時長 它能夠取如下值:"slow","last"或毫秒. 可選的callback參數是動畫完成以後所執行的函數名稱.

jq 進行獲取html 操做

三個簡單的用於dom操做的jq 方法

1 text()

text()-設置或返回所選元素的文本內容

2 html()

設置或返回所選元素的內容(包括html標記 也就是html代碼)

3 val()

設置或返回表單字段的值

label 的使用

label標籤單獨使用沒有什麼意義 要結合着input標籤使用纔有意義

 

獲取當前元素的索引

1 index()函數可獲取當前元素的索引值 index()函數返回指定元素相對於其餘指定元素的index位置 這些元素可經過 jquery選擇器或dom元素來指定

插入節點元素

1 append() 函數

1 append()函數 (將新建立的節點元素插入到某個文檔) 語法:$(selector).append(content); (content參數表示要插入的內容 可包含html標籤)

2 appendTo() 函數

2 appendTo()函數在被選元素的結尾(仍然在內部)插入指定內容 語法:$(content).appendTo(selector); (selector參數表示把內容追加到哪一個元素上)

3 prepend()

3 prepend()函數(將新建立的節點元素插入某個文檔) 語法:$(selector).prepend(content);

 

4 prependTo()

4 prependTo()函數在被元素的結尾(仍然在內部)插入指定內容 語法:$(content).prependTo(selector)

5 after()

5 after()函數在被選元素後插入指定的內容 語法:$(selector).after(content)

6 insertAfter()

6 insertAfter()函數在被選元素以後插入HTML標記或已有的元素 語法:$(content).insertAfter(selector)

 

7 before()

7 before()函數在被選元素以後插入html標記或者已有的元素 語法:$(selector).before(content)

8 insertBefore()

8 insertBefore()函數在被選元素以前html標記或已有的元素 語法:$(content).insertBefore(selector);

複製節點元素

clone()函數可完成節點元素複製功能 $(this).clone(true).appendTo("ul") 能夠往復制後的節點追加內容的添加 例如經過點擊複製追加添加內容

替換節點元素

replaceWith()函數用指定的HTML內容或元素替換被選元素 $(selector).replaceWith(content)

刪除節點元素

remove()函數移除被選元素 包括它全部的文本和子節點 empty()函數從被選元素移除全部內容 包括它全部的文本和子節點 $(selector).empty()//這樣寫就行

jq 常見dom 操做 方法

1 addclass()

addClass() 向匹配的元素指定的類名

2 attr()

attr() 設置返回匹配元素的屬性和值//經過匿名函數 function(){}來進行指定參數設置值

3 hasclass()

hasClass() 檢查匹配的元素是否擁有指定的類

 

4 html()

html() 設置或返回匹配的元素集合中的html內容

5 removeattr()

removeAttr() 從全部匹配的元素中移除指定的屬性

 

6 removeclass()

removeClass() 從全部匹配的元素中刪除所有或者指定的類

7 toggleclass()

toggleclass() 從匹配的元素中添加或刪除一個類

8 val()

val() 設置或返回匹配元素的值input 標籤

jq 操做css 經常使用函數

1 css()

css() 設置或返回匹配元素的樣式屬性

2 height()

height() 設置或返回匹配元素的高度

3 offset()

offset() 返回第一個匹配元素相對於文檔的位置

4 offsetParent()

返回最近的定位祖先元素

5 position()

position() 返回第一個匹配元素相對於父元素的位置

6 width()

width() 設置或返回匹配元素的寬度