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

표시 예: jquery 코드:

코드 복사 코드는 다음과 같습니다. $(document).ready(function(){ alert($("ul li:eq(1)").text()); //선택 두 번째 li alert($("p").attr("title")) 값 //p의 title 속성 값 선택 //요소 추가 $('ul ').append (" 바나나 ").append(" 시드니>") // 앞에 추가 $('ul').prepend(" 앞에 추가>") // $('ul') 추가 .after(" 다음에 추가 ") // 추가$(" 안녕하세요 $(" 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 속성과 유사합니다. //값 변경 Alert($("p").text( )); //text() 값 가져오기는 javascript의 innerTEXT 속성과 유사합니다 $("p").text("다시 변경") //값 변경 $("#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("배경","노란색") $("#password"); css("배경","노란색"); } }) $("#single").val("2개 선택") $("#multiple") .val(["2번 선택", "3번 선택"]) $(":checkbox").val(["check2","check3"]) $(" :radio").val(["radio1"]); alert("조심하세요! "); $("#single :eq(2)").attr("selected",true); $("[value=radio2]:radio").attr("checked", 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()) //siblings() 메서드를 사용하여 일치 항목을 가져옵니다. 요소 모든 형제 요소 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 두 가지 속성 alert("top=" $("P").offset().top ";" "left=" $("P").offset().left) // position() 메소드는 위치 스타일이 상대 또는 절대 //로 설정된 가장 가까운 상위 노드를 기준으로 요소의 상대 오프셋을 가져오고 두 속성 top 및 left를 반환합니다 alert("top=" $(" P").position().top ";" "left=" $("P").position().left) //scrollTop() 및 scrollLest() 메소드는 상단 및 스크롤 막대 거리의 왼쪽 끝 alert("scrolltop=" $("P").scrollTop() ";" "scrollleft=" $("P").scrollLeft()) }) ; &lt ;/script>

html 코드:

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

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

< input type="text" id="name" value="사용자 이름을 입력하세요"

비밀번호를 입력하세요 </div&gt ;

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