jQuery學(xué)習(xí)
來源:程序員人生 發(fā)布時間:2015-01-07 08:57:58 閱讀次數(shù):3134次
控制頁面
控制元素內(nèi)容和值
操作元素內(nèi)容
操作文本內(nèi)容
text() 獲得全部匹配元素的文本內(nèi)容
text(val) 設(shè)置全部匹配元素的文本內(nèi)容
<div>
<span>test</span>
</div>
....
$("div").text();//獲得div元素的文本內(nèi)容
操作HTML內(nèi)容
html()獲得第1個匹配元素的HTML內(nèi)容
html(val)設(shè)置全部匹配元素而的HTML內(nèi)容
<div><span>test</span></div>
...
$("div").html();
操作元素的值
var()獲得第1個匹配元素確當(dāng)前值,返回字符串或數(shù)組
$("#le").val();//獲得id為le的元素的值
var(val)設(shè)置所有匹配元素的值
$("input:text").val("new");//為全部文本框設(shè)置值
var([ ])為radio等元素設(shè)置值
$("select").val(['列表項1','列表項2','列表項3']);
操作DOM節(jié)點(diǎn)
查找節(jié)點(diǎn)
創(chuàng)建節(jié)點(diǎn)
<script language="javascript">
$(document).ready(function()
{
var $p=$("<p></p>");//創(chuàng)建1個節(jié)點(diǎn)
$p.html("<span style='color:#FF0000'>添加</span>");//重新設(shè)置<div>的HTML內(nèi)容
$("body").append($p);//在body中創(chuàng)建了1個新的段落節(jié)點(diǎn)
});
插入節(jié)點(diǎn)
內(nèi)部插入節(jié)點(diǎn)

外部插入節(jié)點(diǎn)

刪除、復(fù)制、替換節(jié)點(diǎn)
刪除節(jié)點(diǎn)
empty()
remove()
2者區(qū)分
$(document).ready(function(){
$("#div1").empty();//刪除div1的所有子節(jié)點(diǎn)
$("#div2").remove();//刪除id為div2的節(jié)點(diǎn)
});
復(fù)制節(jié)點(diǎn)
clone()
$(function(){
$("input").bind("click",function(){//為按鈕綁訂單擊事件
$(this).clone(true).insertAfter(this);//復(fù)制自己和事件處理
});
});
替換節(jié)點(diǎn)
replaceAll()
repalceWith(content)
<script language="javascript">
$(document).ready(function(){
$("#div1").replacewith("<div>replacewith()的替換結(jié)果</div>");
$("<div>replaceAll()的替換結(jié)果</div>").replaceAll("#div2");
});
</script>
操作CSS樣式
修改CSS類實(shí)現(xiàn)

eg
$("div").addClass("yellow red");//為所有div元素添加yellow和red倆個CSS類
修改CSS樣式實(shí)現(xiàn)

生活不易,碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈