jQuery 사용법에 대한 간단한 요약 Tips_jquery

1. 최신 jquery 버전을 사용하세요
이 제안은 논쟁의 여지가 있다고 생각합니다. 최신 jquery 버전이 더 나은 성능을 제공하지만 1.4.2에서 In으로 변경하는 등 일부 메소드 변경으로 인해 여전히 버그가 발생할 수 있습니다. 1.5, 많은 친구들이 Ajax 문제에 대해 불평했습니다. 이전 페이지에 대해 jquery를 업그레이드할 때는 주의해야 하며 새 프로젝트에 대해서는 새 버전의 jquery를 대담하게 사용할 수 있다는 제안입니다.

또 다른 제안은 Google의 CDN에서 jquery 파일을 사용하는 것입니다. 그러면 로드 속도가 더 빨라집니다. Google Libraries API를 클릭하면 볼 수 있습니다.

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

2. 선택기를 단순하게 유지하세요 Minghe는 이 제안에 매우 동의합니다. 요소에 스타일이나 ID를 추가하고 이를 유지하기를 바랍니다. HTML은 간단하며 요소를 검색하기 위해 jquery의 강력한 선택기를 사용하는 것은 좋은 습관이 아닙니다. 우선, 선택기가 복잡할수록 순회 효율성이 낮아집니다. 이는 의심할 여지 없이 기본 getElementById()를 사용하는 것입니다. 둘째, 복잡한 선택기는 태그 이름과 계층 구조를 견고하게 합니다. html 구조 변경이나 라벨 변경으로 인해 검색 오류가 직접 발생합니다.

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

$('li[data-selected= "true" ] a') // 멋지지만 느림
$('li.selected a') // 더 좋음
$('#elem') // 최고

DOM에 액세스하세요. 이는 JavaScript에서 리소스와 성능을 가장 많이 소모하는 부분이므로 DOM을 복잡하거나 반복적으로 탐색하지 않도록 하세요.
DOM을 반복적으로 탐색하지 않는 방법은 $()에서 검색한 요소를 다음 코드와 같은 변수에 저장하는 것입니다.

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

varbuttons = $('#navigationa.button')

// 아주 좋습니다. $ 접두사를 사용하여 jquery 객체 습관을 표시하려면 사용하는 것이 좋습니다.

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

var $buttons = $('#navigation a.button ');
var $buttons = $('#navigation a.button');

jquery 선택기는 :visible과 같은 대부분의 CSS3 의사 클래스 메서드를 지원합니다. Hidden, : animation은 매우 편리하지만 의사 클래스 선택기를 사용할 때 jQuery는 querySelectorAll()을 사용해야 하므로 더 큰 성능 손실을 초래하므로 주의해서 사용하세요.


3. jQuery 객체는 배열로 처리됩니다. jQuery 객체는 길이 속성을 정의하여 배열 형태로 동작할 때 반환되는 DOM 요소가 실제로는 DOM입니다. 다음 코드와 같은 하위 jQuery 개체가 아닌 요소입니다.

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

// 모든 탐색 버튼 선택:
var 버튼 = $('#navigation a.button');

// 트래버스 버튼 객체

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

for(var i=0;iconsole.log(buttons[i]); // jQuery 객체 대신 DOM 요소입니다!
}

// 분할할 수도 있습니다:

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

var firstFour =button.slice(0,4);

실험에 따르면 for 또는 while 루프를 사용하는 것이 $보다 실행 효율성이 높습니다. 각() . 자세한 테스트를 보려면 몇 배 더 빠르게 참조하세요.
길이 속성을 사용하여 요소 존재 여부 확인:

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

if(buttons){ // 항상 참입니다
// 뭔가를 하세요
}

if(buttons.length){ // 버튼에 요소가 포함된 경우에만 참
/ / 뭔가를 해보세요
}


4.selector 속성
jQuery 객체에는 모두 다음과 같은 선택기 이름을 가져오는 데 사용되는 선택기 속성이 있습니다.

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

$('#container li:first-child').selector // #container li:first-child
$( '#container li').filter(':first-child').selector // #container li.filter(:first-child)

두 번째에 주목하세요 코드 줄, 선택기 반환 요소의 전체 선택기를 가져옵니다.
이 속성은 jquery 플러그인을 작성할 때 자주 사용됩니다.

5. 빈 jQuery 객체 생성
이 경우에는 빈 jQuery 객체를 먼저 생성해야 하는 경우 add() 메서드를 사용하세요. jQuery 객체를 객체에 주입할 때 사용됩니다.

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

var 컨테이너 = $([]); <… li 클래스에 빨간색을 추가하십시오.
jquery의 선택기를 확장해야 합니다. 이 코드는 jQuery.expr의 사용법을 잘 보여줍니다.

코드 복사


코드는 다음과 같습니다.

(함수($){ var random = 0; $.expr[':'].random = function(a, i, m, r) { if (i == 0) {

random = 수학 .floor( Math.random() * r.length);

}
return i == 무작위
11.})
12.
13.
15.$('li:random').addClass('glow')

7. Hooks

jQuery.cssHooks는 1.4.3에 추가된 새로운 메소드로, 새로운 CSS Hooks를 정의할 때 실제로 getter 및 setter 메소드를 정의하는 것으로 추정됩니다. border-radius Circle 각도 속성을 Firefox 및 WebKit과 같은 브라우저에 성공적으로 적용하려면 -moz-border-radius 및 -webkit-border-radius와 같은 속성 접두사를 추가해야 합니다. CSS 속성을 하나씩 설정하는 대신 CSS Hooks를 정의하여 통합 인터페이스 borderRadius로 캡슐화할 수 있습니다.




코드 복사

코드는 다음과 같습니다.
$.cssHooks['borderRadius'] = {
get: function(elem, 계산, 추가){
// 브라우저에 따라

// -moz-border-radius, -webkit-border-radius 또는 border- 값을 읽습니다. radius }, set: function(elem, value){ // 적절한 CSS3 속성을 설정합니다 } } 11.// 사용 브라우저가 실제로 어떤 속성을 이해하는지 걱정하지 마세요.

8. easing 애니메이션 효과) 기능

easing 플러그인은 매우 일반적으로 사용되는 기능으로 다양한 멋진 효과를 얻을 수 있습니다. 내장된 완화 효과가 요구 사항을 충족할 수 없는 경우 완화 기능을 사용자 정의할 수도 있습니다.




코드 복사


코드는 다음과 같습니다.

$.easing.easeInOutQuad = 함수(x , t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t b return -c/2 * ((--t; )*( t-2) - 1) b
};

// 사용 방법: $('#elem').animate({width:200},'slow ','easyInOutQuad'); 9. $.proxy()

$.proxy()에 대해 자세히 소개한 적이 있습니다. 포털은 여기 "jquery1 .4 Tutorial 3: New method tutorial (3)》입니다.

Jquery에는 콜백 함수가 너무 많고 컨텍스트가 항상 변경되는 경우가 있는데, 이 경우에는 $.proxy() 메서드가 필요합니다.




코드 복사


코드는 다음과 같습니다.

<버튼>닫기

$('#panel').fadeIn(function(){
// 이것은 #panel
을 가리킵니다.$('#panel 버튼').click(function(){

// 이것은 버튼 $(this).fadeOut(); })을 가리킵니다. ; 10.}) 두 개의 중첩된 콜백 함수의 차이점은 다음과 같습니다! 이제 우리는 이것이 #panel 요소를 가리키기를 원합니다. 코드는 다음과 같습니다.

코드 복사


코드는 다음과 같습니다

$('#panel').fadeIn(function(){
// $.proxy를 사용하여 바인딩:

$('#panel 버튼').click( $.proxy(function(){
// this는 #panel
$(this).fadeOut();
},this))

10. 노드 수를 빠르게 가져옵니다.
이것은 일반적인 기술이며 코드는 다음과 같습니다.

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

console.log( $('*').length );

11. jquery 플러그인 빌드

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

(function($){

$.fn.yourPluginName = function(){
// 코드는 여기에 있습니다.
return this;
};
})(jQuery);


jquery 플러그인 정보 Minghe는 빌드를 위해 Portal: jquery 텍스트 프롬프트 플러그인 만들기 - jquery 플러그인 실습 튜토리얼(1)이라는 일련의 튜토리얼을 게시한 적이 있습니다.

여기서 자세히 설명하지는 않겠습니다.


12. ajax 글로벌 이벤트 설정
Ajax 글로벌 이벤트와 관련하여 Minghe는 포털에 "jquery의 ajax 글로벌 이벤트에 대한 자세한 설명 - Minghe가 jquery에 대해 이야기합니다."라는 글을 게시한 적이 있습니다. " .

13. 지연 애니메이션

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

// 이것은 틀렸습니다:

$('#elem').animate({width:200},function(){
setTimeout(function(){
$( '#elem').animate({marginTop:100});
},2000)
})

// 다음과 같이 하세요:
$('#elem ').animate({width:200}).delay(2000).animate({marginTop:100})


animate 애니메이션이 여러 개인 경우 실행 순서를 처리하는 방법 애니메이션은 번거로운 일입니다. 원본 기사의 작성자는 위 코드와 같은 지연() 함수를 사용하도록 제안했지만 Minghe는 지연을 사용하면 지연할 시간을 고려해야 하기 때문에 queue() 메서드를 사용하도록 제안합니다. , 그러나 큐에는 이러한 문제가 없으며 큐에 들어가는 기능이 하나씩 실행됩니다. Minghe의 이전 기사 queue 및 dequeue를 읽을 수 있습니다. Minghe가 jquery에 대해 이야기합니다.

15. jquery의 로컬 저장소
jquery에는 $.jStorage jQuery 플러그인이라는 로컬 저장소 전용 플러그인이 점점 더 자주 사용됩니다.

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

// "key"가 있는지 확인하세요. 저장소

var value = $.jStorage.get("key");
if(!value){
// 그렇지 않은 경우 - 서버에서 데이터 로드
value = load_data_from_server() ;
// 저장
$.jStorage.set("key",value)