이벤트가 무엇입니까?
페이지는 다른 방문자에 대한 응답 사건을했다. 이벤트 처리기 메서드 수단 특정 이벤트가 HTML 호출에 발생하는 때. 종종 (또는 "여기") 일반적으로 사용되는 버튼으로 클릭 () 메소드가 이벤트로 트리거되는 용어 "트리거"를 사용
DOM로드
$ (문서) .ready () 메소드 창로드의 차이 () 메소드
이벤트 바인딩
이벤트 정합 소자 이벤트 핸들러 결합 각 특정 사용할 바인딩 () 메소드. 바인딩 () 메소드 호출 형식 : 바인드 (유형 [데이터, FN )
• 유형 : 하나 이상의 이벤트 유형 문자열 여러 이벤트가 공백으로 구분이 포함되어 있습니다. 이러한 "클릭"또는 "제출"로, 또한 사용자 정의 이벤트의 이름이 될 수 있습니다.
• 데이터는 : 이벤트 객체 추가 데이터 event.data 속성 값으로 전달
• FN : 일치하는 이벤트 핸들러의 각 요소에 상기 바인딩
예 :
//事件绑定
$("#btn1").bind("click",function(){
alert("点我触发bind函数");
})
<button id="btn1">点我触发bind函数</button>JQuery와 방법은 요소가 사용되는 () 메소드 표시인지의 여부를 판정한다 ()는 사용 :
alert($("button").parent().is("body"));
/*
* $("#b1").is(":visible") 判断id为d1的元素是否可见
* 可见返回true，不可见就返回false
*
* next($("#b1").is(":visible"));
*/
alert("#btn2").is(":visible");
$("#btn2").click(function(){
if($("#b1").is(":visible")){
//$(this).next().css();
$(this).next().hide();
}else{
$(this).next().show();
}
})합성 이벤트 -hover ()
호버 () 시뮬레이션 커서 호버링 이벤트. 커서 요소를 통해 이동 될 때이 요소의 밖으로 커서가 지정된 제 기능을 트리거 할 때, 지정된 제 기능을 트리거한다.
호버 () 신택스 구조의 방법 : 호버 ([위에] OUT)
• 이상 : 트리거 기능 요소 위에 마우스
아웃 • : 요소 중 마우스의 기능을 트리거한다
예 :
web前端开发学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
$(function(){
/*
* 合成事件hover()方法的语法结构:
* hover(enter,leave);
*
* */
$("#btn2").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
<button id="btn1">点我触发bind函数</button>
<button id="btn2">隐藏或者显示</button>
<div id="b1" style="display: none;">
<img src="img/log.jpg"/>
</div>합성 이벤트 - 토글 () : 행 마우스 클릭 이벤트를 시뮬레이션하기 위해 사용되는 우선, 최초로 지정된 기능을 트리거 소자 클릭 동일한 요소가 다음 두 번째 지정된 함수를 실행할 때 다시 클릭. 다음 차례 트리거의 마지막까지 더 많은 기능이있는 경우.
$(function(){
/*
* 合成事件toggle()方法的语法结构:
* toggle(f1,f2,f3,f4....);
*
* 有俩个功能:
* 1：模拟连续点击(自动点击，不是你手动点击);
* 2.如果元素本身可见，则会自动隐藏，如果本身是隐藏的，则会自动显示
* */
/* $("#btn1").toggle(function(){
alert("触发toggle函数");
});*/
//带俩个参数的toggle方法
$("#btn1").toggle(function(){
$("#btn1").css("color","turquoise");
//alert("触发toggle函数");
},function(){
//alert("触发toggle2函数")
$("#btn1").css("background-color","deepskyblue");
})
})이벤트 버블 링 :
페이지가 여러 이벤트를 가질 수 있습니다에서 여러 요소 또한 동일한 이벤트에 응답 할 수 있습니다.
페이지, 하나의 다른 요소 내에 중첩, 신체 요소도 클릭 이벤트에 바인딩하는 동안, 이벤트를 클릭 결합되어 있다는 가정에 두 가지 요소가있다.
물집과 같은 계층 구조를 따를 것이다 DOM 이벤트는 상단까지 계속
<style type="text/css">
#body1{
background-color: deepskyblue;
}
#div1{
background-color: white;
}
#span1{
background-color: yellow;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/*
*演示事件冒泡
* 当一个元素的本身和父类都绑定了相同事件时，它本身触发该事件，则父类也会触发该事件
* 解决方法：停止冒泡
* 方法1:本身return false；
* 方法2:stopPropagation(); [event是事件对象]
*/
$("#body1").click(function(){
alert("body的click方法");
})
$("#div1").click(function(){
alert("div的click方法");
})
$("#span1").click(function(){
alert("span的click方法");
// return false;
event.stopPropagation();
})
})
</script>
</head>
<body id="body1">
body
<div id="div1">
div
<span id="span1">
span
</span>
</div>
</body>
</html>
기본 동작을 방지
웹 페이지 요소는 예를 들어, 당신은 하이퍼 링크 이동합니다 클릭하고 양식을 제출 제출 버튼을 클릭, 기본 동작 요소를 방지하기 위해 필요한 경우가, 자신의 기본 동작을합니다.
jQuery에 요소의 기본 동작을 방지하기 위해 preventDefault () 메서드를 제공합니다.
예 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//阻止点击之后跳转
$("#a1").click(function(){
alert("你正在阻止a标签的默认行为");
//return false; //方法一
event.preventDefault(); //方法二
})
/*
* 写一个登录表单，设置如果用户名不满足正则表达式的要求，阻止请求服务
* 正则判断是否满足符合规则
*
*/
$(":submit").click(function(){
var na=$("#na").val();
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
if(!uPattern.test(na)){
alert("你正在阻止a标签的默认行为");
return false;
}
})
})
</script>
</head>
<body>
<a href="http://baidu.com" id="a1">跳转百度</a>
<form action="http://baidu.com" method="post">
用户名<input type="text" id="na"/><br/>
密码<input type="password" id="pa" /><br/>
<button type="submit">登录</button>
</form>
</body>
</html>이벤트 객체의 속성
이벤트 대상 : 트리거 이벤트는, 이벤트 객체가 프로그램에서 이벤트를 사용하여 생성 된 경우에만 함수에 매개 변수를 추가해야합니다.
event.type는 : 이벤트의 형태를 가져옵니다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/*
* 事件对象：对事件对象的常用属性进行封装
* 1.event.type获取事件的类型(也就是事件名称)
* 2\. event.preventDefault(); 阻止默认的事件行为 (在IE中无效)
* 3\. event.stopPropagation() 阻止事件冒泡
* 4.event.target 获取触发事件的元素（获取触发的目标）
* 5.event.pageX / event.pageY 获取事件光标的X和Y的坐标
* 6.event.which 获取鼠标的按键(左键返回1，中键返回2，右键返回3)
*/
$("#a1").click(function(){
//alert(event.pageX+","+event.pageY);
alert(event.which);
return false;
})
})
</script>
</head>
<body>
<a href="http://baidu.com" id="a1">查看事件对象的属性</a>
</body>
</html>이벤트를 제거합니다 :
이벤트를 결합하는 과정에서뿐만 아니라 당신은 또한 여러 요소에 대해 동일한 이벤트를 바인딩 할 수 있습니다, 같은 요소에 대한 여러 이벤트를 바인딩 할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btn1").one("click", function() {
$("#test").append("<p>我的绑定函数1</p>");
}).one("click", function() {
$("#test").append("<p>我的绑定函数2</p>");
}).one("click", function() {
$("#test").append("<p>我的绑定函数3</p>");
})
})
</script>
</head>
<body>
<button id="btn1">绑定函数</button>
<div id="test">
</div>
</body>
</html>한 () 메소드
하나는 () : 핸들러 일단 트리거되면이 방법은 즉 즉시 각 개체 삭제, 엘리먼트의 핸들러에 결합 될 수 있고, 이벤트 핸들러 번만 실행된다 ..
() 및 결합 ()의 차이에
jQuery를 1.7 + 버전에 제공 ()과 해제 () 바인딩 및 이벤트 핸들러를 취소 할 수 있습니다.
이 파라미터의 값을 선택 지원 여부의 차이에있다. 당신은 시간에 사용하는 경우와 바인드 차이가없는 등, 선택기를 설정하지 마십시오.
jQuery를 애니메이션
숨김 및 디스플레이 소자 -show () 메소드 감추기 () 메소드
감추기 () : 없음의 표시 스타일 요소, CSS ( "디스플레이", "없음")와 코드 기능을 변경할 것이다 HTML 문서에서 요소가 감추기를 요구 () 메소드.
() 표시 : 숨겨진 요소 후, 이전 표시 상태에 표시 스타일 소자에 사용되는 쇼 () 메소드 ( "블록"또는 이외에 다른 "NONE"값 "인라인") 일 수있다.
$(function(){
$("div").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
</script>
() 메소드 페이드 인 및 페이드 -fadeIn () 방법 및 페이드 아웃
fadeIn (), 페이드 아웃 ()는 다음 요소가 완전히 소실 될 때까지 만, 일정 시간 내에 소자의 투명도를 감소시킬 것이다) 소자의 투명성 페이드를 (변경 없음 ( "디스플레이 : 없음")., fadeIn ()는 그 반대이다.
그리고 슬라이드 -slideUp () 메소드 및 slideDown () 메소드 아래로 슬라이드
slideDown ()는 slideUp ()는 다음 요소가 표시 속성 () 메소드 slideDown 호출시 중에, 상기 표시 소자는 반대로 slideUp ()에있어서 위에서 아래로 확장하는 것 인 경우, 상기 요소를 요소의 높이를 변경 숨겨진 바닥은-단축.
커스텀 애니메이션 방법 애니메이션 ()
사용 애니메이션 () 사용자 정의 애니메이션, 구문 구조와 방법
애니메이션합니다 (PARAMS [속도], [FN]) • PARAMS 하십시오 애니메이션 속성 집합 및 {속성 1과 같은 스타일 속성 및 값과 최종 값의 집합으로 이루어지는 "VALUE1"property2 "값 2".. }
• 속도 : 속도 세 종류의 미리 정해진 하나의 문자열 ( "느린", "보통" , 또는 "빠른") 하거나 밀리 초 단위로 나타내는 긴 애니메이션 (예 : 1000)
에서 Fn : 기능은 애니메이션의 각 요소에 대해 한 번 실행되고, 완료시 실행
토글 () 메소드
스위칭 소자의 전환 () 메소드는 볼 수있다. 소자는 가시 숨겨진 스위치 인 경우, 상기 요소가 표시되도록 스위칭 될 때 숨겨져 있다면.
토글 ()과 같은 높이, 폭 및 투명 엘리먼트를 변경한다
slideToggle () 방법
slideToggle () 메소드가 그 높이를 조정함으로써 정합 소자의 표시를 전환한다. 이 애니메이션은 요소의 높이를 조정합니다.
fadeTo () 방법
fadeTo () 메소드 (0-1 사이) 지정된 값으로 조정 점근 불투명도 요소 일 수있다. 이 애니메이션은 요소, 변경되지 않는 요소와 일치하는 높이 및 폭의 투명도를 조정한다.
fadeToggle () 메소드
fadeToggle () 메소드는 불투명 전환 매칭 소자의 표시를 변경한다. 이 애니메이션은 요소의 투명도를 조정
애니메이션 방법 설명 :
애니메이션 속성 지정 방법은, 상기 방법의 모든 애니메이션은 애니메이션 내부 호 () 메소드의 본질이다. 또한, 직접 사용 애니메이션 () 메소드는 사용자 정의 다른 스타일 속성, 예를 들어 수 있습니다 : "왼쪽", "marginLeft", "scrollTop"등
신청 양식 :
양식은 세 가지 기본 구성 요소가 있습니다 :
• 양식 레이블 : 서버에 서버와 URL 데이터에 의해 사용 된 절차를 처리 할 양식 데이터를 제출하는 방법을 포함합니다.
• 양식 필드 : 그래서 텍스트 상자, 암호 상자, 멀티 라인 텍스트 박스, 체크 박스, 라디오 버튼, 드롭 다운 선택 상자와 파일 업로드 상자를 포함합니다.
• 폼 버튼 :를 포함하는 데이터를 서버로 전송하기위한 버튼, 리셋 버튼, 및 일반 전송 버튼 또는 다른 정의가 스크립트 처리의 처리를 제어하기 위해 사용될 수있다 전송을 취소.
ATTR ()와 지주 () 메소드의 구분 :
ATTR 반환 값은 소품 반환 값은 true와 false, 중 하나를 선택하거나 정의되어 있지 않습니다.
소품 () ** 결과가 작동 ** :
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是空字符串。** ATTR () 함수 결과 **
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是undefined。HTML과 요소 자체의 고유 한 특성에 대한 때 소품을 사용하는 치료 방법.
HTML DOM는 처리, ATTR 방법을 사용, 우리 자신의 사용자 지정 요소 속성.
참과 거짓 속성) (예 : 선택, 검사 또는 비활성화하여 소품과 같은 두 가지 속성을 가지고 있습니다