當前位置:編程學習大全網 - 源碼下載 - jQuery常用屬性和方法有哪些

jQuery常用屬性和方法有哪些

屬性:

獲得標簽:$("#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

  • 上一篇:團團收充值卡回收是真的嗎
  • 下一篇:八菜鳥源代碼
  • copyright 2024編程學習大全網