jQuery_jquery에 대한 12가지 일반적인 팁 공유

1. 페이지 요소에 대한 참조
jQuery의 $()를 통한 요소 참조에는 id, 클래스, 요소 이름, 요소의 계층적 관계, dom 또는 xpath 조건 등의 메서드와 반환된 개체가 포함됩니다. jQuery 객체(컬렉션 객체)는 dom이 정의한 메서드를 직접 호출할 수 없습니다.
2. jQuery 객체와 dom 객체 간의 변환
jQuery 객체만이 jQuery에서 정의한 메소드를 사용할 수 있습니다. DOM 개체와 jQuery 개체 사이에는 차이점이 있습니다. 메서드를 호출할 때 DOM 개체 또는 jQuery 개체에서 작업하는지 주의해야 합니다. 일반 DOM 객체는 일반적으로 $()를 통해 jQuery 객체로 변환될 수 있습니다.
예: $(document.getElementById("msg"))는 jQuery 객체이며 jQuery 메서드를 사용할 수 있습니다.
jQuery 객체 자체가 컬렉션이기 때문입니다. 따라서 jQuery 객체를 dom 객체로 변환하려면 항목 중 하나를 가져와야 하며 일반적으로 인덱스를 통해 검색할 수 있습니다.
예: $("#msg")[0], $("div").eq(1)[0], $("div").get()[1], $("td " )[5] 이들은 DOM 개체이므로 DOM에서 메서드를 사용할 수 있지만 더 이상 jQuery 메서드를 사용할 수 없습니다.
다음 작성 방법이 정확합니다:

$("#msg").html()
$("#msg")[0].innerHTML (" #msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3. jQuery에서 특정 항목을 가져오는 방법 collection Item
획득한 요소 컬렉션의 경우 항목(인덱스로 지정)을 얻으려면 eq 또는 get(n) 메서드나 인덱스 번호를 사용할 수 있습니다. eq는 jQuery 객체를 반환하고 get을 가져옵니다. (n) 및 index는 dom 요소 객체를 반환합니다. jQuery 객체의 경우 jQuery 메서드만 사용할 수 있고, dom 객체의 경우 dom 메서드만 사용할 수 있습니다. 예를 들어 세 번째 요소의 내용을 가져오려고 합니다. 다음 두 가지 메소드가 있습니다.

$("div").eq(2).html(); //jQuery 객체 메소드 호출
$("div").get(2) . innerHTML; //dom 메소드 속성 호출

4. 동일한 함수가 set 및 get을 구현합니다. 이는 주로 다음을 포함하여 jQuery의 많은 메소드에 적용됩니다. > $("#msg").html(); //ID가 msg인 요소 노드의 html 콘텐츠를 반환합니다.
$("#msg").html("
새 콘텐츠
");
//ID가 msg인 HTML 문자열로 "새 콘텐츠"를 작성합니다. 요소 노드 콘텐츠, 페이지에 굵은 새 콘텐츠가 표시됩니다.
$("#msg").text() //id가 msg인 요소 노드의 텍스트 콘텐츠를 반환합니다. $("#msg").text("새 콘텐츠
");
//ID가 msg인 일반 텍스트 문자열로 "새 콘텐츠"를 작성합니다. 요소 노드 콘텐츠, 페이지에
새 콘텐츠가 표시됩니다. $("#msg").height() //id가 msg인 요소의 높이를 반환합니다$("#msg " ).height("300"); //id가 msg인 요소의 높이를 300으로 설정 $("#msg").width(); //id가 msg인 요소의 너비를 반환
$("#msg").width("300"); //ID가 msg인 요소의 너비를 300으로 설정
$("input").val("); //양식 반환 입력 상자 값
$("input").val("test"); //테스트할 양식 입력 상자의 값을 설정합니다.
$("#msg").click() //트리거 id msg 요소의 클릭 이벤트
$("#msg").click(fn); //id가 msg인 요소의 클릭 이벤트에 대한 함수를 추가합니다
동일한 흐림, 초점, select, submit 이벤트는 두 가지 호출 방식이 있습니다

5. 컬렉션 처리 기능

jQuery에서 반환된 컬렉션 내용에 대해서는 직접 루프를 돌 필요가 없고 각 객체를 별도로 처리할 필요가 없습니다. jQuery는 $("p").each(function(i){this.style.color=['#f00')을 포함하여 컬렉션을 처리하기 위한 다양한 편리한 방법을 제공합니다. ,'#0f0', '#00f'][ i ]})
//각각 인덱스 0, 1, 2를 사용하여 p 요소에 대해 서로 다른 글꼴 색상을 설정합니다.
$("tr").each (function(i). ){this.style.BackgroundColor=['#ccc','#fff'][i%2]})
//테이블의 인터레이스 색상 변경 효과 얻기
$ ("p").click( function(){alert($(this).html())})
//각 p 요소에 대한 클릭 이벤트를 추가하면 해당 내용이 팝업됩니다

6. 필요한 기능 확장

$.extend({
min: function(a, b){return a max: function(a , b){return a > b?a:b; }
}); //jQuery의 확장된 min 및 max 메서드
확장된 메서드 사용("$.method 이름"을 통해 호출됨) ):
01.alert(”a=10,b=20,max=” $.max(10,20) ”,min=” $.min(10,20))

7. 메소드 연속 작성 지원

연속 작성이란 jQuery 객체에 대해 다양한 메소드를 지속적으로 호출할 수 있다는 의미입니다.예:

$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('마우스 오버 이벤트 ')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
8,
요소의 스타일을 조작하는 방법에는 주로 다음과 같은 방법이 포함됩니다.

$("#msg").css("Background") //요소의 배경색을 반환합니다.
$ ("#msg").css("Background","#ccc") //요소의 배경을 회색으로 설정
$("#msg").height(300); "#msg").width("200"); //너비와 높이 설정
$("#msg").css({ color: “red”, background: “blue” });//설정 이름-값 쌍의 형태로 스타일 정의
$("#msg").addClass("select"); //select라는 클래스를
$("#msg") 요소에 추가합니다. RemoveClass("select"); // 요소 이름이 있는 클래스를 삭제합니다. select
$("#msg").toggleClass("select") //존재하는 경우(존재하지 않는 경우) 삭제(추가) select
9 라는 클래스, 완전한 이벤트 처리 기능

jQuery는 다양한 이벤트 처리 방법을 제공하지만 html 요소에 이벤트를 직접 작성할 필요는 없습니다. jQuery를 통해 얻은 객체에 직접 이벤트를 추가할 수 있습니다. 예:

$("#msg").click(function(){alert("good")}) //
$("p") 요소에 클릭 이벤트를 추가했습니다. click (function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//세 가지 다른 p 요소 클릭 이벤트를 각각 설정합니다. 다른 처리

jQuery의 여러 사용자 정의 이벤트:

(1) hover(fn1,fn2): 시뮬레이션된 호버 이벤트(마우스가 객체 위로 이동하고 객체 밖으로 이동) 메서드. 일치하는 요소 위로 마우스를 이동하면 첫 번째로 지정된 기능이 트리거됩니다. 마우스가 이 요소 밖으로 이동하면 지정된 두 번째 기능이 트리거됩니다.

//테이블의 행에 마우스를 놓았을 때 클래스를 over로 설정하고 나갈 때 out으로 설정합니다.
$("tr").hover(function(){
$(this).addClass("over");
,function(){
$(this).addClass(" out");
});

(2) Ready(fn): DOM이 로드되고 쿼리 및 조작 준비가 되었을 때 실행될 함수를 바인딩합니다.

01.$(document).ready(function(){alert("Load Success")})
02.//페이지가 로드되면 "Load Success" 메시지가 표시됩니다. onload 이벤트와 동일합니다. $(fn)

과 동일 (3)ggle(evenFn,oddFn): 클릭할 때마다 호출되는 함수를 전환합니다. 일치하는 요소를 클릭하면 지정된 첫 번째 기능이 트리거되고 동일한 요소를 다시 클릭하면 지정된 두 번째 기능이 트리거됩니다. 이후 클릭할 때마다 이 두 함수에 대한 호출이 차례로 반복됩니다.

//클릭할 때마다 선택한 이름의 클래스를 추가 및 삭제를 순환합니다.
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass( "selected");
});

(4) Trigger(eventtype): 일치하는 각 요소에 대해 특정 유형의 이벤트를 트리거합니다. 예:

01.$("p").trigger("click"); //모든 p 요소에 대한 클릭 이벤트 트리거

(5) 바인딩(eventtype,fn), unbind(eventtype): 이벤트 바인딩 및 바인딩 해제

일치하는 각 요소에서 바인딩된 이벤트를 제거(추가)합니다. 예:

$("p").bind("click", function(){alert($(this).text());}) //각 p 요소에 대한 클릭 추가 이벤트
$("p").unbind(); //모든 p 요소에서 모든 이벤트 삭제
$("p").unbind("click") //모든 p 요소에서 모든 단일 이벤트 삭제 event

10. 다양한 실용적인 특수효과 기능

toggle() 및 Slidetoggle() 메소드는 상태 전환 기능을 제공합니다. 예를 들어,ggle() 메서드에는 hide() 및 show() 메서드가 포함됩니다. SlideToggle() 메서드에는 SlideDown() 및 SlideUp 메서드가 포함되어 있습니다.

11. 몇 가지 유용한 jQuery 메서드

$.browser: 브라우저 유형을 감지합니다. 유효한 매개변수: safari, Opera, msie, mozilla. 예를 들어 IE인지 확인하면 $.browser.isie이고, IE 브라우저라면 true를 반환합니다.
$.each(obj, fn): 일반 반복 함수. (루핑 대신) 객체와 배열을 대략적으로 반복하는 데 사용할 수 있습니다. 예:

01.$.each( [0,1,2], function(i, n){ Alert( "항목 #" i ": " n ); }); > 다음과 동일:

var tempArr=[0,1,2]
for(var i=0;ialert("항목 번호" i " : " tempArr[ i ]);
}
는

$.each( { name: "John", lang: "JS" }와 같은 json 데이터도 처리할 수 있습니다. , function (i, n){ Alert( "이름: " i ", 값: " n ) });

결과는 다음과 같습니다:

이름:name, John
이름 :lang, 값:JS
$.extend(target,prop1,propN): 하나 이상의 다른 객체로 객체를 확장하고 확장된 객체를 반환합니다.
jQuery에서 구현한 상속 방식입니다. 예:
$.extend(settings, options);
//설정과 옵션을 병합하고 병합된 결과를 설정으로 반환합니다. 이는 옵션이 설정을 상속하고 상속된 결과를 설정에 저장하는 것과 같습니다.
var settings = $.extend({}, defaults, options);
//기본값과 옵션을 병합하고 기본 콘텐츠를 덮어쓰지 않고 병합된 결과를 설정으로 반환합니다.

은 여러 매개변수를 가질 수 있습니다(여러 매개변수를 결합하여 반환) $.map(array, fn): 배열 매핑. 변환 처리 후 배열의 항목을 새 배열로 저장하고 결과 새 배열을 반환합니다.예:

var tempArr=$.map( [0,1,2], function(i){ return i 4; })
tempArr 콘텐츠는 [4,5,6]입니다.
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i 1 : null; })
tempArr의 내용은 다음과 같습니다: [2,3] $.merge (arr1, arr2): 두 배열을 병합하고 중복 항목을 제거합니다.

예:

$.merge( [0,1,2], [2,3,4] ) //Return [0,1,2,3,4]

$.trim(str): 문자열 양쪽 끝의 공백을 제거합니다. 예:

$.trim("안녕하세요, 잘 지내세요?"); //"안녕하세요, 잘 지내세요?"를 반환합니다.

12. 클래스 라이브러리와 jQuery 간의 충돌

요소를 가져오기 위해 $(id) 메서드를 직접 정의하는 경우가 많으며, 프로토타입과 같은 다른 js 라이브러리에서도 Putting을 사용하면 $ 메서드를 정의합니다. 이러한 내용이 함께 사용되면 변수 메서드 정의 충돌이 발생하며 jQuery는 이 문제를 해결하기 위한 특별한 방법을 제공합니다. jQuery.noConflect();
// jQuery 사용 시작
jQuery("div p").hide()
// 다른 라이브러리의 $() 사용
$ ("content").style.display = 'none'
이 정보가 도움이 되기를 바랍니다.