1 查找元素節(jié)點
var $x = $("selector").text()
2 查找屬性節(jié)點
var $x = $("selector").attr("property")
3 創(chuàng)建節(jié)點
var $x = $("html")
4 插入節(jié)點
$("selector").append()
向每個匹配的元素內(nèi)部追加內(nèi)容
$("selector").appendTo()
等價于.append()操作符左右互換
$("selector").prepend()
向每個匹配的元素內(nèi)部前置內(nèi)容
$("selector").prependTo()
等價于.prepend()操作符左右互換
$("selector").after()
在每個匹配的元素之后插入內(nèi)容
$("selector").insertAfter
等價于.after()操作符左右互換
$("selector").before()
在每個匹配的元素之前插入內(nèi)容
$("selector").insertBefore()
等價于.before()操作符左右互換
5 移動節(jié)點
本書P70例:
<script>var $one_li = $("ul li:eq(1)"); //獲取<ul>節(jié)點中第2個<li>元素節(jié)點var $two_li = $("ul li:eq(2)"); //獲取<ul>節(jié)點中第3個<li>元素節(jié)點$two_li.insertBefore($one_li); //移動節(jié)點</script>
6 刪除節(jié)點
6.1 remove()方法
$("selector").remove()
remove()方法將刪除selector所有后代節(jié)點,,元素用remove()方法刪除后,仍可以繼續(xù)使用,。另外remove()方法也可以通過傳遞參數(shù)
來選擇性地刪除元素,,如$("ul li").remove("li[title!=xxx]");
6.2 empty()方法
$("selector").empty()
清空selector的所有后代節(jié)點
7 復(fù)制節(jié)點
$("selector").clone()
如$(this).clone().appendTo("ul")。若要使復(fù)制后的新元素帶有原元素所擁有的行為,,需要傳遞參數(shù)true,。如$("selector").clone(true)
8 替換節(jié)點
$("selector").replaceWith()
將所有匹配的元素都替換成指定的HTML或者DOM元素
$("selector").replaceAll()
等價于.replaceWith()操作符左右互換
9 包裹節(jié)點
$("selector").wrap()
將所有匹配的元素單獨包裹
$("selector").wrapAll()
將所有匹配的元素用一個元素包裹
$("selector").wrapInner()
將每一個匹配的元素的子內(nèi)容(包括文本節(jié)點)用其他結(jié)構(gòu)化的標記包裹起來
10 屬性操作
$("selector").attr()
獲取(一個property參數(shù))和設(shè)置元素屬性(兩個參數(shù),,property和value),,如$("p").attr("title","your title")。如果同時設(shè)
置多個屬性,,格式如$("p").attr({"title" : "your title" , "name" : "test"})
$("selector").removeAttr()
刪除元素屬性
11 樣式操作
$("selector").attr()
替換樣式
$("selector").addClass()
追加樣式
$("selector").removeClass()
移除樣式
$("selector").toggle()
行為重復(fù)切換
例:
<script>$x.toggle(function(){//code1 },function(){//code2})</script>交替執(zhí)行code1和code2
$("selector").toggleClass()
控制樣式上的重復(fù)切換,,如$("p").toggleClass("anotherClass")
$("selector").hasClass("anotherClass")
判斷selector中是否含有anotherClass
12 設(shè)置和獲取HTML、文本和值
$("selector").html()
獲取html代碼
$("selector").html(html)
設(shè)置html代碼(替換標簽中內(nèi)容),,html()方法不可用于XML文檔
$("selector").text()
獲取純文本內(nèi)容
$("selector").text(text)
設(shè)置文本內(nèi)容(替換標簽中內(nèi)容),,text()方法可以用于XML文檔
$("selector").val()
獲取元素的值
$("selector").val(value)
設(shè)置元素的值,(外:defaultValue屬性可獲得html默認屬性,,P80例:if (txt_value==this.defaultValue){...})
$("select").val("option")
設(shè)置select控件的選中狀態(tài),,類似有:$(":checkbox").val("check1","check2"); $(":radio").val("radio1");
(外:可以使用attr()方法實現(xiàn)同樣功能,如:$("select option:eq(1)").attr("selected",true); $("[value=radio2]:radio").attr("checked",true);)
13 遍歷節(jié)點
$("selector").children()
獲取匹配元素的子元素集合,以數(shù)組返回(只考慮子元素,,不考慮子元素以下的后代元素)
引申:循環(huán)取得每個子元素html內(nèi)容的方法:
<script>var $ul = $("ul").children();for (var i=0 len=$ul.length; i<len; i++){alert($ul[i].innerHTML);}</script>$("selector").next()
獲取匹配元素后面緊鄰的同輩元素,,以數(shù)組返回
$("selector").prev()
獲取匹配元素前面緊鄰的同輩元素,以數(shù)組返回
$("selector").siblings()
獲取匹配元素前后所有的同輩元素,,以數(shù)組返回
P88使用此方法的例子:
<script>$(".has_children").click(function(){$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();})</script>$("selector").closest()
獲取最近的匹配元素,,首先檢查當前元素是否匹配,如匹配則返回元素本身,,否則逐級向上查找父元素知道匹配為止,,如果找不到則返回空的jQuery對象
P89例
<script>$(document).bind("click",function(e){$(e.target).closest("li").css("color","red");})</script>其他遍歷節(jié)點的方法(find(), filter(), nextAll(), prevAll(), parent(), parents()等)本書從略
14 CSS-DOM操作
$("selector").css("property")
獲取元素樣式的property屬性的值
$("selector").css("property","value")
設(shè)置元素樣式的property屬性的值
$("selector").css({"property1":"value1","property2":"value2"})
同時設(shè)置元素多個樣式屬性的值。注:例:"font-size" = fontSize (無引號的駝峰寫法)
$("selector").css("opacity","value")
設(shè)置透明度(支持所有瀏覽器),,value值(0 ~ 1)
$("selector").css("height")
獲取元素高度的height值
$("selector").height()
獲得元素當前計算的實際高度值,,肯定不會返回auto之類,還可以用來獲取window和document的高度
$("selector").height(100)
設(shè)置高度,,默認單位px,,如要使用其他單位需要傳遞字符串如.height(10em)
$("selector").width()
獲取元素當前計算的實際寬度值
$(selector).offset()
獲取元素在當前視窗的相對偏移,,返回對象包含兩個屬性,,top和left,此方法只對可見元素有效,。
P91獲取<p>元素的偏移量的例子
<script>var offset = $("p").offset();var left = offset.left();var top = offset.top();</script>$("selector").position()
獲取元素相對于最近的一個position樣式屬性設(shè)置為relative或者absolute的祖父節(jié)點的相對偏移,,返回對象包含兩個屬性,top和left,。例:
<script>var position = $("p").position();var left = position.left;var top = position.top;</script>$("selector").scrollTop()
獲取元素的滾動條距頂端的距離,,如:var scrollTop = $("selector").scrollTop();
$("selector").scrollLeft()
獲取元素的滾動條距左側(cè)的距離,如:var scrollLeft = $("selector").scrollLeft();
控制元素滾動條滾動到的位置,,可在上述兩種方法中傳遞參數(shù),,如:
$("textarea").scrollTop(300);
$("textarea").scrollLeft(300);