jQueryによるページ要素の効率的な操作例を詳しく解説

jQuery はページ要素を効率的に操作できます。

---

DOMとCSSページ要素の選択について:

$("span"); //すべてのspan要素

$("#elem") //idを持つ要素

$(" .classname "); //クラス名を持つ要素

$("div#elem"); //dc6dce4a544fdca2df29d5ac0ea9906b ID elem を持つ要素

$("ul li a.menu"); //クラス 3499910bf9dac5ae3c52d5ede7383485 "menu"のタグ

$("p>span"); //pの直接の子要素span

$("input[type=password]") //指定された型の入力要素

; $("p:first"); //ページの最初の段落

$("p:even") //すべての偶数段落

$(":header");要素(h1～h6)

$(":button"); //すべてのボタン要素

$(":radio");

$(":checked") ; //選択された状態の選択ボックスまたはセグメント選択ボックス

html() すべての HTML (テキストを含む) を取得する JavaScript の innerHTML と同様に、要素または要素のグループの HTML コンテンツを取得します。

• var htmlContent=$("#elem").html();

$("#elem").html("e388a4556c0f65e1904146cc1a846beeHere is some new content.94b3e26ee717c64999d7867364b1b4a3");/*修改内容*/

text() は要素のテキスト内容のみを取得し、次のように内容を取得および変更します。

• var textContent=$("#elem").text();
  $("#elem").text("new content");     //修改内容
  $("#elem").append("<p>Here is some new content.</p>")   //添加文本内容

attr() は要素固有の値を返します。属性値 (グループ内で使用される場合) は、最初の要素の値を返します。

• var title=$("#elem").attr("title");    //返回属性值
  
  $("#elem").attr("title","new title");    //修改属性值

show() // 要素を表示 $("div").show();

• hide() // 要素を非表示、遅い値は約 600 ミリ秒です

• $("#elem").hide("slow",function(){

///非表示後の操作

});

$("#elem").fadeOut("slow",funtion(){

// フェード後の操作

｝)；

---

$("#elem").fadeIn(500,function( ; Opacity、最終的な不透明度が 0.5 にフェードインまたはフェードアウトすることを示します });

2. スライド、フェードインとフェードアウトに似ています

slideDown();

slideUp();

slideToggle();

3.アニメーション

animate()は多くのCSSスタイルに適用できます。たとえば、要素の高さと幅を変更し、フェードアウトして非表示にします。

$("#elem").animate(
    {
        width:400px;
        height:400px;
       },1500,function(){
               $(this).fadeOut("slow");
                }
  );

コマンドチェーン

同じ要素セットに対して多くの操作を連続して実行できます:

$ ("#elem") .text("jQuery からこんにちは").fadeOut().fadeIn();

以上がjQueryによるページ要素の効率的な操作例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。