jQuery

一、jQuery 的下載和安裝

下載

jQuery

安裝

在頁(yè)面引入即可<script src="js/jquery.js" type="text/javascript" ></script>

二、jQuery 核心

"$"

"$"符號(hào)在 jQuery 中代表對(duì) jQuery 對(duì)象的引用, "jQuery"是核心對(duì)象

三、DOM 對(duì)象和 jQuery 包裝集對(duì)象

Uncaught ReferenceError: $ is not defined 報(bào)錯(cuò)原因：

1、沒(méi)有引入jquery文件

2、引入的jquery文件順序不對(duì)

DOM對(duì)象轉(zhuǎn) Jqyery包裝集對(duì)象

將DOM對(duì)象放到$()括號(hào)中

// 得到DOM對(duì)象

var mydivDom = document.getElementById("mydiv");

// 得到Jquery包裝集對(duì)象

var mydivJquery = $("#mydiv");

Jqyery包裝集對(duì)象轉(zhuǎn)DOM對(duì)象

Jqyery包裝集取下標(biāo) Jqyery包裝集[0]

/*Jqyery包裝集對(duì)象轉(zhuǎn)DOM對(duì)象*/

ar jtod = mydivJquery[0];

通過(guò)each()方法遍歷 jQuery

對(duì)象數(shù)組得到的對(duì)象是 Dom 對(duì)象，可以通過(guò)$()轉(zhuǎn)為 jQuery 對(duì)象

mydivJquery.each(function(index,element){ })

四、jQuery 選擇器

1. 基礎(chǔ)選擇器 Basics

id 選擇器

$("#testDiv")選擇 id 為 testDiv 的元素（id屬性值）

元素名稱選擇器

$("div")選擇所有 div 元素 （元素名稱）

類選擇器

$(".blue")選擇所有 class=blue 的元素 （class屬性值）

選擇所有元素

$("*")選擇頁(yè)面所有元素

子主題 5

$("#testDiv,span,.blue")同時(shí)選中這幾個(gè)選擇器匹配的元素

2.層次選擇器 Hierarchy

后代選擇器

$("#parent div")選擇 id 為 parent 的元素的所有 div 元素

子代選擇器

$("#parent>div")選擇 id 為 parent 的直接 div 子元素

相鄰選擇器

$(".blue + img")選擇 css 類為 blue 的下一個(gè) img 元素

1、只找當(dāng)前元素的下一個(gè)同級(jí)

2、只找一個(gè)

同輩選擇器

$(".blue ~ img")選擇 css 類為 blue 的之后的 img 元素

3.表單選擇器

元素選擇器

var inputs = $("input");

表單選擇器

var inps = $(":input");

獲取所有的復(fù)選框

var cks = $(":checkbox");

過(guò)濾選擇器

console.log($("input:checkbox"));

:checked:得到所有checked為true的元素

:eq(index):匹配指定下標(biāo)的元素

:gt(index):大于指定下標(biāo)的

:odd 獲取所有的奇數(shù)位置的元素

:even 獲取所有的偶數(shù)位置的元素

五、jQuery DOM 操作

1. 操作元素的屬性

獲取屬性

attr(屬性名稱)

獲取指定的屬性值，操作 checkbox 時(shí)選中返回checked，沒(méi)有選中返回 undefined

prop(屬性名稱)

獲取具有 true 和 false 兩個(gè)屬性的屬性值

設(shè)置屬性

attr("屬性名","屬性值")

prop("屬性名","屬性值")

移除屬性

removeAttr("屬性名")

attr()與prop()的區(qū)別：

共同點(diǎn)：

都可以獲取元素的屬性

不同點(diǎn)：

1、attr()可以獲取自定義屬性和固有屬性的值，而prop()只能獲取固有屬性的值 （固有屬性：元素本身就有的屬性）

2、操作返回值是boolean類型的屬性時(shí)，attr()返回的是對(duì)應(yīng)的值，而prop()返回的是true和false

如何選擇：

如果屬性的返回值是boolean類型時(shí)，用prop()方法； （checked、selected、disabled）

如果是非boolean類型，則使用attr()方法

2.操作元素的樣式

attr("class")

獲取 class 屬性的值，即樣式名稱

attr("class","樣式名")

修改 class 屬性的值，修改樣式

attr():設(shè)置樣式時(shí)，會(huì)重新設(shè)置class的屬性值，所以會(huì)將原來(lái)的樣式覆蓋

addClass("樣式名")

添加樣式名稱

addClass():添加樣式，原來(lái)的樣式依然保留，如果出現(xiàn)了相同樣式，以后定義的樣式為準(zhǔn)

css()

添加具體的樣式

設(shè)置一個(gè)樣式

$("#remove").css("color","red");

同時(shí)設(shè)置多個(gè)

$("#remove").css({"font-weight":700,"height":"200px"});

css():設(shè)置具體的樣式（設(shè)置行內(nèi)樣式，寫在style屬性中的樣式）

removeClass(class)

移除樣式名稱

3.操作元素的內(nèi)容

html()

獲取元素的 html 內(nèi)容

html("html 內(nèi)容")

設(shè)定元素的 html 內(nèi)容

text()

獲取元素的文本內(nèi)容，不包含 html

text("text 內(nèi)容")

設(shè)置元素的文本內(nèi)容，不包含 html

val()

獲取元素 value 值

val(‘值’) 設(shè)定元素的 value 值

html()和text()

html()可以識(shí)別數(shù)據(jù)中的html標(biāo)簽并 顯示出來(lái)；

text()不識(shí)別html標(biāo)簽，會(huì)當(dāng)做純文本顯示

取值時(shí)，html()能夠獲取到元素中的html代碼，text()只會(huì)獲取純文本

表單元素：取值賦值使用 val()

文本框、密碼框、單選框、復(fù)選框、下拉框、文本域、文件域、隱藏域、（按鈕）等

非表單元素：取值賦值使用 html()和text()

div、span、p、a、h1-h6、table、tr、td、ul、li、ol、font、lable等

4.創(chuàng)建元素、添加元素

創(chuàng)建元素

$(‘元素內(nèi)容’)

添加元素

prepend(content)

在被選元素內(nèi)部的開頭插入元素或內(nèi)容，被追加的 content 參數(shù)，可以是字符、HTML 元素標(biāo)記

$(content).prependTo(selector)

把 content 元素或內(nèi)容加入 selector 元素開頭

append(content)

在被選元素內(nèi)部的結(jié)尾插入元素或內(nèi)容，被追加的 content 參數(shù)，可以是字符、HTML 元素標(biāo)記

$(content).appendTo(sector)

把 content 元素或內(nèi)容插入 selector 元素內(nèi)，默認(rèn)是在尾部

before()

在元素前插入指定的元素或內(nèi)容:$(selector).before(content)

after()

在元素后插入指定的元素或內(nèi)容:$(selector).after(content)

5.刪除元素、遍歷元素

remove()

刪除所選元素或指定的子元素，包括整個(gè)標(biāo)簽和內(nèi)容一起刪

empty()

清空所選元素的內(nèi)容

遍歷元素

each()

$(selector).each(function(index,element)) :遍歷元素

參數(shù) function 為遍歷時(shí)的回調(diào)函數(shù)，

index 為遍歷元素的序列號(hào)，從 0 開始。

element 是當(dāng)前的元素，此時(shí)是 dom 元素。

六、Jquery 事件

1. ready()加載事件

ready()類似于 onLoad()事件

ready()可以寫多個(gè)，按順序執(zhí)行

$(document).ready(function(){})等價(jià)于$(function(){})

2. bind()綁定元素事件

簡(jiǎn)單的 bind()事件

$(selector).bind( eventType [, eventData], handler(eventObject))

綁定多個(gè)事件

$("#upwd").bind("blur",function(){

console.log("....");

}).bind("focus",function(){

console.log("。。。");

});

$("#upwd").bind({

"blur":function(){

console.log("失焦...");

},

"focus":function(){

console.log("聚焦。。。");

}

});

總結(jié)

以上是生活随笔為你收集整理的html引入jquery_jQuery介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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