jQuery

一、jQuery 的下載和安裝

下載

jQuery

安裝

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

二、jQuery 核心

"$"

"$"符號在 jQuery 中代表對 jQuery 對象的引用, "jQuery"是核心對象

三、DOM 對象和 jQuery 包裝集對象

Uncaught ReferenceError: $ is not defined 報錯原因：

1、沒有引入jquery文件

2、引入的jquery文件順序不對

DOM對象轉 Jqyery包裝集對象

將DOM對象放到$()括號中

// 得到DOM對象

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

// 得到Jquery包裝集對象

var mydivJquery = $("#mydiv");

Jqyery包裝集對象轉DOM對象

Jqyery包裝集取下標 Jqyery包裝集[0]

/*Jqyery包裝集對象轉DOM對象*/

ar jtod = mydivJquery[0];

通過each()方法遍歷 jQuery

對象數組得到的對象是 Dom 對象，可以通過$()轉為 jQuery 對象

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

四、jQuery 選擇器

1. 基礎選擇器 Basics

id 選擇器

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

元素名稱選擇器

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

類選擇器

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

選擇所有元素

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

子主題 5

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

2.層次選擇器 Hierarchy

后代選擇器

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

子代選擇器

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

相鄰選擇器

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

1、只找當前元素的下一個同級

2、只找一個

同輩選擇器

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

3.表單選擇器

元素選擇器

var inputs = $("input");

表單選擇器

var inps = $(":input");

獲取所有的復選框

var cks = $(":checkbox");

過濾選擇器

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

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

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

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

:odd 獲取所有的奇數位置的元素

:even 獲取所有的偶數位置的元素

五、jQuery DOM 操作

1. 操作元素的屬性

獲取屬性

attr(屬性名稱)

獲取指定的屬性值，操作 checkbox 時選中返回checked，沒有選中返回 undefined

prop(屬性名稱)

獲取具有 true 和 false 兩個屬性的屬性值

設置屬性

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

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

移除屬性

removeAttr("屬性名")

attr()與prop()的區別：

共同點：

都可以獲取元素的屬性

不同點：

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

2、操作返回值是boolean類型的屬性時，attr()返回的是對應的值，而prop()返回的是true和false

如何選擇：

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

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

2.操作元素的樣式

attr("class")

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

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

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

attr():設置樣式時，會重新設置class的屬性值，所以會將原來的樣式覆蓋

addClass("樣式名")

添加樣式名稱

addClass():添加樣式，原來的樣式依然保留，如果出現了相同樣式，以后定義的樣式為準

css()

添加具體的樣式

設置一個樣式

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

同時設置多個

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

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

removeClass(class)

移除樣式名稱

3.操作元素的內容

html()

獲取元素的 html 內容

html("html 內容")

設定元素的 html 內容

text()

獲取元素的文本內容，不包含 html

text("text 內容")

設置元素的文本內容，不包含 html

val()

獲取元素 value 值

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

html()和text()

html()可以識別數據中的html標簽并 顯示出來；

text()不識別html標簽，會當做純文本顯示

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

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

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

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

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

4.創建元素、添加元素

創建元素

$(‘元素內容’)

添加元素

prepend(content)

在被選元素內部的開頭插入元素或內容，被追加的 content 參數，可以是字符、HTML 元素標記

$(content).prependTo(selector)

把 content 元素或內容加入 selector 元素開頭

append(content)

在被選元素內部的結尾插入元素或內容，被追加的 content 參數，可以是字符、HTML 元素標記

$(content).appendTo(sector)

把 content 元素或內容插入 selector 元素內，默認是在尾部

before()

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

after()

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

5.刪除元素、遍歷元素

remove()

刪除所選元素或指定的子元素，包括整個標簽和內容一起刪

empty()

清空所選元素的內容

遍歷元素

each()

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

參數 function 為遍歷時的回調函數，

index 為遍歷元素的序列號，從 0 開始。

element 是當前的元素，此時是 dom 元素。

六、Jquery 事件

1. ready()加載事件

ready()類似于 onLoad()事件

ready()可以寫多個，按順序執行

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

2. bind()綁定元素事件

簡單的 bind()事件

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

綁定多個事件

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

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

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

console.log("。。。");

});

$("#upwd").bind({

"blur":function(){

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

},

"focus":function(){

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

}

});

總結

以上是生活随笔為你收集整理的html引入jquery_jQuery介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。