ホームページ  >  記事  >  ウェブフロントエンド  >  jQueryの基本構文の使い方

jQueryの基本構文の使い方

一个新手
一个新手オリジナル
2017-09-29 09:53:011298ブラウズ

1. 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>

2, 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>

Three、addClass()、css()

addClass(): は要素内のスタイルを操作し、パラメータは追加されたスタイル名です要素。

css(): スタイルの属性内容を括弧内に直接記述します。

例:


<p id=”content”>我穿了一件红衣</p>   …
   $(#content”).css({“background-color”:”red”,”color”:”white”});

4. removeAttr()、removeClass()

removeAttr(name):削除された要素の属性名を実装します。

removeClass(class):削除された要素のスタイル名を実装します。

例:


<p id=”content” class=”blue white”>我脱下了一件蓝衣</p>…
$(“#content”).removeClass(“blue”,”white”);

5. append()

append(content): 指定された要素 China にコンテンツを追加します。 content パラメータには、文字、HTML 要素タグ、またはを指定できます。戻り文字 String コンテンツ関数。

例:


function rethtml(){   
var $html = “<p id=”test” title=”hi”>我是调用函数创建的</p>”  
return $html;
}
$(“body”).append(rethtml());

6. appendTo()

appendTo():指定された要素にコンテンツを挿入します

フォーマットを使用します: $(コンテンツ)。 (selector)、contentは挿入する必要があるコンテンツを表し、パラメータselectorは選択された要素を表します。

例:

<p>
  <span class=”green”>小乌龟</span>
</p> var $html = “<span class=”red”>小青蛙</span>
 $($html).appendTo(“p”);

Seven、before()、after()

before():

要素の前にコンテンツを挿入します、

Format

: $ (selector).before(content.

after():

要素の後にコンテンツを挿入します。

形式

:$(selector).after(content).

例:

rreee

8。 )、

selector

は要素またはHTML

content

例:

<span class=”green”>交个朋友吧!</span>var $html = “<span class=”red”>兄弟</span>”
$(“.green”).after($html);
9。 replaceWith() : 要素内の要素またはコンテンツを置換します,

Format

:

$(selector).replaceWith(content)

replaceAll():

要素または要素内のコンテンツを置換します

形式

:$(content).replaceAll(selector)

例:

<span class=”green”>交个朋友吧!</span>
$(“body”).append($(“.green”).clone());
10.wrap()、wrapInner()

ラップ(): は要素自体をラップするために使用されます。

形式 :

$(selector).wrap(wrapper)

wraplnner():

は要素内のコンテンツをラップするために使用されます、

形式:

$(セレクター).wrapInner(ラッパー)

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 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。