30가지 클래식 jQuery 코드 개발 기술_jquery

이 기사의 예에는 30가지 고전적인 jQuery 코드 개발 기술이 요약되어 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

1. 중첩 필터를 만듭니다

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

.filter(":not(:has(.selected) ))" ) //클래스 .selected

를 포함하지 않는 모든 요소를 ​​제거합니다.

2. 요소 쿼리를 재사용하세요

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

var allItems = $("div.item");
var keepList = $("div#container1 div.item");

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

3. 요소에 특정 클래스나 요소가 포함되어 있는지 확인하려면 has()를 사용하세요.

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

//jQuery 1.4.*에는 has 메소드에 대한 지원이 포함됩니다. . 이 방법을 사용하면
을 찾을 수 있습니다. //요소에 특정 다른 요소 클래스 또는 그것이 무엇이든 포함되어 있는 경우
//당신은 그들을 찾고 있고 당신이 원하는 것을 무엇이든 할 수 있습니다.
$("input").has(".email").addClass("email_icon");

4. jQuery를 사용하여 스타일 전환

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

//전환하려는 미디어 유형을 찾습니다. 그런 다음 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를 올바르게 사용하는 방법

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

//클래스를 전환하면 클래스를 추가하거나 제거할 수 있습니다.
//해당 요소의 존재 여부에 따라 요소에서
//class. 일부 개발자가 사용하는 위치:
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( )) {
//아무것도 발견되지 않았습니다 ;
}

10. 순서가 지정되지 않은 집합에서 요소의 인덱스 찾기

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

$("ul > li").click( 함수() { var index = $(this).prevAll().length });

11. 이벤트에 함수 바인딩

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

$('#foo').bind('click ', function () { Alert('사용자가 "foo"를 클릭했습니다.') });

12. 요소에 HTML 추가

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

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

13. 요소를 생성할 때 객체를 사용하여 속성을 정의하세요.

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

var e = $("", { href: " #", 클래스: "a-class another-class", 제목: "..." });

14. 필터를 사용하여 여러 속성 필터링

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

//이 정밀도 기반 접근 방식은 다음과 같은 경우에 유용할 수 있습니다. 사용
//다른 유형을 가진 유사한 입력 요소가 많이 있음
var elements = $('#someid input[type=sometype][value=somevalue]').get();

15. jQuery를 사용하여 이미지 미리 로드

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

jQuery.preloadImages = function() { for(var i = 0; i').attr('src', 인수[i]) } }; // 사용법 $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');

16. 선택기와 일치하는 이벤트에 대한 이벤트 핸들러를 설정합니다.
[코드]$('button.someClass').live('click', someFunction); //jQuery 1.4.2에서는 위임 및 위임 취소 옵션이 변경되었습니다.
//컨텍스트에 대한 더 나은 지원을 제공하므로 라이브를 대체하기 위해 도입되었습니다
//예를 들어 이전에 사용했던 테이블의 경우..
//
.live() $("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); }) ; });
//이제 사용하세요..
$("table").delegate("td", "hover", function(){ $(this).toggleClass("hover"); });

17.선택한 옵션 요소 찾기

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

$('#someElement').find('option :선택됨' );

18. 특정 값이 포함된 요소 숨기기

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

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

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

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

jQuery.fn.autoscroll = function(selector) { $ ('html ,body').animate( {scrollTop: $(selector).offset().top}, 500 }

//그런 다음 원하는 클래스/영역으로 스크롤하려면 다음과 같이 하세요.
$('.area_name').autoscroll();

20. 다양한 브라우저 감지

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

Safari 감지(if( $.browser.safari)) , IE6 이상 감지(if ($.browser.msie && $.browser.version > 6 )), IE6 이하 감지(if ($.browser.msie && $.browser.version = '1.8' ))

21. 문자열의 단어 바꾸기

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

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

22. 마우스 오른쪽 버튼 클릭 메뉴 닫기

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

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

23. 맞춤 선택기 정의

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

$.expr[':'].mycustomselector = function (요소, 인덱스, 메타, 스택){
// 요소-는 DOM 요소입니다
// index - 스택의 현재 루프 인덱스
// 메타 - 선택기에 대한 메타 데이터
// 스택 - 반복할 모든 요소의 스택
// 현재 요소를 포함하려면 true를 반환합니다
// 현재 요소를 제외하려면 false를 반환합니다
};
// 사용자 정의 선택기 사용법:
$('.someClasses:test').doSomething();

24. 요소가 존재하는지 확인

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

if ($('#someDiv').length) {
//만세!!! 존재합니다...
}

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_val = []
$(".swap").each(function(i){ swap_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)
//delay() 기능을 사용하여 1.4에서 이를 수행할 수 있는 방법은 다음과 같습니다(이것은 수면과 매우 유사합니다)
$(".mydiv").delay(5000).hide('blind', {}, 500);

28. DOM에 요소를 동적으로 생성

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

var newgbin1Div = $('');
newgbin1Div.attr('id','gbin1.com').appendTo('body');

29. 텍스트 영역의 문자 수를 제한하세요

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

jQuery.fn.maxLength = function(max){ this.each(function(){ var type = this.tagName.toLowerCase();
var inputType = this.type? this.type.toLowerCase() : null; if(type == "입력" &&
inputType == "텍스트" || inputType == "비밀번호"){
//표준 maxLength 적용 this.maxLength = max;
} else if(type == "textarea"){ this.onkeypress = function(e){ var ob = e || 이벤트;
var keyCode = ob.keyCode;
var hasSelection = document.selection? document.selection.createRange().text.length > 0 : 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); } }; } }); };
//사용법:
$('#gbin1textarea').maxLength(500);

30. 为函数创建一个基本测试用例

复主代码 代码如下:

//테스트를 모듈로 분리합니다.
module("모듈 B");
test("다른 gbin1.com 테스트", function() {
//테스트 내에서 실행될 것으로 예상되는 어설션 수를 지정합니다. 기대하다(2); //JUnit의 AssertEquals와 동일한 비교 주장입니다.
같음( true, false, "실패한 테스트" );
같음( true, true, "테스트 통과" );
});

希望本文所述对大家의 jquery는 모든 종류의 jquery를 보유하고 있습니다.