//jQuery의 장점:
1 경량
2개의 강력한 선택기
3 DOM 작업의 탁월한 캡슐화
4 안정적인 이벤트 처리 메커니즘
5 완벽한 아약스
6 최상위 변수를 오염시키지 마세요
7 뛰어난 브라우저 호환성
>
9 암시적 반복
10 동작이 구조적 레이어에서 분리되었습니다
11 풍부한 플러그인 지원
12 완전한 문서
13 오픈소스
$("#foo")와 jQuery("#foo")는 동일합니다
$.ajax와 jQuery.ajax는 동일합니다. $ 기호는 jQuery의 약어입니다
$(function(){ })은 js의 window.onload 이벤트와 동일합니다. 페이지가 로드된 후 즉시 실행됩니다. 이것만 window.onload
와 같습니다.
하지만 window.onload는 하나만 쓸 수 있지만 $(function(){ })는 여러 개 쓸 수 있습니다
약어가 없으면 $(document)ready(function(){ })
//체인 운영 스타일:
$(".level1>a").click(function(){
$(this).addClass("current") //给当前元素添加"current"样式
.next().show(); //下一个元素显示
.parent().siblings()//父元素的同辈元素
.children("a") //子元素<a>
.removeClass("current")//移出"current"样式
.next().hide();//他们的下一个元素隐藏
return false;
})
var cr = $[0] //DOM 객체
var cr = $cr.get(0);//DOM 객체
//DOM 객체를 jQuery 객체로 변환:
방법은 다음과 같습니다: $(DOM 객체);
var $cr = $(cr) //jQuery 객체
//충돌 해결:
var $jaovo = jQuery.noConflict();
$jaovo(function(){
$jaovo("p").click(function(){
alert($jaovo(this).text());
});
});
jQuery(function(){
jQuery("p".click(function(){
alert(jQuery(this).text());
}));
});
//jQuery 선택기
기본 선택기 1개
기본 선택자는 jQuery에서 가장 일반적으로 사용되는 선택자이자 가장 간단한 선택자이기도 합니다. 요소 ID, 클래스 및 태그 이름을 통해 DOM 요소를 검색합니다
//jQuery :
레이블 객체를 얻으세요.
//jQuery 객체 획득:
$("p");//모든 p 태그 개체 가져오기 ---- 가져온 개체는 배열입니다
$("#aa");//ID가 aa인 태그 개체 가져오기 --- 가져온 개체는 배열입니다
$(".aaa");//aaa 클래스가 포함된 태그 개체 가져오기 --- 가져온 개체는 배열입니다
//jQuery 객체와 DOM 객체 간 변환:
jQuery 메소드와 DOM 메소드는 서로 사용(호출)할 수 없지만 객체는 서로 변환할 수 있습니다
$("p");//jQuery 객체입니다
Document.documentElementsTagName("p");//DOM 객체입니다
$(document.documentElementsTagName("p"));//DOM 객체를 jQuery 객체로 변환
$("p").get(1);//DOM 객체입니다.
Get(1); 배열 p의 두 번째 숫자를 나타냅니다. (아래 첨자 1은 두 번째 숫자입니다.)
$($("p").get(1));//jQuery 객체는
//DOM 객체로 변환된 jQuery 객체:
1 jQuery 객체는 배열류 객체이며, 해당 DOM 객체는 [index] 메소드를 통해 얻을 수 있습니다
var $cr = $("#cr");//jQuery 개체
var cr = $[0] //DOM 객체
2 또 다른 메소드는 jQuery 자체에서 제공하는데, get(index) 메소드를 통해 해당 DOM 객체를 얻는다
var $cr = $("#cr");//jQuery 객체
var cr = $cr.get(0);//DOM 객체
//DOM 객체를 jQuery 객체로 변환:
DOM 객체의 경우 DOM 객체를 $()로 래핑하기만 하면 jQuery 객체를 얻을 수 있습니다.
방법은 다음과 같습니다: $(DOM 객체);
var cr = document.getElementById("cr");//DOM 객체
var $cr = $(cr) //jQuery 객체
//요소 생성:
$("
//text() 텍스트 노드:
text(): 선택한 태그의 내부 텍스트(사람의 눈에 보이는 내용)를 가져오는 함수/방법
>
var li = $("li").text();//li의 텍스트 노드에서 데이터 가져오기(즉, 123의 내용)
//attr() 속성 가져오기/속성 설정/속성 변경:
;var i = $("p").attr("title");//p 태그의 title 속성 값을 가져오는 것입니다
$("p").attr("title"," bbb");//p 태그의 title 속성 값을 bbb로 변경
//removeAttr()는 지정된 요소의 속성 값을 삭제합니다.
가장 좋아하는 과일은 무엇인가요?
//append()를 사용하여 요소를 추가합니다.
지정된 상위 요소에 일치하는 하위 요소를 추가합니다.
함수 체인 호출: 체인 호출을 사용할 수 있는 이유는 무엇인가요?
이전 함수가 여전히
이라는 개체를 반환하기 때문입니다.
예를 들어, a 아래의 a.append(b).append(c)는 상위 태그 객체로 b를 추가하는 함수를 호출하고 반환된 값은 여전히 a의 객체이므로 함수를 호출할 수도 있습니다. c를 추가하세요
//a, b, c는 모두 라벨 객체입니다
var $li_1 = $("
$parent.append($li_1).append($li_2);
a.append(b);//a(추가) 끝에 b를 추가합니다. a는 상위 태그이고 b는 하위 태그입니다
a.append(c);//a(append) 끝에 c를 추가합니다. a는 상위 태그이고 c는 하위 태그입니다
a.append(b).append(c);//a에 b와 c를 추가합니다. B와 c는 피어이지만 b는 c보다 높습니다(체인 호출 추가)
a.prepend(b)//a 앞에 b를 추가합니다. a는 상위 태그입니다. b는 하위 태그입니다.
a.insertAfter(b);//b(동일세대) 뒤에 a 추가
a.insertBefore(b);//b(동일 세대) 앞에 a 추가
//모바일 노드 호출
//일치하는 요소 앞에 지정된 요소를 삽입합니다(지정된 element.insertBefore("일치하는 요소"))
//appendTo()는 요소를 추가합니다:
//a는 객체이고 b는 태그 이름입니다
appendTo(): 일치하는 요소 집합에 지정된 요소를 추가합니다.
$("li").appendTo("ul");//ul에 li 태그 추가
a.appendTo("b"); //예, b는 a에 추가됩니다(a는 라벨이고 b는 라벨입니다)
지정된 요소.appendTo(일치하는 요소);
//요소 삭제(숨겨짐)remove():
a.remove();//html에서 제거(숨김)
var $li = $("ul li:eq(1)").remove();//li 요소인 아래 첨자 1이 있는 li 요소인 ul eq(1)에서 두 번째 li 태그를 제거합니다. , 아래 첨자는 0부터 시작하기 때문입니다
$li.appendTo("ul");//ul에 방금 삭제한 요소를 다시 추가
$("ul li").remove("li[title !=Apple]");//제목 속성이 Apple의 속성이 아닌 ul 요소에서 모든 li 요소를 삭제합니다
//removeAttr()는 지정된 요소의 속성 값을 삭제합니다.
RemoveAttr(xx,xx) 속성 값 삭제
가장 좋아하는 과일은 무엇인가요?
//비어 있음() 지우기:
$("ul li:eq(1)").empty();//ul에서 두 번째 li 요소를 찾아 내용을 삭제합니다. (text node,
//선택한 노드를 복사합니다. clone():
clone(true): 노드를 복사합니다. true인 경우 해당 노드에 바인딩된 이벤트 리스너도 복사됩니다. 쓰지 않으면 기본값은 false입니다.
$("li").clone()//현재 노드 복사
$("li").clone().appendTo("ul");//li 노드를 복사하여 ul에 추가합니다(ul 내부에 추가)
$("li").clone(true).appendTo("ul");//li 노드를 복사하고, li에 바인딩된 이벤트 리스너를 복사하여 ul에 함께 추가합니다(ul 내부에 추가)
//선택한 노드 교체 replacementWith(),replaceAll():
a는 대체되는 객체입니다
b는 교체할 전체 태그입니다.
a.replaceWith(b);//b는 a를 대체합니다(다음 b는 이전 a를 대체합니다) 후자가 이전을 대체합니다
b.replaceAll(a);//ba 바꾸기(이전 b가 다음 a를 대체함) 앞면이 다음을 대체함
//ps가 여러 개인 경우 교체됩니다.
$("p").replaceWith("여자친구가 가장 좋아하지 않는 과일은???");//전체 p 태그를 < ;strong>What is your Girlfriend's로 바꿉니다. 가장 좋아하지 않는 과일???
//ps가 여러 개 있고 하나만 교체하려는 경우
$($("p").get(1)).replaceWith("여자친구가 가장 좋아하지 않는 과일은???");//첫 번째 2p만 교체 태그가 교체되었습니다
교체하려는 태그에 ID를 추가할 수도 있습니다. 즉, 하나만 교체됩니다.
$("#abc").replaceWith("
//replaceAll():
$("엄마가 가장 좋아하지 않는 과일은 무엇인가요???").replaceAll("#abc");//전자는 후자를 ID #abc로 대체합니다. 해당 태그
$("
//랩 Wrap() wraoAll() WrapInner() :
//랩() :
Wrap(): 일치하는 요소를 새 HTML 태그로 래핑합니다.
라벨 객체(래핑됨) b는 라벨(b 라벨로 래핑됨)
모든 a 태그가 래핑됩니다.
a.wrap(b);
//태그가 있으면 다음으로 묶습니다.
~ |
//a 태그가 여러 개인 경우 다음으로 묶습니다.
~ |
~ |
~ |
각각 포장 분리해서 함께 담아드려요
a.wrap("b");//a에 상위 태그를 추가하고 b로 래핑합니다
>
$("p").wrap("");//p 태그에 상위 태그를 추가합니다. 즉, p 태그를 태그로 래핑하여 < ;i> ;
나는 p 태그입니다
WrapAll(): 포장할 라벨이 함께 있지 않고 중간에 다른 라벨이 있어도 포장할 라벨을 함께 이동하여 함께 포장합니다.
//소포 전
>
aaa
aaa
> //효과 전환 토글클래스():
효과 간 전환을 의미하며 처음 전환 시에는 모든 클래스로 구성된 효과를 의미합니다.
현재 효과와 지정된 효과 사이를 앞뒤로 전환하는 것을 의미합니다