>  기사  >  웹 프론트엔드  >  jQuery_jquery에서 주의해야 할 사항 요약

jQuery_jquery에서 주의해야 할 사항 요약

WBOY
WBOY원래의
2016-05-16 17:58:511270검색
1. $.find()와 $.children()
의 차이점은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.





찾기 ()는 요소의 맨 아래를 반환합니다. 다음과 같이 하위 요소의 깊이를 제한하지 않고 지정된 모든 요소를 ​​반환합니다.
$("#div_four").find("input")//1개, 2개, 3개 입력을 반환합니다. elements
2.childr() 다음과 같이 요소의 첫 번째 수준 하위 노드 요소 컬렉션을 반환합니다.
$("#div_four").children("input")//1개 및 2개의 입력 반환

2. $.append ()와 $.appendTo()의 차이점
1.append(): 상위 요소의 참조를 반환합니다
2. : ​​새로 생성된 요소의 참조를 반환

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

var e = $("

테이블 제목 요소를 동적으로 생성 및 추가

").appendTo($("# div_1"));
var r = $("#div_1").append ("

테이블 제목 요소를 동적으로 생성 및 추가

");
//e는 새로 생성된 요소를 나타냅니다.

요소
//r은 $("#div_1") 요소를 나타냅니다.


3. 이벤트를 동적으로 바인딩하는 것과 정적으로 이벤트를 추가하는 것의 차이점
jQuery를 사용하면 이벤트를 요소에 동적으로 바인딩하는 것이 매우 간단해 지지만 기존 방식에서는 요소에 이벤트를 직접 추가하는 것을 잊지 마세요. 그러나 jQuery와 일반 JavaScript를 결합한 프로그램을 사용할 때는 이벤트를 얻는 데 있어 차이점을 분명히 해야 합니다. jQuery의 동적으로 바인딩된 이벤트와 정적으로 추가된 이벤트 사이의 소스 개체입니다.

동적으로 바인딩된 이벤트와 정적으로 추가된 이벤트의 차이점


동적 바인딩 고정 이벤트와 정적으로 추가된 이벤트의 차이점

동적으로 바인딩된 이벤트와 정적으로 추가된 이벤트의 차이점
//1. 이벤트를 동적으로 바인딩합니다. 이는 이벤트 소스를 나타냅니다. 예:
$("#p1").click(function(){
alert($(this).text()); //이 코드 이벤트 소스
}); / /2. 이벤트를 정적으로 바인딩하는 경우 직접 사용할 수 없습니다. 예:
function fun(){
alert($(this).text); //

의 내용을 얻을 수 없습니다.
//3. "this" 소스
function fun2(obj){
alert($(obj).text());//obj를 jQuery 객체로 래핑

4. 이벤트 처리 함수 )
$("#p1").click(function(){
alert(this.innerHTML); //이것을 직접 사용
alert($(this). text( )); //JQuery 객체로 래핑합니다
});
위 코드에서는 이벤트 소스 객체를 나타내지만 직접 사용할 때는 HTML DOM 객체입니다. $(this)는 HTML DOM 개체를 jQuery 개체로 래핑하여 변환할 수 있습니다. 즉, jQuery 개체의 속성과 메서드를 갖습니다.

5. $.remove()와 $.remove(selector)의 차이점

두 호출 형식 모두 메소드 이전에 선택기에 의해 선택된 요소를 반환합니다. : 상위 요소 [suicide] 에서 자신을 삭제합니다.
부모 요소에서 요소를 삭제합니다.
예:
var e = $("#div_2 h1") .remove();//삭제된 h1 요소를 반환합니다
var e = $("#div_2 h1").remove("#h2");//ID가 h2인

요소를 삭제하고 모두 반환합니다. h1 요소

6. $.eq()와 $.get()의 차이점
동일한 점: 둘 다 요소 집합에서 지정된 n번째 요소를 가져올 수 있습니다.차이점:
1. eq(n)은 jQuery 객체를 반환하므로 다음과 같은 jQuery 내장 메서드를 직접 사용할 수 있습니다.


$("#div_ three a").eq(0).bind("click", function () {
alert($(this).text ());
});


2. get(n)에서 반환된 DOM 요소 개체는 다음과 같은 HTML DOM 속성과 메서드를 직접 사용할 수 있습니다. div_3 a").get(1).onclick = function () {
alert($(this).text());
};
또는 객체를 jQuery 객체로 캡슐화하여 다음을 달성합니다. 동일한 효과:



코드 복사 코드는 다음과 같습니다. $($ ("#div_two a").get(1 )).bind("click",function () {
alert($(this).text());
}); >
7. $.css(properties)와 $.css(name,value)의 차이점
1. 구문의 차이점
css(properties) $("p").css({color :" red"}); 또는 $("p").css({"color":"red"})
css(name,value) $("p").css("color": "red");
2. 속성 이름의 차이점
css(properties):
스타일 속성 이름을 인용하지 않은 경우 JavaScript 구문의 CSS 스타일 이름을 사용해야 합니다. 예:
$("p" ).css({color:"red",fontSize:"30px"});
"font-size"로 변경하면 아무런 효과가 없습니다
style 속성이 이름에 따옴표가 있으면 두 스타일 모두 작동합니다. 예:
$("p").css({color:"red","font-size":"30px","fontWeight":"bold"} );
css(name,value): 두 가지 형식 모두 허용되며 다음 두 가지 효과는 동일합니다.
$("p").css("fontSize":"30px"); $("p").css("글꼴 크기 ":"30px");

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.