DOM_jqueryを操作するためのjqueryの基本的な使い方を共有する

表示例: jquery コード:

コードをコピー コードは次のとおりです: $(document).ready(function(){ alert($("ul li:eq(1)").text()); //選択2 番目の li alert($("p").attr("title")) の値 //p の title 属性の値を選択 //要素を追加 $('ul ').append (" バナナ ").append(" シドニー ");前に追加 $('ul').prepend(" Prepend "); // $('ul') を追加.after(" 後に追加 "); // $(" Hello //追加 $(" Hello ").insertBefore("p"); //ノードを削除 $("ul :eq(1)").remove(); // 値をクリア $("ul :eq(2)").empty(); // ノードをコピー $( "ul li").click(function(){ $(this).clone(true).appendTo("ul");//true はオプションです。これは、コピー時にバインドされたイベントも同時にコピーされました }); //ノードを置き換えます $("p[title=test]").replaceWith(" //$(" あなたの好きな果物は何ですか? ").replaceAll("P"); //イベントをラップします $(" strong").wrap(" ") //属性操作 $("P").attr( {"title":"test","name": "pName"}); // 属性を追加 $("p").removeAttr("title") // 属性を削除 // スタイル操作 /* スタイルを追加します: $ ("p").addClass("hight"); 既存のスタイル: $("p").removeClass("highr"); スタイルの切り替え: $("p").toggleClass("another" "); スタイルの有無: $("p").hasCLass("higth"); */ alert( $("p").html()); //値を取得します html() は、javascript $("p").html("change") の innerHTML 属性に似ています。 //値を変更します alter($("p").text( )); //値を取得します text() は javascript $("p").text("again change") の値を取得します。 //値を変更します $("#name) ").focus(function(){ if($("#name").val()=="ユーザー名を入力してください"){ $(this) .val(""); } }).blur(function(){ if($("#name").val()==""){ $( this).val("を入力してくださいあなたのユーザー名"); } }); $("#password").focus(function(){ $("#tip") .hide(); }).blur(function(){ if($("#password").val()==""){ $("#tip").show(200); } }); $("#submit").click(function(){ if($("#name").val()== "ユーザー名を入力してください"|| $("#password").val()==""){ $("#name").css("background"," yellow"); $("#password"); css("背景","黄色"); } }); $("#single").val("選択 2"); .val(["2番を選択", "3番を選択"]); $(":checkbox").val(["check2","check3"]); :radio").val(["radio1"]); alert("注意してください! "); $("#single :eq(2)").attr("選択済み",true); $("[値=ラジオ2]:ラジオ").attr("チェック済み", true); // ノードの Children() メソッドをトラバースします $("#btnShow").click(function(){ for(var i=0;i$("#body").append($("body").children()[i].innerHTML); //next() メソッド、p の直後に兄弟のすべての要素を取得します。 alert($("ul li").next().text()); //prev() メソッド, alert($("li[title=pineapple]").prev().text()); の直前の兄弟の要素を取得して、一致するものを取得します。 element すべての兄弟要素 for(var i=0;i$("#subling").append($("p" ).siblings()[i].innerHTML); } //closest() メソッドで最も近い要素を取得します $(document).bind("click",function(e){ $(e.target).closest("li").css("color","red"); //css 操作 $("p" ); .css({"fontSize":"40px","background":" yellow"}); //offset() メソッドは、現在のウィンドウ内の要素の相対オフセットを取得し、オブジェクトの上部と上部を返します。 left 2 つの属性 alert("top=" $("P").offset().top ";" "left=" $("P").offset().left); Position() メソッドは、位置スタイルが相対または絶対 // に設定されている最も近い祖父母ノードを基準とした要素の相対オフセットを取得し、top と left の 2 つの属性 alert("top=") を返します。 $(" P").position().top ";" "left=" $("P").position().left); //scrollTop() メソッドとscrollLest() メソッドは先頭とスクロールバーの左端の距離 alert("scrolltop=" $("P").scrollTop() ";" "scrollleft=" $("P").scrollLeft()); ; &lt ;/script>

html コード:

コードをコピーします

以下のように: test

あなたの好きなリンゴは何ですか?

/li> > パイナップル

input type="text" id="name" value="ユーザー名を入力してください">

パスワードを入力してください

> No. 1 No.2 を選択 No.3 を選択. 1 番を選択 2 番を選択 3 番を選択 4 番を選択 5 番を選択;/option> 複数選択 1 複数選択 2 複数選択 3 複数選択 4 単一選択肢 1 ラジオ 3

/div>