JQuery_jquery의 이벤트 및 애니메이션 사용 예
- WBOY원래의
- 2016-05-16 16:17:581202검색
이 문서의 예에서는 JQuery의 이벤트 및 애니메이션 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
1.바인드 이벤트
코드 복사 코드는 다음과 같습니다.
$(함수 () {
$("#divid h5.head").bind("click", function () { //세 개의 매개변수가 포함된 이벤트 바인딩, 첫 번째는 이벤트, 두 번째는 이벤트
경고($(this).text());
});
$("#divid h5.content").css("display", "none"); //Css 메소드는 라벨 스타일을 동적으로 설정하는 것입니다
});
$(함수 () {
$("#btnid").bind("클릭", 함수 () {
if (bool == true) {
$("#btnid .content").css("표시", "없음");
부울 = 거짓;
$(this).val("디스플레이");
}
그렇지 않으면 {
$("#btnid .content").css("디스플레이", "");
부울 = true;
$(this).val("숨김");
}
});
});
$(함수 () {
$("input[type=button]").bind("click", function () { //콘텐츠 표시 및 숨기기
var content = $("#divid .content");
if (content.is(":visible")) {
content.hide();
$(this).val("디스플레이");
}
그렇지 않으면 {
content.show();
$(this).val("숨김");
}
});
});
Rocky?
비를 내리세요. 우산을 가져갈 필요가 없습니다. 모든 것이 끝나도록 하세요.
위 작업에서 바인드 이벤트를 새로 배웠는데 바인드 이벤트에는 세 가지 매개변수가 있습니다. 첫 번째 매개변수는 click, dbclick, mouseover 등과 같은 이벤트 이름입니다. 두 번째 매개변수는 data입니다. object, 세 번째 매개변수는 바인딩된 이벤트 함수를 처리하는 데 사용되는 메서드입니다. 또한 여기에는 애니메이션의 예, 즉 표시 또는 숨기기도 작성됩니다. show()와 hide()를 배우기 전에는 보통 위의 첫 번째 방법으로 작성하는데, 그냥 bool형 변수만 정의하면 되지만, show-hide 시간 처리 버튼을 작성할 때는 위와 같습니다. 여전히 꽤 귀찮기 때문에 show()와 hide()를 배우고 나면 훨씬 간단해집니다. 즉, 직접 숨기고 표시할 수 있습니다. 분명히 비교할 수 있습니다. 코드 처리는 간단합니다.
2.이벤트 및 이벤트 버블링 전환
코드 복사 코드는 다음과 같습니다.
<script><br>
$(함수 () {<br>
$("input[type=button]").toggle(function () { //toggle의 두 매개 변수는 모두 이벤트이며 차례로 호출됩니다.<br>
$(this).css("배경색상","빨간색");<br>
}, 함수() {<br>
$(this).css("배경색상", "노란색");<br>
});<br>
});<br>
$(함수 () {<br>
$("div").each(함수 () {<br>
$(this).bind("mouseup", 함수 (e) {<br>
Alert(e.pageX); //마우스의 x방향 위치 출력<br>
Alert(e.pageY); //y방향 마우스 위치 출력<br>
Alert(e.which); //마우스 버튼 선택 출력, 1은 마우스 왼쪽 버튼, 2는 롤러 버튼, 3은 마우스 오른쪽 버튼 <br>
});<br>
});<br>
});<br>
$(함수 () {<br>
$("#txt").keydown(함수 () {<br>
e.preventDefault(); //태그 링크 방지<br>
Alert(e.keyCode); //키보드가 요청 코드를 받습니다<br>
});<br>
});<br>
$(함수 () {<br>
$("#ouuerdiv").click(함수 () {<br>
경고($(this).text());<br>
});<br>
$("#div").click(함수 () {<br>
경고($(this).text());<br>
});<br>
$("#innerdiv").click(function () { //여기서 이벤트의 버블링 현상을 작성합니다. PreventDefault 또는 RecentDefault<br>를 사용하여 버블링을 구성할 수 있습니다.
경고($(this).text());<br>
});<br>
})<br>
<br>
<br>
<input type="button" name="btnname" value="button" id="btn"/><br>
<div id="ouuerdiv"> 외부 div<div id="div">중간 div<div id="innerdiv">내부 div</div></div></div><br>
<a href="http://www.baidu.com" id="a">바이두</a><br>
<textarea id="txt"rows="5" cols="5"><br>
</텍스트 영역><br>
</본문></div>
<br>
Toggle 이벤트: 마우스 클릭 이벤트를 시뮬레이션합니다. 첫 번째 이벤트는 마우스가 요소 위로 이동할 때 트리거되고 두 번째 이벤트는 마우스가 요소를 떠날 때 트리거됩니다. 두 이벤트는 서로 전환하여 트리거됩니다. 또한 이벤트 버블링도 언급됩니다. 이벤트 버블링은 실제로 간단히 다음과 같이 이해됩니다. 페이지에 여러 이벤트가 있을 수 있거나 여러 요소가 하나의 이벤트에 해당할 수 있습니다. 위와 같이 페이지에 두 개의 요소가 있고 하나의 div 요소가 다른 div 요소에 중첩되어 있고 두 요소 모두에 바인딩된 클릭 이벤트가 있다고 가정합니다. 그런 다음 내부 div 요소를 클릭하면 외부 div도 표시됩니다. 그냥 이벤트가 터지는군요. 여기서 주목해야 할 점은 모두 이벤트에 바인딩되어 있다는 점입니다. 클릭 이벤트만 내부적으로 발생한다고 당연하게 여기기 쉽습니다.
<p><strong>3. 이벤트 제거 및 여러 이벤트 연속 추가<br>
</strong></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="95010" class="copybut" id="copybut95010" onclick="doCopy('code95010')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div>
<div class="codebody" id="code95010"><script><br>
$(함수 () {<br>
$("removeall").click(function () { <br>
$("#btn").unbind(); //이벤트 제거<br>
});<br>
$("#btn").bind("click", function () { //여러 개의 이벤트를 연속적으로 추가할 수 있습니다<br>
$("#text").append("<p>처음으로 추가된 이벤트입니다</p>")<br>
})<br>
.bind("클릭", 함수 () {<br>
$("#text").append("<p>두 번째로 추가된 이벤트입니다</p>")<br>
})<br>
.bind("클릭", 함수 () {<br>
$("#text").append("<p>세 번째로 추가된 이벤트입니다</p>")<br>
})<br>
});<br>
<br>
<br>
<button id="btn">나를 클릭하세요</button><button id="removeall">모든 일정 삭제</button><br>
<div id="text">div 텍스트 정보</div><br>
</본문></div>
<br>
위에서 바인드 이벤트는 이벤트를 추가하는 것이고, 언바인드는 이벤트를 제거하는 것이라고 배웠습니다. 비교해 보면 알겠지만, 여러 이벤트를 연속으로 추가하는 경우는 실제로 이벤트를 추가하고 계속 바인딩하는 경우입니다. 이벤트를 추가하세요.
<p><strong>4. 시뮬레이션 이벤트</strong></p>
<p>우리가 연구한 위 바인드 이벤트, 클릭 이벤트 등은 일반적으로 버튼을 클릭하여 트리거될 수 있는 이벤트입니다. 그러나 때로는 클릭 효과를 얻기 위해 사용자 작업을 시뮬레이션해야 합니다. 입력 및 구매 사용자가 클릭할 필요 없이 나중에 클릭 이벤트가 트리거되면 Trigger() 메서드를 사용하여 시뮬레이션 작업을 완료합니다. </p>
<p><strong>5. 기타 이벤트<br>
</strong></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="34531" class="copybut" id="copybut34531" onclick="doCopy('code34531')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div>
<div class="codebody" id="code34531"><script><br>
$(함수 () {<br>
$("#btn").click(함수 () {<br>
//$("#div").hide(2000); //2초 이내에 숨기기<br>
//$("#div").show(2000); //2초 이내에 <br> 표시
//$("#div").fadeIn(2000); //요소가 완전히 표시될 때까지 요소의 불투명도를 높입니다. <br>
//$("#div").fadeOut(2000); //요소가 완전히 사라질 때까지 요소의 불투명도를 줄입니다<br>
$("#btn").toggle(함수 () { <br>
$("div").slideDown(2000); //요소의 높이를 변경하고 위에서 아래로 표시합니다<br>
$(this).val("디스플레이") <br>
}, 함수() {<br>
$("div").slideUp(2000); //요소의 높이를 변경하고 아래에서 위로 짧게 숨깁니다<br>
$(this).val("숨김")<br>
});<br>
});<br>
//$("#btn").click(함수 () {<br>
// $("div").fadeTo(600,0.2); //fadeTo 메소드는 0.6초 이내에 투명도가 0.2<br>일 때 적용 가능합니다.
//});<br>
});<br>
<br>
<br>
<div id="div" 스타일="너비:300px; 높이:300px;" >1234</div><br>
<input type="button" name="name" value="동작 애니메이션" id="btn" /><br>
</본문></div>
<br>
애니메이션 방식
<p><strong>6. 멀티라인 텍스트박스 적용 - 높이 변경<br>
</strong></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="15969" class="copybut" id="copybut15969" onclick="doCopy('code15969')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div>
<div class="codebody" id="code15969"><script src="script/jquery-1.7.1.min.js"></script>
<스타일>
입력:초점,텍스트 영역:초점 {
테두리:1px 솔리드 #f00;
}
$(함수 () {
var 코멘트 = $("#comment");
$(".bigger").click(함수 () {
if (comment.height() < 500) {
comment.height($("#comment").height() 100); //원래 높이를 기준으로 100씩 높이 증가
}
});
$(".smaller").click(함수 () {
if (comment.height() > 100) {
comment.height($("#comment").height() - 100); //원래 높이를 100만큼 줄입니다
}
})
})
<본문>
<스타일>
입력:초점,텍스트 영역:초점 {
테두리:1px 솔리드 #f00;
}
$(함수 () {
var 코멘트 = $("#comment");
$(".bigger").click(함수 () {
if (comment.height() < 500) {
comment.height($("#comment").height() 100); //원래 높이를 기준으로 100씩 높이 증가
}
});
$(".smaller").click(함수 () {
if (comment.height() > 100) {
comment.height($("#comment").height() - 100); //원래 높이를 100만큼 줄입니다
}
})
})
<본문>