jquery 일반 기술 및 일반 메서드 목록 collection_jquery

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 메서드를 사용할 수 없습니다.
다음 작성 방법은 모두 맞습니다.
3. jQuery 컬렉션의 특정 항목을 가져오는 방법
얻은 요소 컬렉션에 대해 특정 항목을 가져옵니다(인덱스로 지정). )은 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 콘텐츠를 반환합니다.
//ID msg를 사용하여 요소 노드 콘텐츠에 "새 콘텐츠"를 HTML 문자열로 쓰면 페이지에 굵은 새 콘텐츠가 표시됩니다.
$("#msg").text() //Return the id msg 요소 노드의 텍스트 내용입니다.
//ID가 msg인 요소 노드의 콘텐츠에 "새 콘텐츠"를 일반 텍스트 문자열로 쓰면 페이지에 새 콘텐츠가 표시됩니다.
$("#msg").height() / /msg의 id를 반환합니다. 요소의 높이
$("#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인 요소의 클릭 이벤트에 대한 함수
마찬가지로 흐림, 초점, 선택 및 제출 이벤트에는 두 가지 호출 방법이 있을 수 있습니다
5. 컬렉션 처리 기능
컬렉션의 경우 jquery에서 반환된 콘텐츠를 직접 반복하여 처리할 필요가 없습니다. 각 객체는 개별적으로 처리됩니다. jquery는
에 두 가지 형식이 포함되어 있습니다.
//다르게 설정하세요. 각각 인덱스가 0, 1, 2인 p 요소의 값
//테이블의 인터레이스 색상 변경 효과 달성
//각 p 요소에 대한 클릭 이벤트를 추가하고 p를 클릭합니다. 콘텐츠를 팝업하는 요소
6. Extension 필요한 함수
}) //jquery에 대한 확장된 min 및 max 메서드
확장된 메서드를 사용합니다("$. 메소드 이름"):
7 , 메소드 연결 지원
소위 연결은 jquery 객체에서 다양한 메소드를 지속적으로 호출할 수 있음을 의미합니다. 예:

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"); //존재하는 경우(존재하지 않는 경우) 해당 클래스를 삭제(추가)합니다.

9. 완벽한 이벤트 처리 기능
Jquery 다양한 이벤트 처리 방법이 제공됩니다. html 요소에 직접 이벤트를 작성할 필요는 없지만, 가져온 객체에 이벤트를 직접 추가할 수 있습니다. 제이쿼리를 통해. 예:
$("#msg").click(function(){}) //요소에 클릭 이벤트 추가
//세 가지 다른 p 요소에 대해 별도의 클릭 이벤트 설정 다양한 처리
jQuery의 여러 사용자 정의 이벤트:
(1) hover(fn1, fn2): 호버 이벤트(마우스가 개체 위로 이동하여 개체 밖으로 이동)를 모방하는 메서드입니다. 일치하는 요소 위로 마우스를 이동하면 첫 번째로 지정된 기능이 트리거됩니다. 마우스가 이 요소 밖으로 이동하면 지정된 두 번째 기능이 트리거됩니다.
//마우스가 테이블 행에 놓였을 때 클래스를 over로 설정하고 나갈 때 out으로 설정하세요.
(2) Ready(fn): DOM이 로드되고 쿼리 및 조작 준비가 되었을 때 실행될 함수를 바인딩합니다.
//페이지가 로드되면 onload 이벤트와 동일한 "로드 성공" 메시지가 표시됩니다. $(fn)
과 동일 (3)ggle(evenFn,oddFn): 클릭할 때마다 호출되는 함수를 전환합니다. 일치하는 요소를 클릭하면 지정된 첫 번째 기능이 트리거되고 동일한 요소를 다시 클릭하면 지정된 두 번째 기능이 트리거됩니다. 이후 클릭할 때마다 이 두 함수에 대한 호출이 차례로 반복됩니다.
//클릭할 때마다 선택한 이름의 클래스를 추가 및 삭제를 순환합니다.
(4) Trigger(eventtype): 일치하는 각 요소에서 특정 유형의 이벤트를 트리거합니다.
예:
$("p").trigger("click"); //모든 p 요소의 클릭 이벤트를 트리거합니다.
(5) 바인딩(eventtype,fn), unbind(eventtype) : 이벤트 바인딩 및 바인딩 해제
는 일치하는 각 요소에서 바인딩된 이벤트를 제거(추가)합니다.
예:
$("p").bind("click", function(){.text());}) //각 p 요소에 대한 클릭 이벤트 추가
$( "p").unbind(); //모든 p 요소의 모든 이벤트 삭제
$("p").unbind("click") //모든 p 요소의 모든 클릭 이벤트 삭제
10. 여러 가지 실용적인 특수 효과 기능
그 중 전환() 및 슬라이드토글() 메서드는 상태 전환 기능을 제공합니다.
예를 들어 전환() 메서드에는 hide() 및 show() 메서드가 포함됩니다.
slideToggle() 메서드에는 SlideDown() 및 SlideUp 메서드가 포함되어 있습니다.
11. 몇 가지 유용한 jQuery 메소드
$.browser: 브라우저 유형을 감지합니다. 유효한 매개변수: safari, Opera, msie, mozilla. 예를 들어 IE인지 확인하면 $.browser.isie이고, IE 브라우저라면 true를 반환합니다.
$.each(obj, fn): 일반 반복 함수. (루핑 대신) 객체와 배열을 대략적으로 반복하는 데 사용할 수 있습니다.
예를 들어
은 다음과 동일합니다.
은
과 같은 json 데이터도 처리할 수 있으며 결과는 다음과 같습니다.
$.extend(target,prop1,propN): Extend with one 또는 more other object 확장된 개체를 반환하는 개체입니다. jquery에서 구현한 상속 방식입니다.
예:
//설정과 옵션을 병합하고 병합된 결과를 설정으로 반환합니다. 이는 옵션이 설정을 상속하고 상속된 결과를 설정에 저장하는 것과 같습니다.
//기본값과 옵션을 병합하고 기본 내용을 덮어쓰지 않고 병합된 결과를 설정으로 반환합니다.
여러 매개변수를 가질 수 있습니다(여러 매개변수를 결합하여 반환)
$.map(array, fn): 배열 매핑. 변환 처리 후 배열의 항목을 새 배열로 저장하고 결과 새 배열을 반환합니다.
예:
tempArr의 내용: [4,5,6]
tempArr의 내용: [2,3]
$.merge(arr1, arr2): 두 개 병합 중복된 항목을 배열하고 삭제합니다.
예: $.merge( [0,1,2], [2,3,4] ) //[0,1,2,3,4] 반환
$.trim(str): 문자열 양쪽 끝의 공백 문자를 삭제합니다.
예: $.trim("안녕하세요, 잘 지내세요?"); //Return "안녕하세요, 잘 지내세요?"
12. 사용자 정의 메서드 또는 다른 클래스 라이브러리와 jQuery 간의 충돌을 해결합니다.
요소를 얻기 위해 우리는 $(id) 메소드를 직접 정의하거나 프로토타입과 같은 다른 js 라이브러리에서도 $ 메소드를 정의하는 경우가 많습니다. 메서드 정의 충돌이 발생하면 Jquery는 이 문제를 해결하기 위한 특별한 방법을 제공합니다.
jquery에서 jQuery.noConflect() 메서드를 사용하여 $ 변수 제어를 이를 구현하는 첫 번째 라이브러리 또는 이전에 사용자 정의된 $ 메서드로 전송합니다. 나중에 Jquery를 사용할 때는 $를 모두 jQuery로 바꾸면 됩니다. 예를 들어 원래 참조된 개체 메서드 $("#msg")는 jQuery("#msg")로 변경됩니다.
예:
// jQuery 사용 시작
// 다른 라이브러리의 $() 사용
일반적인 jquery 메서드 목록:
속성:
$(p).addClass( css 정의된 스타일 유형); 요소에 스타일 추가
$(img).attr({src:test.jpg,alt:test Image}) 요소에 속성/값 추가, 매개변수는 map
$(img).attr(src,test.jpg); 요소에 속성/값 추가
$(img).attr(title, function() { return this.src }); 요소에 /값 속성/값 추가 ​
$(요소 이름).html() 요소 내의 콘텐츠(요소, 텍스트 등) 가져오기
$(요소 이름).html(new stuff); 요소에 대한 콘텐츠 설정
$(요소 이름).removeAttr(속성 이름) 요소에서 지정된 속성 및 속성 값 삭제
$(요소 이름).removeClass(class) 삭제 요소에서 지정된 스타일
$( 요소 이름).text(); 요소의 텍스트를 가져옵니다.
$(요소 이름).text(value) 요소의 텍스트 값을 값
으로 설정합니다. $(요소명).toggleClass(class) 해당 요소가 매개변수에 스타일이 존재하는 경우 취소합니다. 존재하지 않는 경우 이 스타일을 설정합니다.
$(입력 요소 이름).val()의 값을 가져옵니다. 입력 요소
$(입력 요소 이름).val(값); 입력 요소의 값을 value로 설정합니다.
조작:
$(요소 이름).after(content); element
$(요소 이름).append(content); 콘텐츠를 요소로 사용 콘텐츠는
$(요소 이름).appendTo(content) 요소 뒤에 삽입됩니다. >$(요소 이름).before(content); after 메소드의 반대
$( 요소 이름).clone(Boolean 표현식) Boolean 표현식이 true인 경우 요소를 복제합니다(매개변수가 없는 경우 true로 처리됨)
$(요소 이름).empty() 요소의 내용을 비어 있도록 설정
$(요소 이름).insertAfter(content) 내용 뒤에 이 요소 삽입
$(요소 name).insertBefore(content); 이 요소를 콘텐츠
$(element) 앞에 삽입합니다. prepend(content) 콘텐츠를 요소의 일부로 사용하고
$(element); .prependTo(content); 해당 요소를 콘텐츠의 일부로 사용하고 콘텐츠 앞에 배치합니다.
$ (Element).remove(); 지정된 모든 요소 삭제
$(Element).remove( exp); exp를 포함하는 모든 요소 삭제
$(Element).wrap(html); 요소를 html로 둘러싸십시오. Element
$(element).wrap(element); :
핵심:
$(html).appendTo(body)는 본문 HTML 코드에 단락을 작성하는 것과 동일합니다.
$(elems)는 DOM에서 요소를 가져옵니다.
$(function() {..}); 함수를 실행합니다.
$(div > p).css(border, 1px solid grey ); 모든 div의 하위 노드 p를 찾고 스타일을 추가합니다.
$(input:radio, document. Forms[0]) 현재 페이지의 첫 번째 폼에서 모든 라디오 버튼 찾기
$.extend( prop) prop은 jquery 객체입니다.
예:
jQuery( 표현식, [context] ) $( 표현식, [컨텍스트]); 기본적으로 $()는 현재 HTML 문서 요소에서 DOM을 쿼리합니다.
각( 콜백 )은 일치하는 각 요소를 컨텍스트로 사용하여 함수를 실행합니다.
예: 1
예: 2
ready(fn); $(document).ready() 본문에 있음 onload 이벤트가 아닙니다. 그렇지 않으면 함수를 실행할 수 없습니다. 각 페이지에는
많은 기능을 불러와 실행할 수 있으며, fn의 순서대로 실행됩니다.
bind( type, [data], fn )은 하나 이상의 이벤트 핸들러 함수를 일치하는 각 요소의 특정 이벤트(예: 클릭)에 바인딩합니다. 가능한 이벤트 속성은 다음과 같습니다: Blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
one( type, [data], fn )은 일치하는 각 요소( Like )에 대한 특정 이벤트입니다. 클릭) 하나 이상의 이벤트 핸들러 함수를 바인딩합니다. 이 이벤트 핸들러는 각
객체에서 한 번만 실행됩니다. 그 외의 규칙은 Bind() 함수와 동일합니다.
trigger( type, [data] )는 일치하는 각 요소에서 특정 유형의 이벤트를 트리거합니다.
triggerHandler( type, [data] ) 이 특정 메소드는 요소에서 특정 이벤트를 트리거하고(이벤트 유형 지정) 이 이벤트에 대한 브라우저의 기본 작업을 취소합니다.
unbind( [type], [ data] ) 바인딩을 해제하고 일치하는 각 요소에서 바인딩된 이벤트를 제거합니다.
$(p).unbind()는 모든 단락에서 모든 바인딩된 이벤트를 제거합니다
$(p).unbind( click )는 모든 단락에서 클릭 이벤트를 제거합니다
hover( over, out ) over 및 out은 둘 다입니다. 마우스가 일치하는 요소 위로 이동하면 첫 번째로 지정된 기능이 트리거됩니다. 마우스가 이 요소 밖으로 이동하면 지정된 두 번째 기능이 트리거됩니다.
toggle( fn, fn ) 일치하는 요소를 클릭하면 지정된 첫 번째 기능이 트리거됩니다. 동일한 요소를 다시 클릭하면 지정된 두 번째 기능이 트리거됩니다.
요소 이벤트 목록 설명
참고: 매개변수가 없는 함수의 매개변수는 선택적 fn입니다. jQuery는 양식 요소의 재설정 이벤트를 지원하지 않습니다.
이벤트 설명은 요소 또는 객체를 지원합니다.
blur( ) 요소는 포커스를 잃습니다. a, input, textarea, 버튼, select, label, map, Area
change( ) 사용자가 필드 입력의 내용을 변경합니다. textarea, select
click( ) 객체의 거의 모든 요소를 ​​마우스로 클릭합니다.
dblclick( ) 객체의 거의 모든 요소를 ​​마우스로 더블클릭합니다.
error( ) 로드할 때 오류가 발생하는 경우 문서 또는 이미지 창, img
focus ( ) 요소가 포커스를 얻습니다 a, input, textarea, 버튼, 선택, 레이블, 지도, 영역
keydown( ) 특정 키보드 키를 눌렀을 때 거의 모든 요소
keypress ( ) 특정 키보드 키가 눌림 거의 모든 요소를 ​​누르거나 누르고 있음
keyup( ) 특정 키보드 키가 눌림 거의 모든 요소
load( fn ) 특정 페이지나 이미지가 로드된 창, img
mousedown( fn ) Some 거의 모든 요소에서 마우스 버튼을 눌렀습니다
mousemove(fn) 거의 모든 요소에서 마우스를 이동합니다
mouseout(fn) 거의 모든 요소의 한 요소에서 마우스를 이동합니다
mouseover(fn) 마우스가 이동합니다. 요소 위의 거의 모든 요소
mouseup( fn ) 마우스 버튼이 해제됩니다. 거의 모든 요소
resize( fn ) 창 또는 프레임의 크기가 조정됩니다. window, iframe, 프레임
scroll( fn ) 문서 스크롤 보이는 부분이 창일 때
select( ) 텍스트가 선택됨 document, input, textarea
submit( ) submit 버튼 클릭 시
unload( fn ) 사용자 페이지 창을 종료합니다.
JQuery Ajax 메서드 설명:
load( url, [data], [callback] )은 원격 HTML 콘텐츠를 DOM 노드에 로드합니다.
$(#feeds).load(feeds.html); 피드 ID를 사용하여 div에 Feeds.html 파일 로드
jQuery.get( url, [data], [callback] ) GET 요청 사용 페이지.
jQuery.getJSON( url, [data], [callback] )은 GET을 사용하여 JSON 데이터를 요청합니다.
jQuery.getScript( url, [callback] )는 GET을 사용하여 자바스크립트 파일을 요청하고 실행합니다.
jQuery.post( url, [data], [callback], [type] )은 POST를 사용하여 페이지를 요청합니다.
ajaxComplete( callback ) AJAX 요청이 끝나면 함수를 실행합니다. 이것은 Ajax 이벤트입니다.
ajaxError( callback ) AJAX 요청이 실패하면 함수를 실행합니다. 아약스 이벤트입니다