首頁 > web前端 > js教程 > 主體

jQuery基礎語法使用方法

一个新手
發布: 2017-09-29 09:53:01
原創
1379 人瀏覽過

一、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()

clone():

產生一個被選元素的副本,

格式

:

$(selector).clone(),

selector

可以是一個元素或HTML內容

範例:##

<span class=”green”>交个朋友吧!</span>
$(“body”).append($(“.green”).clone());
登入後複製
九、replaveWith()、replaceAll()

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”);
登入後複製
第十、wrap()、wrapInner()

wrap():

用於包裹元素本身,


格式

##:

$(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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板