내가 수년간 수집한 JQuery 코드 요약_jquery

1. 중첩 필터 생성 방법

코드 복사 코드는 다음과 같습니다.

// 허용 컬렉션에서 일치하는 요소를 줄여 필터링하고
// 주어진 선택기와 일치하는 요소만 남겨둡니다. 이 경우
//쿼리는 "selected" 클래스(.selected)를 포함하지 않는(:not)(:has)
//모든 하위 노드를 삭제합니다.
.filter(":not(:has(.selected))")

2. 요소 검색을 재사용하는 방법

코드 복사 코드는 다음과 같습니다.

var allItems = $("div.item")
var keepList = $("div#container1 div.item" );
//이제 이러한 jQuery 개체를 사용하여 계속 작업할 수 있습니다. 예를 들어
//체크박스 이름을 기준으로 "keep list" 자르기
//

클래스 이름 준수:
$(formToLookAt " input:checked ").each( function () {
keepList = keepList.filter("." $(this).attr("name"));
});

3 요소에 특정 클래스나 요소가 포함되어 있는지 확인하기 위해 has()를 사용합니다.

코드 복사 코드는 다음과 같습니다.

//jQuery 1.4.*에는 이 has 메서드에 대한 지원이 포함되어 있습니다. 이 메소드는
//요소에 다른 요소 클래스가 포함되어 있는지 또는 다른 요소가 포함되어 있는지
//찾고 작업하려는 항목을 찾습니다.
$("input").has(".email").addClass("email_icon")

4. jQuery를 사용하여 스타일 시트를 전환하는 방법

코드 복사 코드는 다음과 같습니다.

//미디어 유형(media-type)을 알아보세요. 전환하려는 경우 href를 새 스타일 시트로 설정하십시오.
$('link[media="screen"]').attr('href', 'Alternative.css')

5. (최적화 목적에 따라)

코드 복사 코드는 다음과 같습니다.

//사용 가능한 한 많은 태그 이름을 지정하세요. 그러면 jQuery가 원하는
// 요소를 검색하는 데 더 많은 시간을 소비하지 않아도 됩니다. 기억해야 할 또 다른 점은 페이지의 요소에 대한
//작업이 더 구체적일수록
//실행 및 검색 시간을 줄일 수 있다는 것입니다. var in_stock = $('#shopping_cart_items input.is_in_stock');

• 아이템 X


• 항목 Y


• 항목 Z
🎜>

6. ToggleClass를 올바르게 사용하는 방법

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

//토글 클래스를 사용하면 클래스의

//존재 여부에 따라 클래스를 추가하거나 삭제할 수 있습니다.
//이 경우 일부 개발자는 다음을 사용합니다. a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton')
//toggleClass를 사용하면 다음 명령문으로 이 작업을 쉽게 수행할 수 있습니다.
a.toggleClass('blueButton')

7. IE 관련 기능 설정 방법

코드 복사 코드는 다음과 같습니다.

if ($.browser.msie) {

// Internet Explorer는 실제로는 그렇지 않습니다. 사용하기 쉽습니다
}


8. jQuery를 사용하여 요소를 바꾸는 방법

코드 복사 코드는 다음과 같습니다.

$('#thatdiv').replaceWith('fnuh')

9. 비어 있음

코드 복사 코드는 다음과 같습니다.

if ($('#keks').html().trim()) {
//아무 것도 찾지 못했습니다
}

10 . 정렬되지 않은 집합에서 요소의 인덱스 번호를 찾는 방법

코드 복사 코드는 다음과 같습니다.

$("ul > li").click(function () {
var index = $(this).prevAll().length;
});11. 함수는 이벤트
$('#foo').bind('click', function () {
alert('User clicked on "foo."');
});12에 바인딩됩니다. . 요소에 html을 추가하는 방법
$('#lal').append('sometext')

13. 속성 정의

코드 복사 코드는 다음과 같습니다.

var e = $(" " , { href: "#", class: "a-class another-class", title: "..." });

14. 필터링을 위해 여러 속성을 사용하는 방법

코드 복사 코드는 다음과 같습니다.

//다른 유형의 유사한 입력 요소를 많이 사용하는 경우
//이 정밀도 기반 방법은 유용합니다. var elements = $('#someid input[type=sometype][value=somevalue]').get();15 jQuery를 사용하여 이미지를 미리 로드하는 방법

jQuery.preloadImages = function () {
for (var i = 0; i < 인수.길이; i ) {
$(""). ', 인수[i]);
}
}; //Usage$.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');

16. 선택기와 일치하는 요소에 대한 이벤트 핸들러를 설정하는 방법

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

$('button.someClass').live('click', someFunction)
//jQuery 1.4.2에서는 옵션을 위임하고 취소합니다.
// 더 나은 컨텍스트 지원을 제공하기 때문에 live 대신 도입되었습니다.
// 예를 들어 테이블의 경우 이전에는
// .live()
$("table"을 사용했습니다. ).each(function () {
$("td", this).live("hover", function () {
$(this).toggleClass("hover");
}) ;
});
//이제
$("table").delegate("td", "hover", function () {
$(this) .toggleClass("hover)를 사용하세요. ");
});

17. 선택된 옵션 요소를 찾는 방법

코드 복사 코드는 다음과 같습니다.

$('#someElement').find('option:selected')

18. 특정 값 텍스트가 포함된 요소를 숨기려면

코드 복사 코드는 다음과 같습니다.

$ ("p.value:contains('thetextvalue')").hide();

19. 페이지의 특정 영역으로 자동 스크롤하는 경우

코드 복사 코드는 다음과 같습니다.

jQuery.fn.autoscroll = function(selector) {
$( 'html,body'). animate( { scrollTop: $(this ).offset().top },
500
)
}
//그런 다음 원하는 클래스/영역으로 스크롤합니다. 이렇게 가고 싶다 .
$('.area_name').autoscroll();

20. 다양한 브라우저 감지 방법

코드 복사 코드는 다음과 같습니다.

if( $.browser.safari) //Safari 감지
if ($.browser.msie && $.browser.version > 6) //IE6 이상 버전 감지
if ($.browser.msie && $.browser.version <= 6) //IE6 이하 버전 감지
if ($.browser.mozilla && $. browser.version >= '1.8' ) //FireFox 2 이상 버전 감지

21. 문자열에서 단어를 바꾸는 방법

코드 복사 코드는 다음과 같습니다.

var el = $('#id'); .replace(/word/ig , ''))

22. 우클릭 컨텍스트 메뉴 비활성화 방법

코드 복사 코드는 다음과 같습니다.

$(document).bind('contextmenu', function (e) {
return false ;
})

23. 🎜>

코드 복사 코드는 다음과 같습니다.

$.expr[':'].mycustomselector = function(element, index , Meta, stack){
// element- DOM 요소
// index – 스택의 현재 루프 인덱스
// Meta – 선택기에 대한 메타데이터
// 스택 – 루프에 있는 모든 요소의 스택
// 현재 요소가 포함되어 있으면 true를 반환합니다.
// 현재 요소가 포함되어 있지 않으면 false를 반환합니다. }
// 사용자 정의 사용법 selector:
$( '.someClasses:test').doSomething(); 24. 요소가 존재하는지 확인하는 방법
if ($('#someDiv' ).length) {
//Your 언니 드디어 찾았어요


25. jQuery를 사용하여 마우스 오른쪽 및 왼쪽 클릭을 감지하는 방법

코드 복사 코드는 다음과 같습니다.

$("#someelement").live('click', function (e) {

if ((!$. browser.msie && e .button == 0) || ($.browser.msie && e.button == 1)) {
alert("왼쪽 마우스 버튼을 클릭했습니다."
} else if (e .button == 2 ) {
alert("오른쪽 마우스 버튼 클릭");
}
})


26. 입력 필드

코드 복사 코드는 다음과 같습니다.

//이 코드는 다음을 보여줍니다. 사용자가 값을 입력하지 않은 경우

//텍스트 입력란에 기본값을 유지하는 방법
//기본값
$(".swap").each(function (i) {
wap_val[i] = $(this ).val();
$(this).focusin(function () {
if ($(this).val() == swap_val[i ]) {
$(this).val ("");
}
}).focusout(function () {
if ($.trim($(this).val() ) == "") {
$( this).val(swap_val[i])
}
})


27. 일정시간이 지나면 요소를 자동으로 숨기거나 닫는 방법(1.4버전 지원)

코드 복사 코드는 다음과 같습니다. //1.3.2에 있는 내용입니다. setTimeout을 사용하여

setTimeout(function () {

$('.mydiv').hide('blind', {}, 500)
}, 5000);
// 이것이 1.4의 Delay() 함수를 사용하는 방법입니다(최대 절전 모드와 매우 유사합니다)
$(".mydiv"). Delay(5000).hide('blind', {}, 500);28. 생성된 요소를 DOM에 동적으로 추가하는 방법
var newDiv = $('')
newDiv.attr('id', 'myNewDiv').appendTo('body' );


29. "텍스트 영역" 필드의 문자 수를 제한하는 방법

코드 복사 코드는 다음과 같습니다. jQuery.fn.maxLength = function(max) {

this.each(function() {

var type = this.tagName.toLowerCase() ;
var inputType ? this.type.toLowerCase() : null
if (type == "input" && inputType == "text" || inputType == "password") {
this.maxLength = max
}
else if (type == "textarea") {
this.onkeypress = 함수(e ) {
var ob = e || event;
var keyCode = ob.keyCode;
var hasSelection
? document.selection.createRange().text.length >
: this.selectionStart != this.selectionEnd;
return !(this.value.length >= max
&& (keyCode > 50 || keyCode == 32 || keyCode == 0 | | keyCode == 13)
&& !ob.ctrlKey && !ob.altKey && !hasSelection)
}
this.onkeyup = function () {
if (this.value.length) > max) {
this.value = this.value.substring(0, max)
}
}); $('#mytextarea').maxLength(500);


30. 함수에 대한 기본 테스트를 만드는 방법

코드

코드는 다음과 같습니다.

//테스트를 모듈
module("Module B")
test("some other test", function () {
//내부 기대사항 표시 테스트 실행
expect(2); //JUnit의 AssertEquals
equals(true, false, "failing test")와 동일한 비교 주장
equals(true) , true, "테스트 통과");
}) 31. jQuery에서 요소를 복제하는 방법

var cloned = $('#somediv').clone(); >
32. jQuery에서 요소가 표시되는지 테스트하는 방법

코드 복사 코드는 다음과 같습니다. if ($(element).is(':visible') ) {

//요소가 표시됩니다

}


33. 화면 중앙 위치에 요소 넣기

코드 복사 코드는 다음과 같습니다. jQuery.fn.center = function ( ) {

this.css('position', 'absolute')

this.css('top', ($(window).height() - this.height ()) / $(window) .scrollTop() 'px');
this.css('left', ($(window).width() - this.width()) / 2 $(window) .scrollLeft() 'px') ;
return this;
} //위 함수를 다음과 같이 사용합니다: $(element).center()


34. 특정 이름을 가진 모든 요소를 ​​반환합니다. 값은 배열에 배치됩니다.

코드 복사 코드는 다음과 같습니다. var arrInputValues ​​​​= new Array();

$("input[name='table[]']").each(function () {

arrInputValues.push ($(this ).val());
} ; >

(function ($) {
$.fn.stripHtml = function () {
var regexp = /< ;("[^"]*"|'[^']* '|[^'">])*>/gi;

this.each(function () {
$(this) .html($(this).html().replace(regexp, ""));
return $(this);

})/ /사용법: $('p').stripHtml(); 36. Nearest를 사용하여 상위 요소를 가져오는 방법

복사 code

코드는 다음과 같습니다.

$('#searchBox').closest('div');

37. Firebug 및 Firefox 사용

코드 복사

코드는 다음과 같습니다. // 체인 로깅 허용 // 사용법: $('#someDiv').hide() .log('div Hidden').addClass('someClass') jQuery.log = jQuery.fn.log = function (msg) {

if (콘솔) {

console.log(" %s: %o", msg, this)

}
return this; >

38. 링크를 팝업창으로 강제로 열게 하는 방법 코드 복사

코드


jQuery('a.popup').live('click', function () {
newwindow = window.open($(this).attr('href) '), '', 'height=200,width=150');
if (window.focus) {
newwindow.focus()
} return false
}); 🎜>

39. 링크를 새 탭에서 강제로 열게 하는 방법

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

jQuery('a.newTab').live('click', function () {

newwindow = window.open($(this).href);
jQuery(this).target = "_blank";
return false;
})


40. jQuery에서 .siblings()를 사용하여 형제 요소를 선택하는 방법

코드 복사 코드는 다음과 같습니다. // 하지 마세요

$ ('#nav li').click(function () {

$('#nav li').removeClass('active');
$( this).addClass('active');
}); // 대안은

$('#nav li').click(function () {
$(this).addClass('active').siblings().removeClass ('활성')
})

41. 페이지의 모든 체크박스를 전환하는 방법

코드 복사 코드는 다음과 같습니다.

var tog = false ;
// 로드 시 선택된 경우

$('a').click(function () {
$( "input[type =checkbox]").attr("checked", !tog);
tog = !tog;
});

42. 일부 입력 텍스트를 기반으로 하는 방법 필터링하려면 요소 목록

코드 복사 코드는 다음과 같습니다.

//값이 요소의 입력 텍스트가
과 일치하는 경우//요소가 반환됩니다. $('.someClass').filter(function () {
return $(this).attr('value') == $(' input#someId').val()
})

43. 마우스패드 커서 위치 x 및 y 가져오기

코드 복사 코드는 다음과 같습니다.

$(document).ready(function () {
$(document) .mousemove(function (e) {
$('#XY').html("X 축 : " e.pageX " | Y 축 " e.pageY);
}); ;

44. 전체 목록 요소(LI)를 클릭 가능하게 만드는 방법

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

$("ul li").click(function () {
window.location = $(this).find("a").attr(" href");
return false;
});

• 링크 1


• 링크 2


• 링크 3< ;/li>
  
• 링크 4

45 . jQuery를 사용하여 XML을 구문 분석하는 방법(기본 예)

코드 복사 코드는 다음과 같습니다.

function parXml(xml) {
//각 Tutorial을 찾아 작성자를 인쇄합니다.
$(xml).find("Tutorial").each(function () {
$("# output").append($(this ).attr("author") "");
});
}

46. 이미지가 생성되었는지 확인하는 방법 완전히 로드됨

코드 복사 코드는 다음과 같습니다.

$('#theImage') .attr('src', 'image.jpg') .load(function () {
alert('이 이미지가 로드되었습니다');
})

47 .jQuery를 사용하여 이벤트에 대한 네임스페이스를 지정하는 방법

코드 복사 코드는 다음과 같습니다.

//이벤트는 다음과 같이 네임스페이스에 바인딩될 수 있습니다

$(' input').bind('blur.validation', function (e) {
// ...
}) ;

//data 메소드는
$( 'input').data('validation.isValid', true)도 허용합니다.


48. 쿠키가 활성화되었습니다

코드 복사 코드는 다음과 같습니다.

var dt = new Date( );

dt.setSeconds(dt.getSeconds() 60);
document.cookie = "cookietest=1; 만료=" dt.toGMTString()
var cookieEnabled = document.cookie.indexOf( "cookietest=") != -1;
if (!cookiesEnabled) {
// 쿠키가 활성화되지 않았습니다
}


쿠키 만료 방법

코드 복사 코드는 다음과 같습니다.

var date = new Date();
date.setTime(date.getTime() (x * 60 * 1000))
$.cookie('example', 'foo', { 만료: 날짜 });50. 클릭 가능한 링크를 사용하여 페이지의 URL을 바꾸는 방법

$.fn.replaceUrl = function () {
var regexp =
/( ( ftp|http|https)://(w :{0,1}w*@)?(S )(:[0-9] )?(/|/([w#!:.? =&% @ !-/]))?)/gi;
this.each(function () {
$(this).html(
$(this).html().replace(regexp, ' < ;a href="$1">$1')
)
})
return $(this)
} //사용법 $('p' ) .replaceUrl();

드디어 끝났습니다. 조판도 힘든 작업입니다. 리소스는 인터넷에서 수집하여 아직 수집하지 않은 어린이에게 제공됩니다.

(피드백 감사합니다. 오류가 수정되었습니다. 오해하지 않았으면 좋겠습니다.)
PS: 오류 수정으로 인해 레이아웃이 잘못되었습니다. 내용이 엉망이어서 지금 다시 올립니다.