jQuery 1.4: 당신 이 알 아야 할 새로운 특성 15 개
jQuery 1.4 는 최근 에 발표 되 었 습 니 다. 이 버 전 은 간단 한 개선 이 아 닙 니 다. 새로운 특성 을 많이 포함 할 뿐만 아니 라 많은 기능 도 개선 하 였 을 뿐만 아니 라 성능 최적화 에 도 많은 공 을 들 였 습 니 다. 본 고 는 이러한 새로운 특성 과 강 화 된 부분 에 대해 토론 할 것 입 니 다. 도움 이 되 기 를 바 랍 니 다.
우선 지금 당신 은 여기에서 최신 1.4 버 전 을 다운로드 할 수 있 습 니 다.http://code.jquery.com/jquery-1.4.js
1. jQuery 에 게 속성 전달
1.4 이전 버 전에 서 jQuery 는 'attr' 방법 을 통 해 요소 집합 에 속성 을 추가 하 는 것 을 지원 했다. 'attr' 방법 은 속성 이름과 값 을 전달 할 수 있 을 뿐만 아니 라 여러 속성 을 포함 한 대상 집합 도 전달 할 수 있다.1.4 에서 새로운 대상 을 만 들 수 있 는 것 을 제외 하고 현재 속성 대상 을 매개 변수 로 jQuery 함수 나 대상 자체 에 전달 할 수 있 습 니 다.여러 속성 을 가 진 링크 요 소 를 만 들 수 있다 면 1.4 코드 를 통 해 다음 과 같 습 니 다.
jQuery('', { id: 'gid', href: 'http://www.google.com', title:' google 비 협조 판 ', rel:' external ', text:' Google 에 들 어 갑 니 다! '});
"text" 속성 을 주의 하고 무엇 을 하 는 지 추측 할 수 있 습 니 다. a 탭 은 "text" 속성 이 없 기 때 문 입 니 다.하하, 어떤 속성 을 전달 할 때 jquery 1.4 역시 자신의 방법 을 검사 하고 사용 합 니 다.따라서 위의 "text" 속성 은 jQuery 가 "text ()" 방법 을 사용 하고 "Google 에 들 어 갑 니 다!" 를 유일한 인자 로 사용 할 수 있 습 니 다.
여기 서 더 좋 은 예 를 제시 합 니 다.
jQuery ('< div / >', {id: 'foo', css: {fontWeight: 700, color: 'green'}, click: function () {alert ('Foo 가 클릭 되 었 습 니 다!');});
"id" 속성 은 일반 속성 으로 추 가 됩 니 다.그러나 "css" 와 "click" 속성 은 특정한 jQuery 방법 에 대응 합 니 다.위의 코드 는 1.4 이전에 다음 과 같이 썼 다.
jQuery ('< div / >'). attr ('id', 'foo'). css ({fontWeight: 700, color: 'green'}). click (function () {alert ('Foo 가 클릭 되 었 습 니 다!');});
jQuery 특성
2. 모든 것 을 "until" 할 수 있다
1.4 DOM 조작 방법 세 가 지 를 추 가 했 는데 그들 은 각각 '
nextUntil' 이다. " prevUntil " 화해시키다 "parentsUntil". 이 방법 들 은 지 정 된 선별 조건 을 충족 시 킬 때 까지 DOM 대상 을 한 순서 로 옮 겨 다 닙 니 다. 과일 목록 이 있다 고 가정 합 니 다.< ul > < li > 사과 < / li > 바나나 < / li > 포도 < / li > 딸기 < / li > < li > 예 < / li > 복숭아 < / li > < / l >
'Apple' 과 'Strawberry' 사이 에 있 는 모든 요 소 를 선택 하고 싶다 면.코드 는 이렇게 쓸 수 있 습 니 다.
jQuery('ul li:contains( )').nextUntil(':contains( )');
// ， ，
: prevUntil
, nextUntil
, parentsUntil
3. 여러 이벤트 연결
jquery 체인 을 통 해 여러 가지 방법 을 연결 하 는 것 보다 지금 은 한 번 의 조정 을 통 해 모든 사건 을 연결 할 수 있 습 니 다. 예 를 들 어:
jQuery ('\ # foo). bind ({click: function () {/ / 구체 코드}, mouseover: function () {/ 구체 코드}, mouseout: function () {/ 구체 코드})
너 도 '
.one()' 방법 으로 조작 할 수 있다.더 많은. bind (...)
4. Per-Property Easing
애니메이션 에 완 동 효과 만 정의 하 는 것 보다 애니메이션 효 과 를 추가 하려 는 속성 에 따라 완 동 함 수 를 정의 할 수 있 습 니 다.jQuery 는 두 개의 느 린 함수, 회전 (기본 값) 과 선형 이동 을 포함 합 니 다.다른 효과 가 필요 하 다 면 따로 다운로드 해 야 합 니 다!
각 속성 에 완 동 함 수 를 지정 하려 면 속성 배열 을 통 해 간단하게 목적 을 달성 할 수 있 습 니 다. 배열 에서 첫 번 째 값 은 당신 이 실현 하고 자 하 는 효과 값 이 고 두 번 째 매개 변 수 는 사용 하 는 완 동 함수 입 니 다. 예 를 들 어:
jQuery('#foo').animate({ left: 500, top: [500, 'easeOutBounce'] }, 2000);
코드 데모 보기!
선택 가능 한 설정 항목 에서 속성 완화 함 수 를 키 쌍 으로 지정 할 수 있 습 니 다.
jQuery('#foo').animate({ left: 500, top: 500 }, { duration: 2000, specialEasing: { top: 'easeOutBounce' } });
원문 작가 주 - 작은 겸손, 이 새로운 특성 은 작가 제 임 스 파 돌 리 의 아이디어!
per - property easing 에 대해 더 알 아 보기
5. 새로운 라 이브 이벤트!
1.4 'submit', 'change', 'focus',' blur '이벤트 에 대한 위탁 지원 을 추가 했다.jQuery 에 서 는 "live ()" 방법 으로 이 벤트 를 의뢰 할 수 있 습 니 다. 이 는 이벤트 가 많은 요소 에 등록 되 어야 하거나 새로운 요소 가 계속 추가 되 어야 합 니 다 (사용 ". live ()" 는 끊 임 없 는 재 연결 이벤트 보다 효율 적 입 니 다). 유용 합 니 다.
하지만 조심 하 세 요!"focus" 와 "blur" 이 벤트 를 의뢰 할 때 "focusin" 과 "focusout" 이벤트 이름 을 사용 해 야 합 니 다!
jQuery('input').live('focusin', function(){ // });
6.
jQuery
1.4 "proxy” ， jQuery 。 ， ， 。
t"this” JavaScrip 。 ， 。
1.4 jQuery
， "app” ， ， "clickHandler” , config 。
var app = {
config: {
clickMessage: ' !'
},
clickHandler: function() {
alert(this.config.clickMessage);
}
};
"app.clickHandler() " ，"clickHandler " "app” 。 "this " "app "。 ：
app.clickHandler(); // " !"
：
jQuery('a').bind('click', app.clickHandler);
， 。 jQuery( ) a
。 "this” a。 。 "this” "app”. jQuery
1.4 ：
jQuery('a').bind(
'click',
jQuery.proxy(app, 'clickHandler')
);
，" " ！
proxy " " ， ，"this” 。 ， jQuery 。
jQuery.proxy
7.
。 ， ， "fx” 。 "setTimeout "。".delay() " 。
jQuery('#foo')
.slideDown() // Slide down
.delay(200) // 200 ms
.fadeIn(); // Fade in
"fx” ， ， ".delay() "。
.delay(…)
8.
".has()” ，jQuery 1.4 ( ) 。 ， jQuery selector ":has()” 。 。
jQuery('div').has('ul');
UL DIV 。 ， (":has() "), ， 。
1.4 jQuery "contains " 。 ， DOM 。 。 ：
jQuery.contains(document.documentElement, document.body);
// true - <body> <html>
: .has(…) , jQuery.contains(…)
9.
".warp()” jQuery ， ".unwrap()” 1.4 。 warp() 。 DOM ：
<div>
<p>Foo</p>
</div>
：
jQuery('p').unwrap();
DOM ：
<p>Foo</p>
， ， 。
.unwrap(…)
10. detach() vs remove()
".detach()” DOM ， ".remove()” 。 ".remove()”
"detach()” jQuery 。 ".data()” jQuery
。
DOM ， DOM ， 。
var foo = jQuery('#foo'); // foo.click(function(){ alert('Foo!'); }); foo.detach(); // DOM // … foo.appendTo('body'); // DOM foo.click(); // "Foo!"
.detach(…)
11. index(…)
jQuery 1.4 ".index()” 。 ， ， 。
， 。 ， DOM ：
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
， ， ：
jQuery('li').click(function(){
alert( jQuery(this).index() );
});
jQuery 1.4 ".index()” ， 。
， ， ， ， -1。
.index(…)
12. DOM
DOM ( ".css()” ".attr()” ， )。 ， 。
:
- after
- before
- append
- prepend
- addClass
- toggleClass
- removeClass
- wrap
- wrapAll
- wrapInner
- val
- text
- replaceWith
- css
- attr
- html
， "this” ， 。
jQuery('li').html(function(i){
return ' : ' + i;
});
， ， setter ( ".html()” ".attr(‘href’)") 。 ：
jQuery('a').attr('href', function(i, currentHref){
return currentHref + '?foo=bar';
});
， ".css() " ".attr() " ， ， 。
jQuery('li').css('color', function(i, currentCssColor){
return i % 2 ? 'red' : 'blue';
});
13.
jQuery 1.4 ( jQuery ) 。
"isEmptyObject”， ， ( --
)。 "isPlainObject”， js ( "{ }" "new
Object” )。
jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false
jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false
: isPlainObject(…) , isEmptyObject(…)
14. Closest(…)
jQuery ".closest()” 。 ， ， 。
， 。 DOM 。 ， jQuery 。
.closest(…)
15. ! focusIn focusOut
， "focus” "blur” ， "focusin” "focusout”。 。
jQuery('form')
.focusin(function(){
jQuery(this).addClass('focused');
});
.focusout(function(){
jQuery(this).removeClass('focused');
});
， 。 ( ) 。
focusIn focusOut 。
jQuery 1.4 。 jQuery ， ！
， 。 ， ！
， "jQuery14 ", jQuery 1.4 ， ， jQeury ！
API !
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
