.append() 메소드(method)를 사용하면 각 요소의 마지막 자식(last child) 항목으로 지정한 콘텐츠를 추가하고 .prepend() 메소드를 사용하면 첫 번째 자식 항목(first child) 항목으로 추가합니다. 예를 들어, 다음과 같은 HTML이 있는 경우: <div class="container"> <div class="inner">안녕하세요.</div> <div class="inner">안녕히 계세요.</div> </div> 다음과 같은 ...
![[워드프레스] 우커머스 상품 버튼이 제대로 표시되지 않는 경우 2](https://www.thewordcracker.com/wp-content/uploads/2016/01/Product-button-in-WooCommerce-WordPress.png)
이제 대부분의 브라우저에서 를 지원하므로 WooCommerce 2.3에서 상품 증감 버튼(플러스/마이너스 버튼)이 제거되었습니다. 하지만 어떤 이유로 이 버튼이 제대로 표시되지 않는 문제가 발생하거나 구 버전의 브라우저를 고려하여 이 버튼을 유지하기를 원하는 경우가 있을 수 있습니다. 이 경우 ...
![[jQuery] 여러 개의 $(document).ready(function(){ … }); 사용 3](https://www.thewordcracker.com/wp-content/uploads/2016/01/multiple-document-ready-in-jquery.png)
$(document).ready()는 여러 번 사용이 가능합니다. 아래와 같이 두 가지 형식으로 두 개 이상을 사용할 수 있습니다. 다만 가독성에 문제가 있을 수 있으니 남용해서는 좋지 않겠죠? $(document).ready(function() { alert('홍길동님, 안녕하세요?'); }); $(document).ready(function() { alert('철수님, 안녕하세요?'); }); ...
![[jQuery] 모든 체크박스가 선택되었는지 확인하기 4](https://www.thewordcracker.com/wp-content/uploads/2016/01/jQuery-to-check-if-all-checkboxes-are-selected.png)
가령 class="abc" 요소를 가진 체크박스가 모두 선택되었는지 확인하는 방법입니다. 간단한 방법으로 다음 조건을 확인하는 것입니다. $('.abc:checked').length == $('.abc').length 다음과 같은 스크립트를 사용합니다. $(".abc").change(function(){ if ($('.abc:checked').length == $('.abc').length) { // 사용자 스크립트 } }); // Source: stackoverflow 또는, 다음과 ...
jQuery를 사용하여 픽셀(pixel)로 된 너비(Width) 값을 가져오기 var width = $('#mydivid').width(); jQuery를 사용하여 DIV의 폭 설정하기 $("#mydivid").css("width", "100px"); 100px 대신 원하는 너비 값으로 대체하도록 합니다. 자바스크립를 사용하여 너비 값 가져오기 document.getElementById("mydivid").offsetWidth;
jQuery를 사용하여 DIV를 화면 중앙(가운데)에 정렬하려면 다음 jQuery 스크립트를 사용할 수 있습니다. jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px"); this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / ...
![두 번째 태그로 CSS 설정[jQuery 예제] 6](https://www.thewordcracker.com/wp-content/uploads/2015/11/jQuery-to-select-the-nth-element.png)
$("div").eq(n).css()를 사용하여 "n-1"번째 요소의 CSS 스타일을 설정합니다. .eq() 선택자(selector)는 특정 인덱스 번호로 된 요소(element)를 선택하는 데 사용됩니다. 인덱스 번호는 0부터 시작됩니다. 그러므로 첫 번째 요소의 인덱스 번호는 "0"이 됩니다. 두 번째 요소를 선택하려면 ".eq(1)"을 사용합니다. ...
앵커(anchor) 링크로 페이지 내에서 스크롤하도록 링크를 만든 경우, 링크를 클릭할 때 부드럽게 스크롤되도록 하려면 다음과 같은 jQuery 스크립트를 사용할 수 있습니다. $('a').click(function(){ $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500); return false; }); // ...
링크 URL 변경하기 링크 URL을 다른 URL 주소로 변경하는 작업은 매우 간단한 작업으로 .attr 메소드의 사용으로 가능합니다(.attr 메소드에 대한 자세한 내용은 여기 참고). $(document).ready(function() { $('.example a').attr('href','http://www.example.com/contat'); }); // 참고: www.ronvangorp.com 응용 태그에서 링크를 직접 ...
특정 이미지 위에 다른 이미지를 오버레이시키는 방법입니다. 다음과 같은 jQuery 코드를 사용하여 특정 요소의 이미지 위에 다른 이미지를 겹치게 배치할 수 있습니다. $('.target').before('<img src="이미지 URL" class="overlay" />'); 이때 CSS에서 를 사용합니다. 샘플: HTML 샘플 <img ...