表示例: jquery コード: コードをコピー コードは次のとおりです: <br>$(document).ready(function(){ <br>alert($("ul li:eq(1)").text()); //選択2 番目の li<br>alert($("p").attr("title")) の値 //p の title 属性の値を選択<br>//要素を追加<br>$('ul ').append ("<li title='バナナ'>バナナ</li>").append("<li title='シドニー'>シドニー</li>");前に追加 <br>$('ul').prepend("<li title='Not Good'>Prepend</li>"); <br>// <br>$('ul') を追加.after("<li title='後に追加'>後に追加</li>"); <br>//<br>$("<b> Hello</b> ;").insertAfter( "p"); <br>//追加 <br>$("<b>Hello</b>").insertBefore("p"); <br> //ノードを削除<br>$("ul :eq(1)").remove(); <br>// 値をクリア<br>$("ul :eq(2)").empty(); <br>// ノードをコピー<br>$( "ul li").click(function(){ <br>$(this).clone(true).appendTo("ul");//true はオプションです。これは、コピー時にバインドされたイベントも同時にコピーされました <br>}); <br>//ノードを置き換えます<br>$("p[title=test]").replaceWith("<strong> ;好きな果物は何ですか? </strong> ;"); <br>//$("<strong>あなたの好きな果物は何ですか?</strong>").replaceAll("P"); <br>//イベントをラップします<br>$(" strong").wrap("<b></b>") <br>//属性操作<br>$("P").attr( {"title":"test","name": "pName"}); // 属性を追加<br>$("p").removeAttr("title") // 属性を削除<br>// スタイル操作 <br>/* <br>スタイルを追加します: $ ("p").addClass("hight"); <br>既存のスタイル: $("p").removeClass("highr"); スタイルの切り替え: $("p").toggleClass("another" "); <br>スタイルの有無: $("p").hasCLass("higth"); <br>*/ <br>alert( $("p").html()); //値を取得します html() は、javascript<br>$("p").html("change") の innerHTML 属性に似ています。 //値を変更します<br> alter($("p").text( )); //値を取得します text() は javascript<br>$("p").text("again change") の値を取得します。 //値を変更します <br>$("#name) ").focus(function(){ <br>if($("#name").val()=="ユーザー名を入力してください"){ <br>$(this) .val(""); <br>} <br>}).blur(function(){ <br>if($("#name").val()==""){ <br>$( this).val("を入力してくださいあなたのユーザー名"); <br>} <br>}); <br>$("#password").focus(function(){ <br>$("#tip") .hide(); <br> }).blur(function(){ <br>if($("#password").val()==""){ <br>$("#tip").show(200); <br> } <br>}); <br>$("#submit").click(function(){ <br>if($("#name").val()== "ユーザー名を入力してください"|| $("#password").val()==""){ <br>$("#name").css("background"," yellow"); <br> $("#password"); css("背景","黄色"); <br>} <br>}); <br>$("#single").val("選択 2"); .val(["2番を選択", "3番を選択"]); <br>$(":checkbox").val(["check2","check3"]); :radio").val(["radio1"]); <br>alert("注意してください! "); <br>$("#single :eq(2)").attr("選択済み",true); <br>$("[値=ラジオ2]:ラジオ").attr("チェック済み", true); <br>// ノードの Children() メソッドをトラバースします <br>$("#btnShow").click(function(){ <br>for(var i=0;i$("#body").append($("body").children()[i].innerHTML); <br>//next() メソッド、p の直後に兄弟のすべての要素を取得します。 <br>alert($("ul li").next().text()); <br>//prev() メソッド, <br>alert($("li[title=pineapple]").prev().text()); の直前の兄弟の要素を取得して、一致するものを取得します。 element すべての兄弟要素<br>for(var i=0;i$("#subling").append($("p" ).siblings()[i].innerHTML); <br>} <br>//closest() メソッドで最も近い要素を取得します <br>$(document).bind("click",function(e){ <br>$(e.target).closest("li").css("color","red"); <br>//css 操作<br>$("p" ); .css({"fontSize":"40px","background":" yellow"}); <br>//offset() メソッドは、現在のウィンドウ内の要素の相対オフセットを取得し、オブジェクトの上部と上部を返します。 left 2 つの属性 <br>alert("top=" $("P").offset().top ";" "left=" $("P").offset().left); Position() メソッドは、位置スタイルが相対または絶対 <br>// に設定されている最も近い祖父母ノードを基準とした要素の相対オフセットを取得し、top と left の 2 つの属性 <br>alert("top=") を返します。 $(" P").position().top ";" "left=" $("P").position().left); <br>//scrollTop() メソッドとscrollLest() メソッドは先頭とスクロールバーの左端の距離<br>alert("scrolltop=" $("P").scrollTop() ";" "scrollleft=" $("P").scrollLeft()); ; <br>< ;/script> <br><br> <br>html コード: <br><br><br><br><br> コードをコピーします <br><br><br>以下のように: </div> <div class="codebody" id="code24532"> <br><body> <br><p >test</p> <br><p id="p" title="test"> あなたの好きなリンゴは何ですか? </p> <br><li title="Apple">/li> <br><li title="オレンジ"</li> ><li title="パイナップル">パイナップル</li> <br></ul> <br><input type="button" id="show" value="show" /> ; ><br/><br/><br/> <br><form id="form1" action="#"> input type="text" id="name" value="ユーザー名を入力してください"><br/> <br><input type="password" id="password" value="" < ;br/> <br><div id="tip" style="display:none"><font color="red">パスワードを入力してください</font></div><br /> <br><input type="button" id="submit" value="Submit"/> <br></form> > <br><form id="from2" action="#"> <br><select id="single"> <br><option value="1 番を選択" > No. 1</option> <br><option value="No.2 を選択">No.2 を選択</option> <br><option value="No.2 を選択">No.3 を選択.</option> <br></select> <br><select id="multiple" style="height:120px"> <br><option selected="選択済み" >1 番を選択</option> <br><option value="2 番を選択">2 番を選択</option> <br><option value="3 番を選択"> 3 番を選択</option> <br><option value="4 番を選択">4 番を選択</option><BR><option selected="選択済み">5 番を選択;/option> <br></select> <br><input type="checkbox" value="check1"/>複数選択 1 <br><input type="checkbox" value="check2" />複数選択 2 <br><input type="checkbox" value="check3"/>複数選択 3 <br><input type="checkbox" value="check4"/>複数選択 4 <br><input type="radio" name="radio" value="radio1"/> 単一選択肢 1 <br><input type="radio" name="radio" value="radio2"/> ; 単一選択肢 2 <BR><input type="radio" name="radio" value="radio3"/> ラジオ 3 <br><br><input type="button" id=" btnShow" value="本文を表示"/> <br><br/><div id="body"></div> /div> <br></form> <br></body></option> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
