티스토리

MelonPeach
검색하기

블로그 홈

MelonPeach

melonpeach.tistory.com/m

웹개발과 맛있는음식, 게임을 좋아하는 개발자입니다.!

구독자
17
방명록 방문하기
공지 오픈채팅방 모두보기

주요 글 목록

  • 48. jquery Method [ .wrapAll() ] - 선택한 요소 모두를 새로운 태그로 감사는 메소드 48. jquery Method [ .wrapAll() ] - 선택한 요소 모두를 새로운 태그로 감사는 메소드 jquery wrapAll() 메소드에 대해 알아봅니다. 문법 .wrapAll() 예를 들어 $("p").wrapAll(""); p태그들을 모아서 div태그로 감쌉니다. 예제 코드 MelonPeach1 MelonPeach MelonPeach2 실행 테스트 .wrapAll(wrappingElement) : Wrap an HTML structure around all elements in the set of matched elements. 조건에 일치하는 요소들의 HTML 구조를 감쌉니다. .wrapAll() 메소드는 $()형식으로 쓰는 함수에서 나온 문자열 또는 객체로 감쌀 수 있습니다. Hell.. 공감수 108 댓글수 0 2020. 2. 26.
  • 47. jquery Method [ .wrap() ] - 선택한 요소를 원하는 태그로 감싸는 메소드 47. jquery Method [ .wrap() ] - 선택한 요소를 원하는 태그로 감싸는 메소드 문법 .wrap() 원하는 태그로 감쌉니다. 예를 들어 $("p").wrap(""); p태그를 선택하고 div태그로 감쌉니다. 예제 코드 MelonPeach 실행 테스트 공감수 77 댓글수 0 2020. 2. 26.
  • 46. jquery Method [ .val() ] - 값을 가져오거나 바꾸는 메소드 46. jquery Method [ .val() ] - 값을 가져오거나 바꾸는 메소드 문법 .val() 값을 가져옵니다. 예를 들어 var a = $("#melon").val(); 변수 a에 id가 melon인 요소의 value를 가져옵니다. 예제 코드 실행 테스트 공감수 788 댓글수 0 2020. 2. 26.
  • 45. jquery Method [ .unwrap() ] - 선택한 요소의 상위태그를 제거하는 메소드 45. jquery Method [ .unwrap() ] - 선택한 요소의 상위태그를 제거하는 메소드 문법 .unwrap() 선택한 요소의 상위태그를 제거합니다. 예를 들어 $("p").unwrap(); p태그의 상위 태그를 지웁니다. 예제 코드 MelonPeach 버튼 실행 테스트 See the Pen 045 by youngjins (@youngjins) on CodePen. 공감수 274 댓글수 0 2020. 2. 26.
  • 44. jquery Method [ .width() ] - 선택한 요소의 가로 크기를 반환하거나 변경하는 메소드 44. jquery Method [ .width() ] - 선택한 요소의 가로 크기를 반환하거나 변경하는 메소드 문법 .width() 예를 들어 var a = $("#melon").width(); $("p").text(a); 변수 a에 id가 melon인 요소의 가로넓이를 저장합니다. 예제 코드 실행 테스트 공감수 343 댓글수 0 2020. 2. 26.
  • 43. jquery Method [ .toggleClass() ] - 선택한 요소의 클래스 값을 추가하거나 제거하는 메소드 43. jquery Method [ .toggleClass() ] - 선택한 요소의 클래스 값을 추가하거나 제거하는 메소드 문법 .toggleClass() 예를 들어 $("p").toggleClass("melon"); p태그에 melon이라는 class를 추가하거나 제거합니다. 예제 코드 MelonPeach 버튼 실행 테스트 See the Pen 043 by youngjins (@youngjins) on CodePen. 공감수 49 댓글수 0 2020. 2. 26.
  • 42. jquery Method [ .toggle() ] - 선택한 요소를 보이지 않게 하거나 보이게 하는 메소드 42. jquery Method [ .toggle() ] - 선택한 요소를 보이지 않게 하거나 보이게 하는 메소드 문법 .toggle() 선택한 요소를 보이지 않게 하거나 보이게 하는 메소드입니다. 예를 들어 $("p").toggle("slow"); p태그의 요소를 숨기거나 보여줍니다. 예제 코드 MelonPeach 버튼 실행 테스트 See the Pen 042 by youngjins (@youngjins) on CodePen. 공감수 301 댓글수 0 2020. 2. 26.
  • 41. jquery Method [ .text() ] - 선택한 요소안의 내용을 가져오거나 바꾸는 메소드 41. jquery Method [ .text() ] - 선택한 요소안의 내용을 가져오거나 바꾸는 메소드 문법 .text() 선택한 요소안의 내용을 가져오거나 바꾸는 메소드입니다. 예를 들어 var a= $("p").text(); $("#melon").text(a); p태그의 내용을 변수a에 저장합니다. id가 melon인 요소안에 변수a에 저장했던 내용을 추가합니다. 예제 코드 AAAAAA 실행 테스트 공감수 218 댓글수 0 2020. 2. 26.
  • 40. jquery Method [ .slice() ] - 일치하는 요소의 일부분만 선택하는 메소드 40. jquery Method [ .slice() ] - 일치하는 요소의 일부분만 선택하는 메소드 문법 .slice() 예를 들어 $("p").slice(2,4).css("color", "red"); slice(2, 4)는 2부터 시작해서 4전까지 즉 2와 3까지 color를 red로 바꿉니다. 예제 코드 AAAAAA AAAAAA AAAAAA AAAAAA AAAAAA 실행 테스트 공감수 261 댓글수 0 2020. 2. 26.
  • 39. jquery Method [ .scrollTop() ] - 선택한 요소의 스크롤바 수직 위치를 반환하거나 위치를 정하는 메소드 39. jquery Method [ .scrollTop() ] - 선택한 요소의 스크롤바 수직 위치를 반환하거나 위치를 정하는 메소드 문법 .scrollTop() 예를 들어 $("div").scrollTop(); div태그 요소의 스크롤바 수직 위치를 가져옵니다. 예제 코드 I will always remember The day you kissed my lips Light as a feather And it went just like this No, it's never been better Than the summer of 2002 (ooh) Uh, we were only eleven But acting like grown-ups Like we are in the present Drinking from .. 공감수 38 댓글수 0 2020. 2. 26.
  • 38. jquery Method [ .resize() ] - 웹브라우저 크기가 변할때 실행되는 메소드 38. jquery Method [ .resize() ] - 웹브라우저 크기가 변할때 실행되는 메소드 문법 .resize() 웹브라우저 크기가 변할때 실행되는 메소드 예를 들어 $(window).resize(function(){ a = $("#width").width(); b = $("#height").height(); $("#width").empty().append("width : "+a); $("#height").empty().append("height : "+b); }) 웹브라우저의 사이즈가 변경될때 실행됩니다. 예제 코드 실행 테스트 공감수 992 댓글수 0 2020. 2. 26.
  • 37. jquery Method [ .replaceWith() ] - 선택한 요소를 다른것으로 바꾸는 메소드 37. jquery Method [ .replaceWith() ] - 선택한 요소를 다른것으로 바꾸는 메소드 문법 .replaceWith() 예를 들어 $("p").replaceWith("MelonPeach"); p태그의 요소를 바꿉니다. 주의할점은 p태그도 h1태그로 바뀝니다. 예제 코드 MelonPeach 버튼 실행 테스트 See the Pen 037 by youngjins (@youngjins) on CodePen. 공감수 505 댓글수 0 2020. 2. 26.
  • 36. jquery Method [ .removeClass() ] - 선택한 요소의 클래스 값을 제거하는 메소드 36. jquery Method [ .removeClass() ] - 선택한 요소의 클래스 값을 제거하는 메소드 문법 .removeClass() 예를 들어 $(".a").removeClass("a"); class가 a인 요소를 선택하고 class a를 지웁니다. 예제 코드 MelonPeach 버튼 실행 테스트 공감수 52 댓글수 0 2020. 2. 26.
  • 35. jquery Method [ .removeAttr() ] - 선택한 요소의 속성을 제거하는 메소드 35. jquery Method [ .removeAttr() ] - 선택한 요소의 속성을 제거하는 메소드 문법 .removeAttr() 예를 들어 $("input").removeAttr("value"); input태그를 선택하고 value속성을 삭제합니다. 예제 코드 버튼 버튼을 누르면 input태그의 value속성이 사라집니다. 실행 테스트 See the Pen 035 by youngjins (@youngjins) on CodePen. 공감수 3,815 댓글수 0 2020. 2. 26.
  • 34. jquery Method [ .remove() ] - 선택한 요소를 삭제하는 메소드 34. jquery Method [ .remove() ] - 선택한 요소를 삭제하는 메소드 문법 .remove() 선택한 요소를 삭제합니다. 예를 들어 $("p").remove(); p태그를 선택하고 삭제합니다. 예제 코드 MelonPeach 버튼 버튼을 클릭하면 p태그의 요소를 지웁니다. 실행 테스트 See the Pen zYGZNNL by youngjins (@youngjins) on CodePen. 공감수 620 댓글수 0 2020. 2. 26.
  • 33. jquery Method [ .prop() ] - 속성의 값을 가져오거나 추가하는 메소드 33. jquery Method [ .prop() ] - 속성의 값을 가져오거나 추가하는 메소드 문법 .prop() 속성의 값을 가져옵니다. 예를 들어 var result = $("#a").prop("value"); $("#b").html(result); $("#c").prop("value", "MelonPeach"); id가 a인 요소의 value값을 변수result에 저장합니다. id가 b인 요소의 내용을 넣습니다. id가 c인 요소의 value에 값을 넣어줍니다. 예제 코드 id가 a인 요소에 있는 value값 abc를 가져와서 id가 b인 p태그에 추가합니다. id가 c인 요소 value에 MelonPeach값을 추가해줍니다. 실행 테스트 공감수 102 댓글수 0 2020. 2. 26.
  • 32. jquery Method [ .prepend() ] - 선택한 요소 내용앞에 추가하는 메소드 32. jquery Method [ .prepend() ] - 선택한 요소 내용앞에 추가하는 메소드 문법 .prepent() 선택한 요소 내용앞에 추가합니다. 예를 들어 $("p").prepend("MelonPeach"); p태그내용 앞에 h1태그를 추가합니다. 예제 코드 BBBB p태그 내용 앞에 h1태그를 생성하여 추가합니다. 그럼 MelonPeachBBBB 이런식으로 나오겠지요 실행 테스트 공감수 17 댓글수 0 2020. 2. 26.
  • 31. jquery Method [ .parent() ] - 요소의 부모 요소를 선택하는 메소드 31. jquery Method [ .parent() ] - 요소의 부모 요소를 선택하는 메소드 문법 .parent() 요소의 부모 요소를 선택합니다. 예를 들어 $("p").parent().css("color", "red"); p태그의 부모요소 color를 red로 바꿉니다. $("p").parent("div").css("color", "gray"); p태그의 부모요소가 div일때 color를 gray로 바꿉니다. 예제 코드 AAAA BBBB p태그로 되어있는 AAAA는 red로 바뀌고 div안에 p태그로 되어있는 BBBB는 gray로 바뀝니다. 실행 테스트 공감수 162 댓글수 0 2020. 2. 26.
  • 30. jquery Method [ .offset() ] - 선택한 요소의 좌표를 가져오거나 이동시키는 메소드 30. jquery Method [ .offset() ] - 선택한 요소의 좌표를 가져오거나 이동시키는 메소드 문법 .offset() 선택한 요소의 좌표를 가져옵니다. 예를 들어 var one = $("#a").offset(); id가 a인 요소의 좌표를 변수one에 저장합니다. 예제 코드 AAA id가 a인 p태그 아래에 좌표를 표시해줍니다 실행 테스트 공감수 83 댓글수 0 2020. 2. 26.
  • 29. jquery Method [ .not() ] - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메소드 29. jquery Method [ .not() ] - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메소드 선택한 요소중 특정 선택자를 제외하고 요소를 선택합니다. 문법 .not() 예를 들어 $("p").not($("#a")).css("color", "red"); p태그 중 id가 a인 태그를 제외하고 color를 red로 바꿔줍니다. 예제 코드 AAA BBB CCC 첫번째 p태그와 세번째 p태그만 color가 red로 바뀝니다. 실행 테스트 공감수 1,945 댓글수 0 2020. 2. 26.
  • 28. jquery Method [ .load() ] - 다른 경로에 있는 문서를 가져와 현재 문서에 넣어주는 메소드 28. jquery Method [ .load() ] - 다른 경로에 있는 문서를 가져와 현재 문서에 넣어주는 메소드 문법 .load(url data complete) url은 가져올 문서 data는 가져올 문서에서의 data complete는 요청이 완료되면 호출되어질 콜백 함수입니다. 예제코드 027.jsp WellCome 028.jsp id가 aa인 태그에 027문서를 가져옵니다. id가 bb인 태그에 027문서안에 id가 c인 요소를 가져오고 완료되면 alert에 WellCome이 나옵니다. 실행 테스트 공감수 1,379 댓글수 0 2020. 2. 25.
  • 27. jquery Method [ jQuery.trim() ] - 문자열의 앞과 끝 공백을 제거하는 메소드 27. jquery Method [ jQuery.trim() ] - 문자열의 앞과 끝 공백을 제거하는 메소드 문법 jQuery.trim() 예를 들어 jQuery.trim(str) str에 들어있는 문자열의 앞과 끝 공백을 제거합니다. 중간에 있는 공백은 제거하지 않습니다. 예제 코드 실행 테스트 공감수 214 댓글수 0 2020. 2. 25.
  • 26. jquery Method [ jQuery.inArray() ] - 배열에서 특정 문자를 찾는 메소드 26. jquery Method [ jQuery.inArray() ] - 배열에서 특정 문자를 찾는 메소드 문법 jQuery.inArray(value, array) value에는 검색하려는 값을 넣습니다. array에는 배열의 이름을 넣습니다. 예를 들어 jQuery.inArray("AAAA", arr); arr이라는 배열에서 "AAAA"라는 문자를 찾습니다. 예제 코드 AAAA BBBB CCCC DDDD 버튼 p태그의 인덱스를 구하고 인택스에 해당하는 내용을 arr배열에 넣어줍니다. jQuery.inArray()메소드를 이용하여 AAAA문자를 찾습니다. arr에는 AAAA, BBBB, CCCC, DDDD가 있는데 inArray로 인덱스의 값을 찾았을 경우 AAAA에 해당하는 인덱스값은 0이고 인덱스의 .. 공감수 2,229 댓글수 0 2020. 2. 25.
  • 25. jquery Method [ .html() ] - 선택한 요소의 내용을 가져오거나 바꾸는 메소드 25. jquery Method [ .html() ] - 선택한 요소의 내용을 가져오거나 바꾸는 메소드 문법 .html() 예를 들어 $("#a").html("Melon"); id가 a인 태그를 선택하고 Melon으로 내용을 바꿉니다. 예제 코드 AAAA 아이디가 a인 태그를 선택하고 그 태그의 내용을 바꿔줍니다. 아이디가 b인 태그를 선택하고 그 태그에 내용을 추가합니다. 실행 테스트 공감수 169 댓글수 0 2020. 2. 24.
  • 24. jquery Method [ .hover() ] - 선택한 요소에 마우스를 올리거나 선택한 요소에서 마우스가 벗어났을때 실행되는 메소드 24. jquery Method [ .hover() ] - 선택한 요소에 마우스를 올리거나 선택한 요소에서 마우스가 벗어났을때 실행되는 메소드 문법 .hover() 예를 들어 $("p").hover(); p태그에 마우스를 올려 놓으면 실행 됩니다. 예제 코드 AAAA div태그에 마우스를 올려놓으면 p태그 내용의 color가 red로 바뀌고 마우스가 벗어나면 color가 black로 바뀝니다. 실행 테스트 See the Pen 024 by youngjins (@youngjins) on CodePen. 공감수 1,675 댓글수 0 2020. 2. 24.
  • 23. jquery Method [ .hide() ] - 선택한 요소를 숨기는 메소드 23. jquery Method [ .hide() ] - 선택한 요소를 숨기는 메소드 문법 .hide() 선택한 요소를 바로 사라지게 합니다. 예를 들어 $("p").hide(); p태그를 숨깁니다. 예제 코드 AAAA BBBB CCCC DDDD 버튼 실행 테스트 See the Pen NWqdxGL by youngjins (@youngjins) on CodePen. 공감수 202 댓글수 0 2020. 2. 24.
  • 22. jquery Method [ .has() ] - 특정 요소를 갖는 요소를 선택하는 메소드 22. jquery Method [ .has() ] - 특정 요소를 갖는 요소를 선택하는 메소드 문법 .has() 예를 들어 $("p").has("span"); p태그중 span태그가 있는 p태그를 선택합니다. 예제 코드 MelonPeach MelonPeach2 실행 테스트 공감수 143 댓글수 0 2020. 2. 24.
  • 21. jquery Method [ .get() ] - 선택한 요소를 배열로 가져오는 메소드 21. jquery Method [ .get() ] - 선택한 요소를 배열로 가져오는 메소드 문법 .get() 예를 들어 $("p").get; p태그의 요소를 배열로 가져옵니다. 예제 코드 Wellcome Melon Peach tistory p태그에 있는 내용을 배열로 저장합니다. 그리고 div태그에 내용을 추가합니다. 실행 테스트 공감수 1,917 댓글수 0 2020. 2. 21.
  • 20. jquery Method [ .find() ] - 어떤 요소의 하위 요소를 찾는 메소드 20. jquery Method [ .find() ] - 어떤 요소의 하위 요소를 찾는 메소드 문법 .find(selector) 예를 들어 $("div").find("p") div태그의 하위요소 p태그를 선택합니다. 예제 코드 MelonPeach div태그의 하위태그 p태그를 선택하고 color를 red로 바꿉니다. 실행 테스트 공감수 153 댓글수 0 2020. 2. 21.
  • 19. jquery Method [ .fadeToggle() ] - 보이는 요소는 보이지않게, 보이지 않는 요소는 보이게 하는 메소드 19. jquery Method [ .fadeToggle() ] - 보이는 요소는 보이지않게, 보이지 않는 요소는 보이게 하는 메소드 문법 .fadeToggle() 예를 들어 .fadeToggle("slow"); .fadeToggle(600); .fadeToggle(function(){ }) 문자로 시간을 정할때에는 "slow" 숫자로 시간을 정할때에는 숫자 fadeToggle가 실행된후 불러올 함수 예제 코드 MelonPeach 버튼A 실행 테스트 See the Pen 019 by youngjins (@youngjins) on CodePen. 공감수 138 댓글수 0 2020. 2. 21.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.