jQuery 디자인 사상

앞 말
jQuery 의 각 세부 사항 을 깊이 이해 하기 전에 jQuery 의 디자인 사상 에 대해 대체적으로 이해 해 야 한다.문제 가 발생 했 을 때 jQuery 의 어떤 기능 을 사용 해 야 하 는 지 알 고 수첩 에서 구체 적 인 용법 을 신속하게 찾 아야 한다.본 고 는 jQuery 의 디자인 사상 을 상세 하 게 소개 할 것 이다.
선택 요소
jQuery 의 기본 적 인 디자인 사상 과 주요 용법 은 바로'특정한 웹 페이지 요 소 를 선택 한 다음 에 이 를 조작 하 는 것'이다.이것 은 다른 자바 script 라 이브 러 리 와 구별 되 는 근본 적 인 특징 이다.
jQuery 를 사용 하 는 첫 번 째 단 계 는 선택 식 을 구조 함수 jQuery()($로 간략화)에 넣 고 선 택 된 요 소 를 얻 는 것 입 니 다.
[아 날로 그 CSS 선택 요소]

$(document) //        
$('#myId') //  ID myId     
$('div.myClass') //   class myClass div  
$('input[name=first]') //   name    first input  

[특유 의 표현 식 선택]

$('a:first') //        a  
$('tr:odd') //        
$('#myForm :input') //       input  
$('div:visible') //     div  
$('div:gt(2)') //      div  ，     
$('div:animated') //            div  

[다양한 선별 방법]

$('div').has('p'); //     p   div  
$('div').not('.myClass'); //  class   myClass div  
$('div').filter('.myClass'); //  class  myClass div  
$('div').first(); //   1 div  
$('div').eq(5); //   6 div  

서법
[방법 함수 화]
원생 자바 script 에 서 는 할당 연산 자 를 많이 사용 합 니 다.jQuery 에 서 는 함수 전 삼 방식,즉 방법 함수 화 를 많이 사용 합 니 다.

//  
window.onload = function(){};
//jQuery
$(function(){});
//  
div.onclick = function(){};
//jQuery
div.click(function(){});
//  
div.innerHTML = '123';
//jQuery
div.html('123');

[체인 조작]
웹 페이지 요 소 를 선택 하면 일련의 작업 을 할 수 있 고 모든 작업 을 연결 하여 체인 으로 쓸 수 있 습 니 다.$('div').find('h3').eq(2).html('Hello');분해 하면 바로 아래 와 같다.

$('div') //  div  
.find('h3') //     h3  
.eq(2) //   3 h3  
.html('Hello'); //       Hello

이것 은 jQuery 가 가장 칭찬 할 만하 고 편리 한 특징 이다.그것 의 원 리 는 모든 단계 의 jQuery 조작 에 있 으 며,되 돌아 오 는 것 은 하나의 jQuery 대상 이기 때문에 서로 다른 조작 은 한데 연 결 될 수 있다.
jQuery 는 결과 집합 을 한 걸음 뒤로 물 러 설 수 있 도록'end()'방법 도 제공 했다.

$('div')
.find('h3')
.eq(2)
.html('Hello')
.end() //        h3      
.eq(0) //     h3  
.html('World'); //       World

【할당 합 체】
웹 페이지 요 소 를 조작 하 는 데 가장 흔히 볼 수 있 는 수 요 는 그들의 값 을 얻 거나 할당 하 는 것 이다.jQuery 는 같은 함 수 를 사용 하여 값(getter)과 값(setter)을 완성 합 니 다.즉,'값 추출 기'는'값 부여 기'와 일치 합 니 다.값 을 취 할 지 할당 할 지 는 함수 의 매개 변수 에 의 해 결정 된다.

$('h1').html(); //html()    ，    h1  
$('h1').html('Hello'); //html()   Hello，   h1    

흔히 볼 수 있 는 수치 와 할당 함 수 는 다음 과 같다.

.html()      html  
.text()      text  
.attr()            
.width()             
.height()             
.val()           

주의해 야 할 것 은 결과 집합 에 여러 요 소 를 포함 하면 할당 할 때 그 중의 모든 요소 에 대해 할당 합 니 다.값 을 추출 할 때 는 첫 번 째 요소 의 값 만 추출 합 니 다.
[주의].text()예외,모든 요소 의 text 내용 을 추출 합 니 다.
이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!