Skeleton의 세상

checkbox를 하나씩 클릭하기도 하지만 '모두동의' 와 같은 체크박스 하나만 선택해도 모든 체크박스가 선택되어야 하는 경우도 있습니다. 그럴때 사용하면 좋은 코드를 가져왔습니다. 먼저 예시로 사용할 HTML 코드부터 살펴봅시다. 전체 선택: 체크박스 1번 체크박스 2번 체크박스 3번 체크박스 4번 이러한 HTML코드가 있다고 생각해봅시다! 그럼 위와같은 그림이 나올텐데요! 그 다음은 스크립트를 작성해야겠죠? var $checkAll = $('#checkAll'); $checkAll.change(function () { var $this = $(this); var checked = $this.prop('checked'); // checked 문자열 참조(true, false) // console.log..

이걸 어찌 숨길까요? 이건 계속 나타나있답니다 이러한 HTML이 있다면 JQuery에서 hideDiv를 숨기려면 어떻게 해야할까요? 그 숨긴걸 다시 나타내려면 어떻게 해야할까요? 그 해결책을 아래에서 제시하겠습니다. 메서드를 한번 알아볼까요? HTML요소 숨기기, 나타내기 show 선택한 요소를 나타냅니다. 이는 CSS의 display: block과 같은 역할을 합니다 $(".hideDiv").show(); hide 선택한 요소를 숨깁니다. 이는 CSS의 display: none 과 같은 역할을 합니다 $(".hideDiv").hide(); toggle 선택한 요소가 display: none이라면 block으로 바꾸고 display: block이라면 none으로 만듭니다. $(".hideDiv").tog..

JQuery로 CSS인 height를 조절하여 슬라이드 되듯이 늘어나는 효과를 나타냅니다 서서히 커지는 효과라고 생각하시면 될거같네요! 메서드들을 한번 알아볼까요! 슬라이드 효과 slideUp 서서히 올라가면서 사라지는 효과를 보여줍니다 .box { width: 100px; height: 100px; } 이제 스크립트를 알아볼까요 $(".box").slideUp(); // 일반적인 속도로 height가 0으로 변함 $(".box").slideUp(2000); // 2초에 걸쳐 height가 0으로 변함 $(".box").slideUp('fast'); // 빠른 속도로 height가 0으로 변함 $(".box").slideUp('slow'); // 느린 속도로 height가 0으로 변함 이렇게 속도 조절이..

해당 요소의 CSS opacity 속성값을 빠르게 변경하여 표현합니다 메서드들을 한번 알아볼까요? 페이드 효과 fadeIn 요소를 점점 나타나게 합니다. opacity 0 -> 1 $("button").on("click", function() { $("target").fadeIn(); }); 속도를 조절할 수 있습니다 $("button").on("click", function() { $("target").fadeIn('slow'); }); $("button").on("click", function() { $("target").fadeIn('fast'); }); $("button").on("click", function() { $("target").fadeIn(2000); // 2초 }); fadeOut ..

클래스를 중간에 넣어야하는 경우나 제거해서 CSS를 추가하거나 제거할때 사용하면 유용합니다. 사용할 수 있는 메서드는 4종류가 있습니다 하나씩 하나씩 차례대로 알아봅시다 addClass 인수로 전달받은 클래스를 추가 $(selector).addClass(classname); removeClass 인수로 전달받은 클래스를 제거 $(selector).removeClass(classname); toggleClass 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 이미 추가되어 있으면 제거 $(selector).toggleClass(classname); hasClass 인수로 전달받은 값이 선택된 요소의 클래스가 존재하는지 여부를 확인 $(selector).hasClass(classname);

JQuery로 HTML요소의 CSS를 바꿔보겠습니다 .box { width: 200px; height: 100px; border: 2px solid red; background-color: blue; } 간단하게 css를 작성해 줍니다 HTML또한 간단합니다 그럼 직사각형의 빨간테두리의 파란색배경을 가진 요소가 생성될거에요 스크립트를 작성해봅시다 $(".box").css({ "border": "10px solid blue", "backgroundColor": "yellow" }); 이렇게 작성해주면 테두리가 파란색으로 10px만큼 굵어지고 배경은 노란색으로 바뀝니다!

$(".scrollBox").on('scroll', function(){ console.log($(this).scrollLeft()); // 좌우 스크롤 위치 왼쪽을 기준으로(좌측 0) console.log($(this).scrollTop()); // 상하 스크롤 위치 상단을 기준으로(상단 0) }); 이렇게 적어주면 스크롤의 좌우, 상하 위치를 알 수 있습니다

JQuery에서는 요소를 탐색하는 방법이 여러가지가 있습니다. 1. 상위 요소(부모) 탐색 상위 요소를 탐색하는 메서드가 4종류가 존재합니다 parent 선택한 요소의 부모(parent) 요소를 선택합니다. 이때는 부모가 여러 가지가 있더라도 최초로 걸리는 하나의 부모만을 반환합니다. 컨테이너 책상 필통 연필 이런 HTML요소가 있다고 해봅시다 span의 부모를 한번 검색해 볼까요? $("span").parent(); 이렇게 하면 span의 부모인 li가 선택되게 됩니다. 그다음 뭔가 액션이 필요하겠죠? $("span").parent().css({"fontSize": "40px"}); 이 함수를 호출하고 나면 span의 부모인 li에 있는 필통이 폰트 사이즈가 40px 이나 되버린답니다! parents ..

remove remove 메소드는 선택한 HTML 요소를 DOM 트리에서 삭제합니다. 이때 삭제되는 요소와 연관된 jQuery 데이터나 이벤트도 모두 함께 삭제됩니다 HI Hello Nice Meet U $("p").remove(); // 결과: p태그를 DOM에서 모두 지워버립니다. $("p").remove('#a, #b'); // 결과: p태그 중 id가 a, b 인 요소를 찾아 제거합니다 detach detach 메소드는 선택한 요소를 DOM 트리에서 삭제합니다. 이때 삭제되는 요소와 연관된 jQuery 데이터나 이벤트는 삭제되지 않고, 계속 유지됩니다 $("p").on("click", function() { $(this).toggleClass("wrap"); }); var data = null; ..

JQuert에서는 요소를 다른걸로 바꿀수 있는 메서드를 제공합니다 replaceAll : 선택한 요소를 지정된 요소로 대체합니다 replaceWith : 선택한 모든 요소를 지정된 요소로 대체합니다 replaceAll 이 메소드는 인수로 선택자나 jQuery 객체, HTML DOM 요소, 배열 등을 전달받을 수 있습니다 안녕하세요 $("ITSkeleton").replaceAll("p"); 이렇게 한다면 안녕하세요가 ITSkeleton로 변경됩니다. All이기때문에 p로 작성된 다른게 있다면 모두 변경됩니다. 정리: .replaceAll을 기준으로 오른쪽값을 왼쪽값으로 교체 replaceWith 이 메소드는 인수로 HTML 코드 형식의 문자열이나 jQuery 객체, HTML DOM 요소, 배열 등을 전달받..