屬性:
獲得標簽:$("#id")
獲得標簽內的代碼:.html()
獲得標簽內的文本:.text()
修改標簽內的代碼:.html("內容");
修改標簽內的文本:.html("內容");
獲得標簽屬性:.attr("屬性");
修改標簽屬性:attr("屬性","屬性值");
添加樣式:addClass("樣式名");
動態切換樣式:toggleClass("樣式名");
獲取樣式:css
添加元素:append("元素");
移去元素:.remove();
清空節點: .empty();
獲取第二個li節點: var $li=$("ul li:eq(1)");
獲取第二個li節點的文本內容: var li_txt=$
方法:
壹:插入節點:
append() 向每個匹配的元素文本內部的後面追加內容
eg:<p>我想說:</p>
代碼:
?$("p").append("<b>妳好</b>");結果為:<p>我想說:<b>妳好</b></p>
appendto() 將所有的匹配的元素追加到指定的元素中。實際上,使用該方法是顛倒了常規的$(A).append(B)的操作,即不是B追加到A中,而是將A追加到B文本的後面中。
eg:<p>我想說:</p>
代碼:?
$("<b>妳好</b>").appendTo("p");結果為:<p>我想說:<b>妳好</b></p>
prepend() 向每個匹配的元素文本的內部前置內容。
eg:<p>我想說:</p>
代碼:?
$("p").prepend("<b>妳好</b>");結果為:<p><b>妳好</b>我想說:</p>
prependto() 將所有的匹配的元素前置到指定的元素中。實際上,使用該方法是顛倒了常規的$(A).append(B)的操作,即不是B前置到A中,而是將A前置到B中
eg:<p>我想說:</p>
代碼:?
$("<b>妳好</b>").prependto("p");結果為:<p><b>妳好</b>我想說:</p>
after() 向每個匹配的元素之後插入內容 。
eg:<p>我想說:</p>
代碼:?
$("p").after("<b>妳好</b>");結果為:<p>我想說:<b>妳好</b></p>
insertAfter 將所有的匹配的元素插入到指定的元素後面。實際上,使用該方法是顛倒了常規的$(A).append(B)的操作,即不是B插入到A後面,而是將A插入到B後面。
eg:<p>我想說:</p>
代碼:?
$("<b>妳好</b>").after("p");結果為:<p>我想說:<b>妳好</b></p>
before() 在每個匹配的元素之前插入內容
eg:<p>我想說:</p>
代碼:?
$("<b>妳好</b>").after("p");結果為:<p>我想說:<b>妳好</b></p>
insertBefore():將A標簽插入到B標簽的前面
二:刪除:
①remove 該節點所包含的所有的後代節點將同時被刪除 也可以通過參數來選擇
②empty 清空節點,它能清空元素中的所有後代節點
三:替換節點:
①replaceWith() 作用是將所有匹配的元素都替換成指定的HTML或DOM元素
②replaceAll()?
四:包裹節點:
①warp() 作用是是將所有元素進行單獨包裹
②warpAll() 作用元素的是所有匹配的元素用壹個元素來包裹
③warpinner() 作用是將每壹個的子內容(包括文本節點)用其他結構化的標記包裹起來
五:設置和獲取HTML、文本值
1、html():
2、text
3、val
六:遍歷節點
1、children(): 取得匹配元素的子元素
2、next():取得匹配元素後面緊鄰的同輩元素
3、prev():取得匹配元素前面緊鄰的同輩元素
4、siblings():取得匹配元素前後所有的同輩元素
5、closest():取得最近的匹配元素
七:css-dom
css 獲取樣式的屬性
offset()
position
scroll
scrollLeft
樣式操作:
1:獲取樣式和設置樣式 attr
eg:<p class="myClass" title="選擇妳最喜歡的水果">妳最喜歡的水果是?</p>
獲取樣式: var p_class=$("p").attr("class");
設置樣式:$("p").attr("class","high");
2:追加樣式 addClass
<style>
.high{
font-weight:bold? 粗體字
color:red? 字體顏色
}
.another{
font-weight:italic? 斜體字
color:blue? 字體顏色
}
</style>
追加樣式:
?$("input:eq(2)").click(function(){$("p".addClass("another"))})☆在css中有以下規定:
①如果給壹個元素添加了多個class值,那麽就相當於合並了他們的樣式
②如果不同的class設置了同壹樣式,則後者覆蓋前者
addClass? attr
對同壹個網頁元素進行操作 <p>test</p> <p>test</p>
第壹次使用 $<"p">.addClass("high");? $<"p">.attr("class","high");
第壹次結果 <p class="high">test</p> <p class="high">test</p>
再次使用? $<"p">.addClass("another"); $<"p">.attr("class","another");
最終結果? <p class="high another">test</p> <p class="another">test</p>
3:移除樣式 removeClass
<p class="high another">test</p>?
移除壹個:$<"p">.removeClass("high");
移除二個:$<"p">.removeClass("high").removeClass("another");==$<"p">.removeClass("high another")
移除全部:$<"p">.removeClass();
4:切換樣式 toggle
5:判斷是否含有摸個樣式 hasClass
可以用來判斷元素中是否含有某個class,如果有返回true否則返回false