jQuery 학습 시리즈 노트 (1)
탐색:
하나
기본 원리
두 번째
jQuery 패키지
셋
유틸리티 함수
네 개
문서 준비 프로세서
다섯
DOM 요소 만들기
여섯
확장 jQuery
일곱
jQuery 및 기타 라이브러리
기본 원리
1. jQuery 핵심 부분은 HTML 페이지에서 요소를 가져와 조작하는 것입니다.선택기(selector)입니다.
2. 선택기는 요소의 특성이나 요소가 HTML 문서에 있는 위치를 통해 요소 그룹을 설명합니다.
2. jQuery 패키지
요소 세트를 수집할 때 사용할 수 있는 간단한 구문은 다음과 같습니다.
$(selector)
jQuery(selector)$() 함수는 jQuery () 함수의 별명임을 알 수 있습니다.$는 처음 접촉하면 좀 이상할 수도 있지만, 곧 간결함을 좋아하게 될 것이다.
예를 들어:
요소에 끼워 넣은 링크 (요소) 를 얻기 위해서.jQuery 문은 다음과 같습니다.
$("p a");$() 함수는 선택기와 일치하는 DOM 요소의 배열을 포함하는 특별한 JavaScript 객체를 반환합니다.다음은 비교적 재미있는 물건 중 하나가 바로 jQuery 체인이다.예를 들어: CSS 클래스 star가 있는 모든
요소를 희미하게 하고 새 CSS 클래스 빅을 추가합니다.jQuery 문은 다음과 같습니다.$("div.star").fadeOut().addClass("big"); 설명해 주십시오.fadeOut () 는 jQuery가 자체로 가지고 있는 페이드 효과 방법이고,ddClass () 는 jQuery의 추가 클래스 방법입니다.내가 말하고 싶은 이 문장의 중점은 한 번 선택하면 여러 번 다른 조작을 할 수 있다는 것이다.이것이 바로 jQuery 체인입니다. 무한히 지속될 수 있습니다.$() 가 한 작업 (예를 들어 덤프 작업) 을 완성할 때, 같은 그룹의 요소를 되돌려 다음 작업에 제공하기 때문이다.jQuery 선택기는 더욱 고급스러운 사용법이 있습니다. 다음은 몇 가지 예를 들어 여러분의 체험을 들어보겠습니다.(1) 모든 짝수의 요소 선택$("p:even"); even은 짝수의 뜻을 나타낸다(2) 천둥이 달린 천둥이 달린 천둥이 달린 천둥이 달린 천둥이 달린 천둥이 달린 천둥이 달린 천둥이 달린 천둥이 달린 천둥이 달린 천둥이 달린 천둥이 달린 천둥이 달린 천둥이 달린 천둥이 달린 천둥이 달린 천둥이 달린 천둥이 달린 천둥이 천둥이 달린 천둥이 달린 천둥이 천둥이(3) 직접 서브노드로 선택한
$("body > div"); (4) PDF 파일에 대한 링크 선택$("a[href$=pdf]"); (5) 직접 서브노드, 링크(요소)를 포함하는 선택$("body > div:has(a)"); 3. jQuery 유틸리티 함수() 함수는 선택기로만 사용할 수 있는 것이 아니라, 몇 개의 일반적인 실용 도구의 명칭 공간 접두사로 사용할 수 있는 또 다른 직책도 있다.보통 우리는 거의 사용하지 않을 수 있다. 왜냐하면 선택기의 사용을 통해 jQuery가 이미 강하다고 생각하기 때문이다. 그러나 jQuery의 일부로서 이해할 필요가 있다.무엇이 실용 도구입니까?예를 들면 다들 아실 거예요.다음과 같이 문자열의 앞뒤 공백에 대한 유틸리티 함수를 삭제합니다.$.trim(someString); 여러분이 $라고 생각하시면.불편하면 그것을 하나의 명명 공간으로 생각하면 된다. 마치string과 같다.같은 뜻으로 jQuery로 대체하면 좀 더 익숙해질지도 몰라요.jQuery.trim(someString); 실용 도구 함수라고 불리지만, 사실상 함수 $() 의 한 방법으로 생각하면 된다.4. 문서 준비 처리 프로그램일반적으로 브라우저 창에 페이지가 표시되기 전에 다음 두 단계를 거칩니다.(1) DOM 트리 구성(2) 이미지 및 기타 외부 리소스 로드자바스크립트를 사용하여 페이지 요소를 조작할 때 브라우저가 HTML을 DOM 트리로 변환해야 한다는 것을 우리는 모두 알고 있다.전통적으로 window 실례의 onload 처리 프로그램은 상술한 데 사용되는데 문법은 보통 다음과 같다.window.onload = function(){
$("div.star").fadeOut().addClass("big");
} 이렇게 하면 문서가 완전히 불러온 후에 페이드 효과를 실행하고 CSS 클래스 big를 추가할 수 있습니다.그러나 주의해야 할 것은 이것이 가장 좋은 시기가 아니기 때문이다. onload의 실행은 단계(1) 이후일 뿐만 아니라 단계(2) 이후에도 문제가 발생할 수 있기 때문이다. 만약에 이미지나 외부 자원이 비교적 클 때 우리는 불러오는 시간을 기다려야 할 뿐만 아니라 페이지가 우리의 스크립트가 실행되는 효과까지 지연되는 것을 볼 수 있다.만약 인내심이 없는 사용자라면 자원이 불러오기 전에 페이지를 닫았을 수도 있고, 그러면 당신의 '효과'를 볼 수 없을 것이다.그래서 jQuery는 완벽한 시기에 우리의 효과를 보여줄 수 있는 간단한 방법을 제공했다.이제 이게 뭔지 한번 볼까요?$(document).ready(function() {
$("div.star").fadeOut().addClass("big");
}); '효과' 를 이 함수에 쓰면 절차 (1) 가 끝난 후에 우리의 코드가 활성화됩니다.위 코드는 다음과 같이 간략하게 작성할 수도 있습니다.$(function() {
$("div.star").fadeOut().addClass("big");
}); 또 하나는 $()가 window보다 높습니다.onload가 좋은 곳은 $() 는 같은 HTML 문서에서 여러 번 사용할 수 있고, 브라우저는 함수에 따라 페이지에 정의된 선착순으로 일일이 실행됩니다.window.onload 메커니즘은 한 번만 사용할 수 있습니다. 만약에 우리가 어떠한 제3자 코드에 onload 메커니즘을 도입한다면 매우 번거로울 것입니다.5. DOM 요소 만들기$() 함수에 HTML 태그가 포함된 문자열을 전달하여 해당 DOM 요소를 즉시 만들 수 있습니다.예를 들어: 새 단락 요소입니다.쓰기 방법은 다음과 같습니다.$("<p>Hello World</p>"); 그러나 하나의 요소만 만들었지만 그 차원 구조(즉 그 위치)를 모르고 그 작용이 크지 않아 보이기 때문에 대개 DOM 요소를 만든 후에 그 위치를 직접 배치한다.예를 들어 id="paragraph"의 요소 다음에 단락 요소를 새로 만듭니다.쓰기 방법은 다음과 같습니다.$("<p>Hello World</p>").insertAfter("#paragraph"); 6. 확장 jQuery확장 jQuery에 대해 나는 약간의 피가 끓어올랐다. 우리는 모든 사람이 필요로 하는 물건을 미리 준비할 수 있는 라이브러리가 없다는 것을 안다.그래서 jQuery 핵심 라이브러리에는 대부분의 페이지 작성자들이 필요로 하는 기능만 준비되어 있다(물론 이것도 상당히 많은 기능이다).다음 예를 들어 확장 jQuery가 얼마나 시원한지 보여 줍니다. 우리는 '폼 요소를 사용하지 않는 함수' 를 만듭니다.$("form#myform input.special").disable(); jQuery가 disable () 같은 방법을 제공하지 않았기 때문에 확장을 하려면 기본적으로 다음과 같은 문법을 사용합니다.$.fn.disable = function(){
return this.each(function() {
if(typeof this.disabled != "undefined"){
this.disabled = true;
}
});
} 갑자기 이렇게 엉망진창인 사람들을 보면 겁내지 마세요. 다음에 하나하나 설명하고 여러분들이 계속 공부하면 이런 것들은 아주 easy예요. 어쨌든 저는 이렇게 생각해요. 저도 여기서 보면서 배우고 있는데 이 지식을 알아봐야 감히 나타낼 수 있을 것 같아요.먼저, $.fn.disable은 $패키지를 확장하기 위해 disable이라는 함수를 사용합니다.혹시 $을 발견하셨나요?fn은 실용적인 도구 함수에 속하고 두 번째 줄의this는 조작된 포장DOM 요소 집합을 표시한다(사실은 "form#myform input.special"이라는 조건을 충족시키는 모든 DOM 요소 집합이다).그 다음에 each() 방법은this 집합의 모든 원소를 훑어보는 것이다. 세 번째 줄의this는 현재 훑어보는 원소를 나타낸다. 이것은 집합이 아니라 특정한DOM 원소를 가리킨다.만약 이 덩어리가 조금 이해가 안 된다면 당황하지 말고 많이 쓰면 천천히 알게 될 것이다.마지막으로if조건문에서 현재 반복되는 이 요소가disabled 기능이 있는지 여부를 나타냅니다. 만약 있다면 그 값을true로 설정합니다.이렇게 해서 우리는 확장 jQuery를 다 썼다.또한 jQuery 명령 체인도 지원합니다.$("form#myform input.special").disable().addClass("moreSpecial"); 이 안에서 사실 모두가 자세히 생각해 보면 재미있는 것들을 발견할 수 있다. 지금은 아마도 온통 풀투성이일 것이다. 그러나 계속 공부하면 OK가 된다!7. jQuery 및 기타 라이브러리Query는 평화의 사자라고 할 수 있다. 그 자체가 강하지만 천하를 독차지할 생각을 한 적이 없다. 창조자도 사용자의 요구를 충족시키기 위한 것이다. 그러나 그 별명 $때문에 때때로 다른 라이브러리와 작은 충돌을 일으킨다. 예를 들어Prototype 라이브러리(나는 개인적으로 그것이 무엇인지 모른다).그러나 jQuery는 이 문제를 해결했다. 그것은 충돌을 없애기 위해 다른 실용적인 도구 함수 noConflict () 를 사용하는 것이다.jQuery.noConflict(); 이것은 $를 비jQuery 라이브러리에서 정의한 의미로 복원합니다.jQuery에 대한 학습 시리즈 노트는 제가 비교적 간결하게 썼고 더욱 중시하는 것은 신속하게 사용하는 것입니다. 물론 매우 중요한 지식을 제가 전문적으로 지적하겠습니다.PS: 댓글 소통을 환영합니다. 24시간 이내에 답장이 있어야 합니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
