《날카로운 jQuery》 요점 귀납 (3) jQuery의 이벤트와 애니메이션 (상: 이벤트 편)
30976 단어 jquery
사건
1 DOM 로드
$(document).ready(function(){//...})DOM을 불러온 후 실행합니다. 중복 사용에 있어서는 window와 다릅니다.onload=function(){//...}$(window).load(function(){//...})window 내의 모든 대상을 불러온 후에 실행합니다. 거의 window와 같습니다.onload=function(){//...}.selector에 대해서도 이 방법을 사용할 수 있습니다
추가: $(document).ready(function(){//...})의 약자: $(function () {//...})또는 $().ready(function(){//...})
2 이벤트 바인딩
$("selector").bind()는 요소 귀속 이벤트, 형식: bind(type[,data],fn), type 이벤트 형식을 여러 번 호출할 수 있습니다. blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemover,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,keyup,mouseenter,mouseenter,mouse,mouse,mouseenter,mouse,mouserror 또는 사용자 정의 이벤트 약자 방법: $("selector").bind(type,function(){//...})$("selector")와 같습니다.type(function(){//...})unbind의 특정 이벤트에 사용할 데이터 파라미터를 전달할 수 있습니다
$("selector").is() 판단 방법
(외: 국부 변수를 정의할 수 있는 var$x=$("selector")를 여러 번 다시 사용합니다.방법()
3 작성 이벤트
$("selector").오버 (enter, leave) 는 커서 정지 이벤트를 시뮬레이션하고, 마우스가 들어갈 때 enter 이벤트를 터치하며, 마우스를 옮길 때 liave 이벤트 (bind ("mouseenter") 와bind ("mouseleave") 를 대신 사용합니다. $("selector")hover(function(){//enter case...},function(){//leave case...})(외:IE6는 a 탭을 제외한 css를 지원하지 않습니다:hover 위조 클래스의 문제 - 이hover 이벤트를hack으로 해결할 수 있습니다)
$("selector").ggle (fn1, fn2,..., fnN) 은 마우스를 연속으로 눌러서 이벤트를 반복해서 실행하는 방법을 시뮬레이션합니다. $("selector").toggle(function(){//case1...},function(){//case2...},...,function() {//caseN} 특수 사용법: 원소가 보이는 상태를 전환합니다. 원소가 숨겨진 경우 toggle을 누르면 원소가 보일 수 있습니다.요소를 볼 수 있습니다. toggle을 클릭하여 요소를 트리거하여 P108을 숨깁니다.
<
script
>
$(
function
(){
$(
"
panel h5.head
"
).toggle(
function
(){
$(
this
).next().toggle();
},
function
(){
$(
this
).next().toggle();
})
})
</
script
>
4 사건 발생
$("selector").bind("type",function(event) {//event: 이벤트 대상...})이벤트 대상: 이 함수 내부에만 접근할 수 있으며 이벤트 처리 함수 실행이 완료되면 이벤트 대상은 삭제됩니다
event.stopPropagation()은 함수 마지막에 이벤트 거품 P111을 중지하는 데 사용됩니다. 예:
<
script
>
$(
'
span
'
).bind(
"
click
"
,
function
(event){
var
txt
=
$(
'
msg
'
).html()
+
"
<p> span </p>
"
;
$(
'
#msg
'
).html(txt);
event.stopPropagation();
})
</
script
>
event.preventDefault () 차단 요소 기본 행동 예: 검증 폼 (input은 비어 있습니다. 제출 및 알림)
<
script
>
$(
function
(){
$(
"
#submit
"
).bind(
"
click
"
,
function
(event){
var
username
=
$(
"
#username
"
).val();
if
(username
==
""
){
$(
"
#msg
"
).html(
"
<p> </p>
"
);
event.preventDefault();
}
});
})
</
script
>
return false;대상 이벤트에 거품과 기본 동작을 동시에 정지합니다. stopPrapagation () 과preventDefault () 를 동시에 호출하는 것과 같습니다.
(외: 이벤트 포획과 이벤트 거품은 상반되는 과정이며, 이벤트 포획은 DOM 맨 위에서 아래로 촉발하기 시작하며, jQuery가 지원하지 않기 때문에 본 책은 약술)
5 이벤트 객체의 속성
event.type 가져오기 이벤트 유형 예:
<
script
>
$(
"
a
"
).click(
function
(event){
alert(event.type);
return
false
;
})
</
script
>
위에서 "click"반환
event.target 이벤트를 트리거하는 요소의 예:
<
script
>
$(
"
a[href=http://google.com]
"
).click(
function
(){
alert(event.target.href);
return
false
;
})
</
script
>
위에서 되돌아오기"http://google.com"
event.relatedTarget 액세스 이벤트 관련 요소
event.pageX/event.페이지Y 페이지에 대한 커서의 x 및 y 좌표 가져오기
event.which는 마우스 클릭 이벤트에서 마우스 왼쪽, 가운데, 오른쪽 단추를 가져옵니다.키보드 이벤트에서 키보드 키 가져오기(반환값 1=마우스 왼쪽 키, 2=마우스 가운데 키, 3=마우스 오른쪽 키)
event.metaKey 키보드 이벤트에서
event.originalEvent는 원래 이벤트 객체를 가리킵니다.
6 이벤트 제거
$("selector").unbind () 요소에서 이벤트를 제거합니다. 형식: $("selector").unbind([type][,data]);(매개 변수가 없으면 바인딩된 모든 이벤트를 삭제하고, 이벤트 유형 매개 변수를 제공한 경우 해당 유형의 바인딩 이벤트만 삭제합니다. 바인딩할 때 전달되는 처리 함수를 두 번째 매개 변수로 사용할 경우 이 특정 이벤트 처리 함수만 삭제됩니다.) 예:
<
script
>
$(
function
(){
$(
'
#btn
'
).bind(
"
click
"
,myFun1
=
function
(){
//
$(
'
#test
'
).append(
"
...
"
);
});
})
</
script
>
<
script
>
$(
'
#delOne
'
).click(
function
(){
$(
'
#btn
'
).unbind(
"
click
"
,myFun1);
//
})
</
script
>
$("selector").() 트리거를 한 번 하면 삭제되는 이벤트를 연결합니다. 형식: $("selector").one(type[,data],fn);
7 시뮬레이션 작업
$("selector").trigger("type");사용자 상호 작용을 시뮬레이션하는 간단한 방법: $("#selector").type(); 형식: $("selector").trigger (type [,data]) 예: 마우스를 대신 누르면 지나갑니다.
<
script
>
$(
"
selector
"
).mouseover(
function
{
//
...});
$(
"
selector2
"
).click(
function
(){
$(
"
selector
"
).trigger(
"
mouseover
"
);
//
$("selector").mouseover()
})
</
script
>
사용자 정의 이벤트의 예
<
script
>
$(
"
selector
"
).bind(
"
myClick
"
,
function
(){
//
...}); //
$(
"
selector
"
).trigger(
"
myClick
"
);
//
</
script
>
$("selector").trigger(type[,data])는 리셋 함수 P119에 매개 변수를 배열 형식으로 전달할 수 있습니다.
<
script
>
$(
"
#btn
"
).bind(
"
myClick
"
,
function
(event,message1,message2){
$(
"
#test
"
).append(
"
<p>
"
+
message1
+
message2
+
"
</p>
"
);
});
$(
"
#btn
"
).trigger(
"
myClick
"
, [
"
"
,
"
"
]);
</
script
>
8 기타 사용법
$("selector").bind("type1 type2",function(){//...})여러 이벤트 유형 P119를 한 번에 바인딩하는 보기 좋은 예
<
script
>
$(
function
(){
$(
"
div
"
).bind(
"
mouseover mouseout
"
,
function
(){
$(
this
).toggleClass(
"
over
"
);
//
class
});
})
</
script
>
$("selector").bind("type. 네임스페이스",function() {//...})여러 이벤트에 이벤트 이름 공간을 추가하여 관리하기 쉽습니다. 이름 공간을 삭제하면 이름 공간 아래의 이벤트가 동시에 삭제됩니다. 예를 들어 $("div").bind("mouseover.plugin",function(){//...})$("div").bind("click.plugin",function(){//...})$("div").unbind(".plugin");
$("selector").trigger("type!") "!"이름 공간에 포함되지 않는 type 방법을 선택하는 데 사용합니다
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
