一、attr()
attr()方法設定或傳回元素的屬性。
attr(屬性名稱):取得元素屬性名稱的值。
attr(屬性名稱,屬性值):設定元素屬性名稱的值。
範例:
<a href=”http://127.0.01” id =”a1”>点我就变</a> <p>我改变后的地址是:<span id=”tip”></span></p> <script type=”text/javascript”> $(“#a1”).attr(“href”,”www.imooc.com”); var $url = $(“a1”).attr(“href”); $(“#tip”).html($url); </script>
二、html()、text()
html():取得元素的html內容,原文的格式程式碼也被抓取。
text():取得元素的html內容,原文的格式程式碼沒有抓取。
如果方法包含參數,則表示將參數值設為元素內容。
範例:
<p id=”html”></p> <p id=”text”></p> <script type=”text/javascript”> var $content=”<b>你好</b>”; $(“#html”).html($content); $(“#text”).text($content);</script>
三、addClass()、css()
addClass():操作元素中的樣式,參數為增加元素的樣式名稱。
css():直接將樣式的屬性內容寫在括號中。
範例:
<p id=”content”>我穿了一件红衣</p> … $(#content”).css({“background-color”:”red”,”color”:”white”});
四、removeAttr()、removeClass()
#removeAttr(name):實作移除元素的屬性名稱。
removeClass(class):實作移除元素的樣式名稱。
範例:
<p id=”content” class=”blue white”>我脱下了一件蓝衣</p>… $(“#content”).removeClass(“blue”,”white”);
五、append()
append(content):向指定的元素中國追加內容,content參數可以是字元、HTML元素標記、或一個傳回字串內容函數。
範例:
function rethtml(){ var $html = “<p id=”test” title=”hi”>我是调用函数创建的</p>” return $html; } $(“body”).append(rethtml());
六、appendTo()
#appendTo():向指定的元素內插入內容
#使用格式:$(content).appendTo(selelctor) ,content表示需要插入的內容,參數selector表示被選取的元素。
範例:
<p> <span class=”green”>小乌龟</span> </p> var $html = “<span class=”red”>小青蛙</span> $($html).appendTo(“p”);
七、before()、after()
before():在元素前面插入內容,
#格式:$ (selector).before(content。
after():在元素後面插入內容,
##格式:$(selector).after(content)。 #
<span class=”green”>交个朋友吧!</span>var $html = “<span class=”red”>兄弟</span>” $(“.green”).after($html);
clone():
產生一個被選元素的副本,
格式
:$(selector).clone(),
selector可以是一個元素或HTML內容
範例:##<span class=”green”>交个朋友吧!</span>
$(“body”).append($(“.green”).clone());
replaceWith():
取代元素或元素中的內容##,
格式
:$(selector).replaceWith(content)replaceAll():
取代元素或元素中的內容,格式
:##$(content).replaceAll (selector)範例:
#<span class=’green’ title=’hi’>我是屌丝</span>var $html = “<span class=’red’ title=’hi’>我是土豪</span>”;
$($html).repalceAll(“.green”);
用於包裹元素本身,
格式
$(selector).wrap(wrapper)
wraplnner():用於包裹元素中的內容,
##格式:$(selector).wrapInner(wrapper)#
wrapper参数为包裹元素的格式
例子:
<span class=”red” title=’hi’>我的身体有点歪</span> $(“.red”).wrapInner(“<b></b>”);
十一、each()
each():遍历指定的元素集合,通过回调函数返回遍历元素的序列号,
格式:$(selector).each(function(index))
参数function为遍历时的回调函数,index为遍历元素的序列号,从0开始。
例子:
<span class=”green”>香蕉</span> <span class=”green”>香蕉</span> <span class=”green”>香蕉</span> <span class=”green”>香蕉</span> $(“span”).each(function(index){ if(index == 1){ $(this).attr(“class”,”red”); } });
十二、remove()、empty()
remove():删除元素本身和子元素,通过添加过滤参数指定需要删除的某些元素;
empty():只删除所选元素的子元素
例子:
<span class=”green”>香蕉</span> <span class=”green”>香蕉</span> <span class=”green”>香蕉</span> <span class=”green”>香蕉</span> $(“span”).empty(“.green”);
以上是jQuery基礎語法使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!