표시 예: jquery 코드: 코드 복사 코드는 다음과 같습니다. <br>$(document).ready(function(){ <br>alert($("ul li:eq(1)").text()); //선택 두 번째 li<br>alert($("p").attr("title")) 값 //p의 title 속성 값 선택<br>//요소 추가<br>$('ul ').append ("<li title='바나나'>바나나</li>").append("<li title='시드니'>시드니>") <br>// 앞에 추가 <br>$('ul').prepend("<li title='Not Good'>앞에 추가>") <br>//<br>$('ul') 추가 .after("<li title='다음에 추가'>다음에 추가</li>") <br>//<br> 추가$("<b> 안녕하세요</b> ;").insertAfter( "p");//추가 <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> Alert($("p").text( )); //text() 값 가져오기는 javascript의 innerTEXT 속성과 유사합니다<br>$("p").text("다시 변경") //값 변경 <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("배경","노란색") <br> $("#password"); css("배경","노란색"); <br>} <br>}) <br>$("#single").val("2개 선택") <br>$("#multiple") .val(["2번 선택", "3번 선택"]) <br>$(":checkbox").val(["check2","check3"]) <br>$(" :radio").val(["radio1"]); <br>alert("조심하세요! "); <br>$("#single :eq(2)").attr("selected",true); <br>$("[value=radio2]:radio").attr("checked", true);//노드 children() 메서드 탐색 <br>$("#btnShow").click(function(){ <br>for(var i=0;i<$("body") . children().length;i ){ <BR>$("#body").append($("body").children()[i].innerHTML) <BR>} <BR>}); <BR>//next() 메서드, p <BR>alert($("ul li").next().text()) <BR>//prev() 메서드 바로 뒤에 있는 형제의 모든 요소를 가져옵니다. , 일치 항목 바로 직전에 형제 요소를 가져옵니다. <BR>alert($("li[title=pineapple]").prev().text()) <BR>//siblings() 메서드를 사용하여 일치 항목을 가져옵니다. 요소 모든 형제 요소<BR>for(var i=0;i<$("p").siblings().length;i ){ <BR>$("#subling").append($("p" ).siblings()[i].innerHTML); <BR>} <BR>//closest() 메소드를 사용하여 가장 가까운 일치 요소를 가져옵니다. <BR>$(document).bind("click",function(e){ <BR>$(e.target).closest("li").css("color","red") <BR>}) <BR>//css 작업<BR>$("p" ) .css({"fontSize":"40px","Background":"yellow"}); <BR>//offset() 메서드는 현재 창에 있는 요소의 상대 오프셋을 얻고 위쪽 및 위쪽 개체를 반환합니다. left 두 가지 속성 <BR>alert("top=" $("P").offset().top ";" "left=" $("P").offset().left) <BR>// position() 메소드는 위치 스타일이 상대 또는 절대 <BR>//로 설정된 가장 가까운 상위 노드를 기준으로 요소의 상대 오프셋을 가져오고 두 속성 top 및 left를 반환합니다 <BR>alert("top=" $(" P").position().top ";" "left=" $("P").position().left) <BR>//scrollTop() 및 scrollLest() 메소드는 상단 및 스크롤 막대 거리의 왼쪽 끝<BR>alert("scrolltop=" $("P").scrollTop() ";" "scrollleft=" $("P").scrollLeft()) <BR>}) ; <BR>< ;/script> <br><br> <br>html 코드: <br> </div> <br><br><div class="codetitle">코드 복사 <span><a style="CURSOR: pointer" data="24532" class="copybut" id="copybut24532" onclick="doCopy('code24532')"><u> 다음과 같습니다: </u><div class="codebody" id="code24532"> <br><body> <br><p >test</p> <br><p id="p" title="test">가장 좋아하는 사과는 무엇인가요? <br><ul> <br><li title="Apple">애플</li> <br><li title="오렌지"> <br> </li> <li title="pineapple"></ul> <br><input type="button" id="show" value="show" /> ><br/><br/><br/> <br><form id="form1" action="#"> <br><div> <br>< 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></div> <br><br/ > <br><form id="from2" action="#"> <br><select id="single"> <br><option value="1번 선택" > 1번</option> <br><option value="2번 선택">2번 선택</option><br><option value="2번 선택">3번 선택 .</option> <br></select> <br><select id="multiple" multiple="multiple" style="height:120px"><br><선택됨="선택됨" >1번 선택</option> <br><option value="2번 선택">2번 선택</option><br><option value="3번 선택"> 3번 선택</option> <br><option value="4번 선택">4번 선택</option><br><option selected="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 id="subling"< /div> <br></form> <br></body></div> </li> </ul> </div></a></span> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
