Jquery學(xué)習(xí)(一)

一枪芒、Jquery

1.Jquery的導(dǎo)入

下載Jquery,script標(biāo)簽導(dǎo)入

? ? <script src = "Jquery方法位置"

? ? type="text/jquary" charset="UTF-8">

2.Jquery和Dom的轉(zhuǎn)換

Dom對象中只有有限的屬性和方法,而使用Jquery方法需要轉(zhuǎn)換為Jquery對象

美元符號代替Jquery對象

$就可以替代Jquery

Dom轉(zhuǎn)Jquery對象

var Jquery對象名 = $("Dom對象名")

Jquery對象轉(zhuǎn)Dom對象

方法1

var Dom對象名=$("Jquery對象名")

方法2?用數(shù)組方法獲取第一個

var Dom對象名=Jquery數(shù)組[0]

方法3?利用each方法,Jquery獨有方法,遍歷方法

Jquery對象名.each(){

? ? 對象名 = this;

}

3.jquery選擇器

1.基礎(chǔ)選擇器

id選擇器

獲取指定id值的對象(只會獲取到第一個id值)

元素選擇器

獲取所有指定標(biāo)簽名的元素

類選擇器

獲取所有該類名的元素

選擇所有

獲取所有元素的對象

組合選擇器

組合前3個選擇器

選擇器寫法

id選擇器$("#id")

元素選擇器$("元素名")

類選擇器$(".class屬性")

選擇所有$("*")

組合選擇器$("選擇器1","選擇器2")

2.層次選擇器

后代選擇器

var houdai = $("#parent div");

子代選擇器

var zidai =$("#parent>div")

相鄰選擇器

var xiangling = $("#parent+div")

同輩選擇器

var tongbei=$(".gray~img");

3.表單選擇器

表單選擇器

文本框選擇器

密碼框選擇器

單選按鈕選擇器

復(fù)選框選擇器

提交按鈕選擇器

圖像域選擇器

重置按鈕選擇器

按鈕選擇器

文件域選擇器

4.其他選擇器

過濾選擇器

var checkboxs = $(":checkbox");

過濾被選中的

var ckeckeds = $(":checkbox:checked");

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

var second = $(":checkbox:eq(1)");

匹配所有下標(biāo)大于指定值的元素

var gt = $(":checkbox:gt(0)");

取奇數(shù)

var odds =$(":checkbox:odd");

取偶數(shù)

var odds =$(":checkbox:even");

4.Jquery dom操作

4.1操作元素的屬性

attr

獲取指定的屬性值

prop

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

如果返回值是true或false(checked挤悉、selected沟堡、disabled)

設(shè)置屬性的值

attr(元素,要修改的內(nèi)容)

移除屬性

removeAttr(元素)

4.2操作元素的樣式

attr:設(shè)置元素的class屬性

如果存在則覆蓋

如果不存在就添加

addClass

添加樣式,原來的樣式保留?

css

添加一個具體樣式css("樣式名","樣式值")

同時添加多個樣式名({"樣式名":"樣式值","樣式名":"樣式值"})

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

html

html識別標(biāo)簽

text

text不識別標(biāo)簽

val

val主要用來修改表單內(nèi)容

4.4創(chuàng)建元素

$('元素內(nèi)容')

$('

這是一個p

')

4.5添加元素

prepend()

append()

before()

after()

4.6刪除元素

remove

remove可以刪除元素

empty

empty清除內(nèi)容

4.7遍歷元素

$(".green").each(index,element){

console.log(index);

console.log(element);

console.log(element.innerHTML);

console.log($(element).html())

};

5.Jquery事件

5.1ready()加載事件

$(document).ready(function(){})

$(function(){})

5.2bind()綁定事件

綁定單個事件

bind()綁定事件

$("btn").bind("click",function(){

? ? 事件內(nèi)容;

})

直接綁定事件

$("btn").click(function(){

? ? 事件內(nèi)容;

});

多個事件綁定一種行為