今日內(nèi)容

1.JQuery 基礎(chǔ)：

概念

快速入門

JQuery對象和JS對象區(qū)別與轉(zhuǎn)換

選擇器

DOM操作

案例

JQuery 基礎(chǔ)：

1.概念： 一個(gè)JavaScript框架。簡化JS開發(fā)

jQuery是一個(gè)快速、簡潔的JavaScript框架，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(或JavaScript框架)。jQuery設(shè)計(jì)的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動畫設(shè)計(jì)和Ajax交互。

JavaScript框架：本質(zhì)上就是一些js文件，封裝了js的原生代碼而已

2.快速入門

(1)步驟：

A:下載JQuery

目前jQuery有三個(gè)大版本：

1.x：兼容ie678,使用最為廣泛的，官方只做BUG維護(hù)，

功能不再新增。因此一般項(xiàng)目來說，使用1.x版本就可以了，

最終版本：1.12.4 (2016年5月20日)

2.x：不兼容ie678，很少有人使用，官方只做BUG維護(hù)，

功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，

最終版本：2.2.4 (2016年5月20日)

3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，

一般不會使用3.x版本的，很多老的jQuery插件不支持這個(gè)版本。

目前該版本是官方主要更新維護(hù)的版本。最新版本：3.2.1(2017年3月20日)

jquery-xxx.js 與 jquery-xxx.min.js區(qū)別：

jquery-xxx.js：開發(fā)版本。給程序員看的，有良好的縮進(jìn)和注釋。體積大一些

jquery-xxx.min.js：生產(chǎn)版本。程序中使用，沒有縮進(jìn)。體積小一些。程序加載更快

B:導(dǎo)入JQuery的js文件：導(dǎo)入min.js文件

C:使用

var div1 = $("#div1");

alert(div1.html());

3.JQuery對象和JS對象區(qū)別與轉(zhuǎn)換

(1)JQuery對象在操作時(shí)，更加方便。

(2)JQuery對象和js對象方法不通用的.

(3)兩者相互轉(zhuǎn)換

jq -- > js : jq對象[索引] 或者 jq對象.get(索引)

js -- > jq : $(js對象)

4.選擇器：篩選具有相似特征的元素(標(biāo)簽)

(1)基本操作學(xué)習(xí)：

A:事件綁定

//1.獲取b1按鈕

$("#b1").click(function(){

alert("abc");

});

B:入口函數(shù)

$(function () {

});

window.onload? 和 $(function) 區(qū)別

* window.onload 只能定義一次,如果定義多次，后邊的會將前邊的覆蓋掉

* $(function)可以定義多次的。

C:樣式控制：css方法

// $("#div1").css("background-color","red");

$("#div1").css("backgroundColor","pink");

(2)分類

A:基本選擇器

a:標(biāo)簽選擇器(元素選擇器)

語法： $("html標(biāo)簽名") 獲得所有匹配標(biāo)簽名稱的元素

b:id選擇器

語法： $("#id的屬性值") 獲得與指定id屬性值匹配的元素

c:類選擇器

語法： $(".class的屬性值") 獲得與指定的class屬性值匹配的元素

d:并集選擇器：

語法： $("選擇器1,選擇器2....") 獲取多個(gè)選擇器選中的所有元素

B:層級選擇器

a:后代選擇器

語法： $("A B ") 選擇A元素內(nèi)部的所有B元素

b:子選擇器

語法： $("A > B") 選擇A元素內(nèi)部的所有B子元素

C:屬性選擇器

a:屬性名稱選擇器

語法： $("A[屬性名]") 包含指定屬性的選擇器

b:屬性選擇器

語法： $("A[屬性名='值']") 包含指定屬性等于指定值的選擇器

c:復(fù)合屬性選擇器

語法： $("A[屬性名='值'][]...") 包含多個(gè)屬性條件的選擇器

D:過濾選擇器

a:首元素選擇器

語法： :first 獲得選擇的元素中的第一個(gè)元素

b:尾元素選擇器

語法： :last 獲得選擇的元素中的最后一個(gè)元素

c:非元素選擇器

語法： :not(selector) 不包括指定內(nèi)容的元素

d:偶數(shù)選擇器

語法： :even 偶數(shù)，從 0 開始計(jì)數(shù)

e:奇數(shù)選擇器

語法： :odd 奇數(shù)，從 0 開始計(jì)數(shù)

f:等于索引選擇器

語法： :eq(index) 指定索引元素

g:大于索引選擇器

語法： :gt(index) 大于指定索引元素

h:小于索引選擇器

語法： :lt(index) 小于指定索引元素

i:標(biāo)題選擇器

語法： :header 獲得標(biāo)題(h1~h6)元素，固定寫法

E:表單過濾選擇器

a:可用元素選擇器

語法： :enabled 獲得可用元素

b:不可用元素選擇器

語法： :disabled 獲得不可用元素

c:選中選擇器

語法： :checked 獲得單選/復(fù)選框選中的元素

d:選中選擇器

語法： :selected 獲得下拉框選中的元素

5.DOM操作

(1)內(nèi)容操作

A:html(): 獲取/設(shè)置元素的標(biāo)簽體內(nèi)容? ?內(nèi)容? --> 內(nèi)容

B:text(): 獲取/設(shè)置元素的標(biāo)簽體純文本內(nèi)容? ?內(nèi)容 --> 內(nèi)容

C:val()： 獲取/設(shè)置元素的value屬性值

(2)屬性操作

A:通用屬性操作

a:attr(): 獲取/設(shè)置元素的屬性

b:removeAttr():刪除屬性

c:prop():獲取/設(shè)置元素的屬性

d:removeProp():刪除屬性

attr和prop區(qū)別？

a:如果操作的是元素的固有屬性，則建議使用prop

b:如果操作的是元素自定義的屬性，則建議使用attr

B:對class屬性操作

a:addClass():添加class屬性值

b:removeClass():刪除class屬性值

c:toggleClass():切換class屬性

toggleClass("one"): 判斷如果元素對象上存在class="one"，則將屬性值one刪除掉。? 如果元素對象上不存在class="one"，則添加

d:css()

(3)CRUD操作

A:append():父元素將子元素追加到末尾

對象1.append(對象2): 將對象2添加到對象1元素內(nèi)部，并且在末尾

B:prepend():父元素將子元素追加到開頭

對象1.prepend(對象2):將對象2添加到對象1元素內(nèi)部，并且在開頭

C:appendTo():

對象1.appendTo(對象2):將對象1添加到對象2內(nèi)部，并且在末尾

D:prependTo()：

對象1.prependTo(對象2):將對象1添加到對象2內(nèi)部，并且在開頭

E:after():添加元素到元素后邊

對象1.after(對象2)： 將對象2添加到對象1后邊。對象1和對象2是兄弟關(guān)系

F:before():添加元素到元素前邊

對象1.before(對象2)： 將對象2添加到對象1前邊。對象1和對象2是兄弟關(guān)系

G:insertAfter()

對象1.insertAfter(對象2)：將對象2添加到對象1后邊。對象1和對象2是兄弟關(guān)系

H:insertBefore()

對象1.insertBefore(對象2)： 將對象2添加到對象1前邊。對象1和對象2是兄弟關(guān)系

I:remove():移除元素

對象.remove():將對象刪除掉

J:empty():清空元素的所有后代元素。

對象.empty():將對象的后代元素全部清空，但是保留當(dāng)前對象以及其屬性節(jié)點(diǎn)

6.案例

總結(jié)

以上是生活随笔為你收集整理的java jquery基础_day20:JQuery基础(超系统的JavaWEB全套教程)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。