jQuery知識(shí)點(diǎn)
"$"符號(hào)在 jQuery 中代表對(duì) jQuery 對(duì)象的引用, "jQuery"是核心對(duì)象,通過該對(duì)象
可以獲取 jQuery 對(duì)象闹究,調(diào)用 jQuery 提供的方法等霜瘪。只有 jQuery 對(duì)象才能調(diào)用 jQuery 提供
的方法珠插。
1、 Dom對(duì)象(javascript 中獲取 Dom 對(duì)象)
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div")颖对;
2捻撑、 jQuery包裝集|對(duì)象(可以說是Dom對(duì)象的擴(kuò)充)
在 jQuery 的世界中將所有的對(duì)象, 無論是一個(gè)還是一組,
都封裝成一個(gè) jQuery 包裝集,比如獲取包含一個(gè)元素的 jQuery 包裝集:
var jQueryObject = $("#testDiv");
3、 Dom轉(zhuǎn)jQuery對(duì)象
Dom 對(duì)象轉(zhuǎn)為 jQuery 對(duì)象缤底,只需要利用$()方法進(jìn)行包裝即可
var domDiv = document.getElementById('mydiv'); // 獲取 Dom 對(duì)象
mydiv = $(domDiv);
4顾患、 jQuery? 對(duì)象轉(zhuǎn) Dom? 對(duì)象
jQuery 對(duì)象轉(zhuǎn) Dom 對(duì)象,只需要取數(shù)組中的元素即可
//第一種方式 獲取 jQuery 對(duì)象
var jqueryDiv = jQuery('#mydiv');
//第二種方式 獲取 jQuery 對(duì)象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0];//將以獲取的 jquery 對(duì)象轉(zhuǎn)為 dom
5个唧、 jQuery? 選擇器
基礎(chǔ)選擇器(常用)
選擇器? ? ? ? ? ? ? ? 名稱? ? ? ? ? ? 舉例
id 選擇器? ? ? ? ? ? #id? ? ? ? ? ? ? ? ? ? $("#testDiv")選擇 id 為 testDiv 的元素
元素名稱選擇器? element? ? ? ? ? ? ? ? $("div")選擇所有 div 元素
類選擇器 ? ? .class? ? ? ? ? $(".blue")選擇所有 class=blue 的元素
層次選擇器
選擇器? ? ? ? 名稱? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 舉例
后代選擇器? ancestor descendant? $("#parent div")選擇 id 為 parent 的元素的所有 div 元素
子代選擇器? parent > child? $("#parent>div")選擇 id 為 parent 的直接 div 子元素
相鄰選擇器? prev + next? $(".blue + img")選擇 css 類為 blue 的下一個(gè) img 元素
同輩選擇器? prev ~ sibling? $(".blue ~ img")選擇 css 類為 blue 的之后的 img 元素
單選擇器(forms)
表單選擇器? :input? 查找所有的 input 元素:$(":input")江解;注意:會(huì)匹配所
有的 input、textarea徙歼、select 和 button 元素犁河。
文本框選擇器? :text? 查找所有文本框:$(":text")
密碼框選擇器? :password? 查找所有密碼框:$(":password")
單選按鈕選擇器 :radio
查找所有單選按鈕:$(":radio")
復(fù)選框選擇器? :checkbox? 查找所有復(fù)選框:$(":checkbox")
提交按鈕選擇器 :submit
查找所有提交按鈕:$(":submit")
圖像域選擇器? :image? 查找所有圖像域:$(":image")
重置按鈕選擇器 :reset
查找所有重置按鈕:$(":reset")
按鈕選擇器? :button? 查找所有按鈕:$(":button")
文件域選擇器? :file? 查找所有文件域:$(":file")
6鳖枕、 jQuery Dom操作
操作元素的屬性
attr(屬性名稱)? ? 獲取指定的屬性值,操作 checkbox 時(shí)選中返回
checked呼股,沒有選中返回 undefined耕魄。
attr('checked')
attr('name')
prop(屬性名稱)? ? 獲取具有 true 和 false 兩個(gè)屬性的屬性值? prop('checked')
設(shè)置屬性
attr(屬性名稱,屬性值)? 設(shè)置指定的屬性值彭谁,操作 checkbox時(shí)選中返回 checked,沒有選中返回 undefined允扇。
attr('checked',’checked’)
attr('name',’zs’)
prop(屬性名稱缠局,屬性值)? 設(shè)置具有 true 和 false 兩個(gè)屬性的屬性值
prop('checked',’true’)
移除屬性
removeAttr(屬性名)? 移除指定的屬性? removeAttr('checked')
操作元素的樣式
attr(“class”)? ? ? ? ? ? ? ? ? ? 獲取 class 屬性的值,即樣式名稱
attr(“class”,”樣式名”)? ? 修改 class 屬性的值考润,修改樣式
addClass(“樣式名”)? ? ? ? ? 添加樣式名稱
css()? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 添加具體的樣式
removeClass(class)? ? ? ? ? ? ? 移除樣式名稱
補(bǔ)充:增加元素的具體樣式狭园,格式:
1)css({‘樣式名’:’樣式值’,’樣式名 2’:’樣式值 2’})
例:css({"background-color":"red","color":"#fff"});
2)css(“樣式名”,”樣式值”)
例:css('color','white')
操作元素的內(nèi)容
對(duì)于元素還可以操作其中的內(nèi)容,例如文本糊治,值唱矛,甚至是 html。
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 值
創(chuàng)建元素
$(‘元素內(nèi)容’)
$(‘<p>this is a paragraph!!!</p>’)
添加元素(常用)
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)記树灶。
刪除元素
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 元素州既。
7、 jQuery事件
ready()加載事件
ready()類似于 onLoad()事件
ready()可以寫多個(gè)萝映,按順序執(zhí)行
$(document).ready(function(){})等價(jià)于$(function(){})
bind()綁定元素事件
為被選元素添加一個(gè)或多個(gè)事件處理程序吴叶,并規(guī)定事件發(fā)生時(shí)運(yùn)行的函數(shù)。
$(selector).bind( eventType [, eventData], handler(eventObject))
eventType : 是一個(gè)字符串類型的事件類型序臂,就是你所需要綁定的事件蚌卤。這類類型可以包括如下:
blur, focus, focusin, focusout, load, resize, scroll, unload, click,
dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,mouseleave,change, select, submit, keydown, keypress, keyup, error
[, eventData]:傳遞的參數(shù)实束,格式:{名:值,名 2:值 2}
handler(eventObject):該事件觸發(fā)執(zhí)行的函數(shù)