DOM_jquery를 작동하기 위한 jquery의 기본 사용법 공유

표시 예:
jquery 코드:

코드 복사 코드는 다음과 같습니다.

<script> <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='바나나'>바나나").append("<li title='시드니'>시드니") <BR>// 앞에 추가 <BR>$('ul').prepend("<li title='Not Good'>앞에 추가") <BR>//<BR>$('ul') 추가 .after("<li title='다음에 추가'>다음에 추가") <BR>//<BR> 추가$("<b> 안녕하세요&gt ;").insertAfter( "p");//추가 <BR>$("<b> Hello").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&gt ;가장 좋아하는 과일은 무엇입니까? &gt ;"); <BR>//$("<strong>가장 좋아하는 과일은 무엇입니까?").replaceAll("P"); <BR>//랩 이벤트<BR>$(" Strong").wrap("<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>&lt ;/script> <BR><BR> <BR>html 코드: <BR></script>

코드 복사 다음과 같습니다:

test

가장 좋아하는 사과는 무엇인가요?

• 애플


• 
  
• pineapple
  

>

비밀번호를 입력하세요

> ;

1번
2번 선택
3번 선택 .


1번 선택
2번 선택
3번 선택
4번 선택
5번 선택

다중 선택 1
객관식 2
객관식 3
객관식 4
< ;input type="radio" name="radio" value="radio1"/> 단일 선택 1
라디오 3