JQuery_jquery의 이벤트 및 애니메이션 사용 예

이 문서의 예에서는 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 /> </script>

외부 div

중간 div

내부 div

바이두
<br> 텍스트 영역><br> 본문>

Toggle 이벤트: 마우스 클릭 이벤트를 시뮬레이션합니다. 첫 번째 이벤트는 마우스가 요소 위로 이동할 때 트리거되고 두 번째 이벤트는 마우스가 요소를 떠날 때 트리거됩니다. 두 이벤트는 서로 전환하여 트리거됩니다. 또한 이벤트 버블링도 언급됩니다. 이벤트 버블링은 실제로 간단히 다음과 같이 이해됩니다. 페이지에 여러 이벤트가 있을 수 있거나 여러 요소가 하나의 이벤트에 해당할 수 있습니다. 위와 같이 페이지에 두 개의 요소가 있고 하나의 div 요소가 다른 div 요소에 중첩되어 있고 두 요소 모두에 바인딩된 클릭 이벤트가 있다고 가정합니다. 그런 다음 내부 div 요소를 클릭하면 외부 div도 표시됩니다. 그냥 이벤트가 터지는군요. 여기서 주목해야 할 점은 모두 이벤트에 바인딩되어 있다는 점입니다. 클릭 이벤트만 내부적으로 발생한다고 당연하게 여기기 쉽습니다.

3. 이벤트 제거 및 여러 이벤트 연속 추가

코드 복사 코드는 다음과 같습니다.

<script><br /> $(함수 () {<br /> $("removeall").click(function () { <br /> $("#btn").unbind(); //이벤트 제거<br /> });<br /> $("#btn").bind("click", function () { //여러 개의 이벤트를 연속적으로 추가할 수 있습니다<br /> $("#text").append("<p>처음으로 추가된 이벤트입니다")<br /> })<br /> .bind("클릭", 함수 () {<br /> $("#text").append("<p>두 번째로 추가된 이벤트입니다")<br /> })<br /> .bind("클릭", 함수 () {<br /> $("#text").append("<p>세 번째로 추가된 이벤트입니다")<br /> })<br /> });<br /> </script>

나를 클릭하세요모든 일정 삭제

div 텍스트 정보

본문>

위에서 바인드 이벤트는 이벤트를 추가하는 것이고, 언바인드는 이벤트를 제거하는 것이라고 배웠습니다. 비교해 보면 알겠지만, 여러 이벤트를 연속으로 추가하는 경우는 실제로 이벤트를 추가하고 계속 바인딩하는 경우입니다. 이벤트를 추가하세요.

4. 시뮬레이션 이벤트

우리가 연구한 위 바인드 이벤트, 클릭 이벤트 등은 일반적으로 버튼을 클릭하여 트리거될 수 있는 이벤트입니다. 그러나 때로는 클릭 효과를 얻기 위해 사용자 작업을 시뮬레이션해야 합니다. 입력 및 구매 사용자가 클릭할 필요 없이 나중에 클릭 이벤트가 트리거되면 Trigger() 메서드를 사용하여 시뮬레이션 작업을 완료합니다.

5. 기타 이벤트

코드 복사 코드는 다음과 같습니다.

<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 /> </script>

1234

본문>

애니메이션 방식

6. 멀티라인 텍스트박스 적용 - 높이 변경

코드 복사 코드는 다음과 같습니다.

입력:초점,텍스트 영역:초점 {
테두리:1px 솔리드 #f00;

}
스타일>

$(함수 () {
var 코멘트 = $("#comment");
$(".bigger").click(함수 () {
if (comment.height() comment.height($("#comment").height() 100); //원래 높이를 기준으로 100씩 높이 증가
}
});
$(".smaller").click(함수 () {
if (comment.height() > 100) {
comment.height($("#comment").height() - 100); //원래 높이를 100만큼 줄입니다
}
})
})

확대축소

">해해해해< ;/textarea>

양식>
본문>

위의 작업은 클릭하여 확대하면 텍스트 영역의 높이가 높아지고 영역이 커지는 것을 깨닫습니다. 클릭하여 시간을 줄이면 텍스트 영역의 영역이 작아지는 것, 즉 애니메이션 효과가 발생합니다. 달성.

7. 체크박스 신청

코드 복사 코드는 다음과 같습니다.

$(함수 () {
$("#checkall").bind("클릭", 함수 () {
$(":checkbox").each(함수 () {
$(this).attr("checked", "checked"); //버튼 클릭 시 모든 항목을 선택해야 합니다
});
});
$("#checkno").bind("클릭", 함수 () {
$(":checkbox").attr("checked", false); //버튼 클릭 시 모든 버튼의 체크가 해제되어야 합니다
});
$("#checkRev").bind("클릭", 함수 () {
$(":checkbox").each(함수 () {
if ($(this).attr("checked") == "checked") {
$(this).attr("checked", false);
}
그렇지 않으면 {
$(this).attr("checked", true); //버튼 클릭시 선택된 것은 지워지고, 선택되지 않은 것은 선택됩니다
}
});
});
//또는:
$(this).attr("체크됨", !$(this).attr("체크됨"));
});

가장 좋아하는 스포츠는 무엇인가요?

Football

농구

배구

배드민턴









양식>
본문>

여기서 주목해야 할 점은 체크박스의 선택 여부를 결정하려면 해당 요소의 selected 속성을 제어하여 목적을 달성해야 한다는 것입니다. , 이는 선택되지 않았음을 의미합니다.

8. 드롭다운박스 적용

코드 복사 코드는 다음과 같습니다.

$(함수 () {
$("#add").click(함수 () {
var selectoption = $("#select1 옵션:선택됨");
selectoption.remove();
selectoption.appendTo('#select2'); //선택한 항목을 오른쪽 선택 상자에 추가
});
$("#addAll").bind("클릭",함수 () {
var 옵션 = $("#select1 옵션");
options.appendTo('#select2');
});
});

옵션 1옵션 2옵션 3
옵션 4옵션 5옵션 6
옵션 7옵션 8옵션 9
선택>

오른쪽에 추가
오른쪽에 모두 추가

선택>

위의 작업은 왼쪽에서 선택한 항목을 클릭한 후 오른쪽 상자에 추가하면 됩니다. 하나씩 추가할 수도 있고 한꺼번에 추가할 수도 있습니다.

9. 테이블 적용

코드 복사 코드는 다음과 같습니다.

.심지어 {

}
.이상한 {
배경색: #ffffee;
}
스타일>

$("#table tr:odd").addClass("odd"); //홀수 인덱스가 있는 행 수 선택
$("#table tr:even:not(:first)").addClass("even"); //인덱스 0을 제외한 짝수 행의 개수 선택
$("테이블 tr").each(함수 () {
$(this).click(함수 () {
$(this).css("배경색상","빨간색").siblings().css("배경색상","");
});
})














본체>
테이블>
본문>

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.

이름	성별	임시 거주지
프런트 데스크 디자인 팀
장산	남성	저장성 닝보
lee思	여성	항저우, 절강
프론트엔드 개발팀
왕 우	남성	후난성 창사
Zhao Liu	남성	후난성 창사
백엔드 개발팀
순치	남성	후난성 창사
수요일	남성	후난성 창사