share_jquery에 대한 몇 가지 유용한 JavaScript 및 jQuery 스니펫

지정된 요소에 CSS 클래스 추가:

인라인 스타일을 추가하는 대신 CSS 클래스를 추가하여 요소의 모양과 느낌을 변경하는 매우 깔끔한 방법입니다. jQuery를 사용하면 이 작업을 쉽게 수행할 수 있습니다.

$('#myelement').addClass('myclass');

지정된 요소에서 CSS 클래스 제거:

CSS 클래스를 추가하는 것이 멋지다고 생각할 수도 있지만, 불필요한 CSS 클래스를 제거하는 방법도 알아야 합니다. 다음 코드는 이를 수행합니다:

$('#myelement').removeClass('myclass');

지정된 요소에 특정 CSS 클래스가 있는지 감지합니다.

애플리케이션이나 웹사이트에서 특정 요소에 CSS 클래스를 자주 추가하거나 제거하는 경우 요소에 특정 CSS 클래스가 있는지 여부를 감지하는 기능이 매우 유용합니다.

$(id).hasClass(class)

jQuery를 사용하여 CSS 전환:

보다시피 jQuery를 사용하여 요소에서 CSS 스타일을 추가하거나 제거하는 것은 매우 간단하고 편리합니다. 하지만 전체 CSS 파일을 완전히 제거하고 새로운 스타일 파일(예: 공통 페이지 색상 전환 및 기타 효과)을 첨부하려면 어떻게 해야 할까요? 다음 예에서 볼 수 있듯이 실제로는 매우 간단합니다.

$('link[media='screen']').attr('href', 'Alternative.css');

출처: http://addyosmani.com/blog/50-jquery-snippets-for-developers/

요소에 HTML 코드 추가:

요소에 일부 HTML 콘텐츠를 추가해야 하는 경우, 추가() 메서드를 사용하면 시간과 노력이 절약됩니다.

$('#lal').append('sometext');

요소 존재 여부 감지:

JavaScript로 작업할 때 요소가 존재하는지 확인해야 하는 경우가 종종 있습니다. jQuery와 길이 속성을 사용하면 매우 간단합니다. 길이가 0이면 페이지에 해당 요소가 없고, 그렇지 않으면 있습니다.

if ($('img').length) {  log('We found img elements on the page using "img"');} else {  log('No img elements found');}

출처: http://jqueryfordesigners.com/element-exists/

지정된 요소의 상위 요소 가져오기:

DOM을 사용하여 작업하려면 요소의 직접 상위 요소를 알아야 할 수도 있습니다. 가장 가까운() 메소드가 다음을 알려줍니다:

var id = $("button").closest("div").attr("id");

출처: http://stackoverflow.com/questions/545978/finding-the-id-of-a-parent-div-using-jquery

요소의 형제 노드 가져오기:

요소의 형제 노드를 가져오는 siblings() 메서드는 매우 편리한 도구입니다. 아래와 같이 이 방법을 사용하는 것은 매우 간단합니다.

$("div").siblings()

선택 목록에서 옵션 제거:
선택 목록을 사용할 때 사용자 작업에 따라 콘텐츠를 업데이트해야 할 수도 있습니다. 선택 목록에서 옵션을 제거하려면 다음 코드를 사용하세요:

$("#selectList option[value='2']").remove();

출처: http://calisza.wordpress.com/2009/03/29/6-jquery-snippets-you-can-use-to-manipulate-select-inputs/

목록 옵션의 텍스트 내용 가져오기:

이 방법은 선택 메뉴에서 사용자가 선택한 옵션을 빠르게 감지해야 할 때 유용합니다.

$('#selectList :selected').text();

테이블에 "얼룩말" 효과(행마다 색상 변경)를 적용합니다.

표를 사용할 때 색상 변경 스타일은 가독성을 높이는 좋은 솔루션입니다. jQuery를 사용하면 추가 HTML 마크업 없이 쉽게 가능합니다.

$("tr:odd").addClass("odd");

출처: http://web.enavu.com/tutorials/top-10-jquery-snippets-include-jquery-1-4/

요소의 하위 노드 수 계산:

#foo 요소에 포함된 div 하위 요소 수를 확인하려면 아래 코드를 참조하세요. 간단하면서도 효과적입니다!

$("#foo > div").length<br><p>来源：<a href="http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/" target="_blank">http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/</a></p>