jQuery基礎之二
阿新 • • 發佈:2017-11-04
常見 ger parent word red 器) 基礎 lin www
作者: 慕粉1464062117
鏈接:http://www.imooc.com/article/16236
來源:慕課網
jQuery基礎之二
jQuery的中文文檔十分詳細,並且權威.
W3C的jQuery文檔更加簡單實用。
jQuery 1.9.0
jQuery中文文檔
W3C的jQuery文檔
jQuery操作DOM元素
元素本身
attr()
獲得元素的某項屬性,更改或添加元素的屬性值
實例
var className= $("div").attr("class")
獲得元素的類名
attr("property",‘value1‘) 更改一項屬性
attr({property1: ‘value1‘,
property2: ‘value2‘ }) 更改多項屬性
css()
為元素添加或修改某項或多項屬性
var className= $("div").css("propertyName")
css("propertyname","value") 更改一項屬性
$("div").css({"background":"red","width":"100px"}) 多項屬性
註意:
多項屬性時之間要用","隔開
且與attr()的不同,設置多個屬性時其類名也加上引號
addClass()
為元素添加新類名,來改變樣式
$("div").addClass("red")
為div元素添加樣式
註意:
為元素添加新樣式時不取消原有樣式。
addClass()的中類名不再加"."
一次添加多項樣式時之間要用" "空格隔開
removeClass()
反 addClass()
removeAttr()
反 css(),無需加屬性值
clone()
復制元素整體
$(selector).clone()
實例
var a=$("#div1").clone()
將id為div1的元素賦值給變量a
包裹元素和內容
wrap()
用於包裹元素本身
$(selector).wrap(wrapper)
實例
$("#div1").wrap("<div></div>")
id為div1的元素整體被div標簽包裹
wrapInner()
實例
$("#div1").wrapInner("<div id="div2"></div>")
id為div1的元素的所有子元素被div2包裹,而div2又被div1包裹
元素的子元素
append(content)
向指定的元素中追加內容,被追加的content參數,
可以是字符 HTML元素標記還可以是字符串的標記
默認在該元素的子元素的最後面
實例
js:
$html="<p class="green">asdawdasdwadsawdsa</p>"
$("div").append($html)
相當於在div元素內部又加入p標簽
appendTo()
用法
$(content).appendTo(selector)
實例
js:
$html="<p class="green">asdawdasdwadsawdsa</p>"
$($html).appendTo("div")
將p標簽加入到div標簽的末尾處
remove()
刪除所選元素本身和子元素
實例
<span class="green">asd</span>
<span class="red">asd</span>
js:
$("span").remove(".red")
刪除span標簽中類名為red的元素,此時該span標簽不再存在
empty()
刪除元素的所有子元素
實例
<span class="green">asd</span>
js:
$("span").empty()
知識刪除了asd文本節點span標簽依然存在
層級之內
before()和 after()
在元素的前後插入內容
$(selector).before(content)
$(selector).after(content)
替換內容
replaceWith() 和 replaceAll()
格式
$(selector).replaceWith(content)
$(content).replaceAll(selector)
實例
$("#div1").replaceWith("<p>asdwsadaw</p>")
把id為#div1的整個元素換為p標簽
遍歷元素
each()
格式:$(selector).each(function(index))
實例:
<span class="green1"></span>
<span class="green2"></span>
<span class="green3"></span>
<span class="green4"></span>
js:
$("span").each(function(){
if(index==2){
$(this).addClass("red")
}
}))
為類為 green4的span元素添加red樣式
註意
this的使用$(this)此時不加雙引號
jQuery事件與應用
jQuery並沒有創建太多新的事件,而是為綁定事件時提供了方便。
註意:這裏得事件名稱沒有‘on‘,綁定鼠標點擊事件時只需click即可
新事件
ready事件
ready事件類似於onLoad事件,但前者只要頁面的DOM結構
加載後便觸發,而後者必須在頁面全部元素加載成功才觸發,
ready()可以寫多個,按順序執行。
註意:
$(document).ready(function(){})等價於$(function(){});
focus和blur事件
文本框的focus和blur事件
focus事件:當點擊文本框時,觸發該事件
blur事件:當文本框失去焦點時,觸發該事件
change 事件
當一個元素的值(value)發生改變時,將觸發該事件
實例:
當改變下拉列表框的opnion時,將觸發該事件
綁定事件的方法
bind() 方法
通過bind()方法可以為獲得的DOM對象綁定任意的事件
$(selector).bind(event,[data],function)
實例
$("#btntest").bind("click mouseout",function(){
$(this).attr("value","OK")
})
當鼠標點擊id為btntest的按鈕時改變其值為OK
註意:
事件要加引號
多個事件一起綁定時當中空格隔開
綁定事件新方法
one() 方法
$(selector).one(event,func)
可以綁定任何有效的事件,但該事件函數只會觸發一次
hover() 方法
$(selector).hover(function1,function2)
當鼠標移到所選元素上時,執行的function1,鼠標移出時執行function2
toggle() 方法
$(seleector).toggle(func1,func2,func3,funcN)
當第一次點擊元素對象時執行func1,第二次點擊元素對象時執行func2..
當執行完最後一個函數時,再次點擊將返回執行的第一個函數
卸載綁定事件方法
unbind() 方法
可以移除元素已經綁定的事件
$(selector).unbind(event[,fun])
註意:
若fun沒有指定將移除所有的觸發函數
模擬事件的觸發
trigger() 方法
該方法可以直接觸發元素指定的事件
$(selector).trigger(event)
實例
$("#form1 input:submit").trigger("click")
當執行該語句是相當於點擊提交按鈕,表單元素將被提交
精彩集錦
1.this指針的使用
$("span").each(function(){
if(index==2){$(this).addClass("red")}})
2.易錯點睛
var speed=‘24px’ 或var speed=24
不可以 var speed=24px
相關標簽:JavaScript
記錄一下依稀記得的。來自《鋒利的jQuery》第二章的總結
第一類:基本選擇器(最常見的選擇器)
①$("#id") ②$(".classname") ③ $("element") ④$("selector1,selector2,……,selectorN")
第二類:層次選擇器
①$("ancestor descendant") 後代選擇器 ② $("parent>child") 子代選擇器
③$("prev+next") 緊接在prev後的next元素
④ $("prev~siblings") prev後的所有siblings元素
第三類:過濾選擇器
①基本過濾選擇器
②內容過濾選擇器
③可見性過濾選擇器
④屬性過濾選擇器
⑤子元素過濾選擇器
⑥表單對象過濾選擇器
Ps:私以為過濾選擇器分類太細,應總結常用的幾個過濾選擇器,方便記憶。
第四類:表單選擇器
$(":input")、$(":text")、$(":password")、$(":radio")、$(":image")
$(":checkbox")、$("submit")、$(":reset")、$(":button")、$(":file")
Ps:還是覺得表單選擇器也挺細的,不知道常用的是哪幾個
書中有段話:jQuery選擇器的寫法與CSS選擇器的寫法十分類似,只不過兩者的作用效果不同,css選擇器找到元素後是添加樣式,而jQuery選擇器找到樣式後是添加行為。
作者: 慕粉1464062117
鏈接:http://www.imooc.com/article/16236
來源:慕課網
jQuery基礎之二