14가지 유용한 Jquery 팁 shared_jquery

1.

메소드를 통해 Jquery 객체 인스턴스를 반환합니다.

var someDiv = $('#someDiv'); someDiv.hide(); 대신 var someDiv = $('#someDiv').hide();를 사용하세요.

2. 찾기를 사용하여 를 찾습니다.

트리거할 필요가 없기 때문에 $('#someDiv p.someClass').hide(); 대신 $('#someDiv').find('p.someClass').hide();를 사용하세요. 동시에 Jquery의 Sizzle 엔진은 선택기를 작성할 때 선택기를 단순하게 유지하고 가장 오른쪽의 선택기를 최적화하도록 노력하세요.

3. $(this)를 남용하지 마세요

$('#someAnchor').click(function() {alert($(this) . attr('id'));});

4. 레디의 줄임말

$(document).ready(function() {}) 대신 $(function() { });를 사용하세요.

5. 코드를 안전하게 만드세요

방법 1(noConstrict 사용)

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

var j = jQuery.noConflect();
j('#someDiv').hide();
// 아래 줄은 다른 라이브러리의 $ 함수를 참조합니다.
$('someDiv').style.display = '없음';

방법 2(매개변수 Jquery 전달)

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

(함수($) {
// 이 함수 내에서 $는 항상 jQuery를 참조합니다
})(jQuery);

방법 3(준비된 방법을 통해)

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

jQuery(문서).ready(함수($) {
// $는 jQuery를 나타냅니다
});

6. 코드를 단순화하세요

for 대신 각각을 사용하고, 임시 변수를 저장하기 위해 배열을 사용하고, 문서 조각을 사용하는 것은 실제로 네이티브 Javascript를 작성할 때 주의해야 할 것과 동일합니다.

7. Ajax 사용법

Jquery는 getJSON post ajax와 같은 유용한 ajax 메소드를 제공합니다

8. 기본 속성 및 메서드에 액세스
예를 들어 요소 ID를 얻는 방법은

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

// 옵션 1 – jQuery 사용
var id = $('#someAnchor').attr('id');
// 옵션 2 – DOM 요소에 액세스
var id = $('#someAnchor')[0].id;
// 옵션 3 - jQuery의 get 메소드 사용
var id = $('#someAnchor').get(0).id;
// 옵션 3b - get
을 위해 인덱스를 전달하지 마세요. 앵커 배열 = $('.someAnchors').get();
var thirdId = 앵커 배열[2].id;

9. PHP를 사용하여 Ajax 요청 확인

xhr.setRequestHeader(“X-Requested-With”, “XMLHttpRequest”)를 사용하면 PHP와 같은 서버측에서

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

함수 isXhr() {
return $_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest';
}

Ajax 요청인지 확인하기 위해 Javascript가 비활성화된 상황에서 사용될 수 있습니다

10.Jquery와 $의 관계

Jquery 코드 하단에 다음 코드를 보실 수 있습니다

window.jQuery = window.$ = jQuery; $는 실제로 Jquery의 단축키입니다

11. Jquery 조건부 로딩

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

<script>!window.jQuery && document.write('<script src=”js/jquery-1.4.2.min.js”></script>')

CDN이 Jquery로 다운로드되지 않으면 로컬
에서 읽어보세요.

12.Jquery 필터

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

$('p:first').data('info', 'value'); // 작업할 항목을 갖기 위해 $의 데이터 객체를 채웁니다.
$.연장(
jQuery.expr[":"], {
블록: 함수(elem) {
return $(elem).css(“display”) === “block”;
},
hasData : 함수(elem) {
return !$.isEmptyObject( $(elem).data() );
}
}
);
$(“p:hasData”).text(“has data”); // 데이터가 첨부된 매개변수를 가져옵니다
$(“p:block”).text(“are block level”); // “block”이 표시된 단락만 가져옵니다

참고: $.expr[":"]은 $.expr.filters와 동일합니다.

13.호버 방식

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

$('#someElement').hover(function() {
//여기서 토글 메소드를 사용하여 슬라이딩 오버 및 슬라이딩 아웃 효과를 얻을 수 있습니다
});

14. 속성 객체 전달

요소를 생성할 때 Jquery1.4는 속성 개체를 전달할 수 있습니다

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

$('', {
id : 'someId',
클래스명 : 'someClass',
href : 'somePath.html'
});

텍스트 등 Jquery에서 지정한 속성이나 이벤트도 클릭