web前端入門到實戰：jQuery中的事件、動畫、表單應用
什麼是事件?
頁面對不一樣訪問者的響應叫作事件。事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。在事件中常用術語 " 觸發 " （或 " 激發 " ）經常使用click(）方法觸發javascript
DOM的加載
$(document).ready() 方法與 window.onload () 方法的區別：css
事件綁定
使用bind（）方法爲每一個匹配元素的特定事件綁定事件處理函數。bind() 方法的調用格式： bind(type,[data], fn )html
• type: 含有一個或多個事件類型的字符串，由空格分隔多個事件。好比 "click" 或 "submit" ，還能夠是自定義事件名。
• data: 做爲 event.data 屬性值傳遞給事件對象的額外數據對象
• fn : 綁定到每一個匹配元素的事件上面的處理函數前端
實例：java
//事件綁定
$("#btn1").bind("click",function(){
alert("點我觸發bind函數");
})
<button id="btn1">點我觸發bind函數</button>
使用 jQuery 的 is()方法判斷元素是否可見，使用is()方法: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()web
hover()模擬光標懸停事件. 當光標移動到元素上時, 會觸發指定的第一個函數, 當光標移出這個元素時, 會觸發指定的第二個函數。正則表達式
hover() 方法語法結構爲： hover([over,]out)服務器
• over: 鼠標移到元素上要觸發的函數
• out: 鼠標移出元素要觸發的函數app
實例：
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>
合成事件-toggle(): 用於模擬鼠標連續單擊事件. 第一次單擊元素, 觸發指定的第一個函數, 當再一次單擊同一個元素時, 則觸發指定的第二個函數, 若是有更多個函數, 則依次觸發, 直到最後一個。
$(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");
})
})
事件冒泡：
在頁面上能夠有多個事件，也能夠多個元素響應同一個事件。
假設網頁上有兩個元素，其中一個嵌套在另外一個元素裏，而且都被綁定了 click 事件，同時 body 元素上也綁定了 click事件。
事件會按照 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>
One()方法
one(): 該方法能夠爲元素綁定處理函數. 當處理函數觸發一次後, 當即被刪除. 即在每一個對象上, 事件處理函數只會被執行一次.
on()與bind()的差異
jQuery從1.7+版本開始，提供了on()和off()進行事件處理函數的綁定和取消。
二者的區別就在因而否支持selector這個參數值。若是使用on的時候，不設置selector,那麼on與bind就沒有區別了。
jQuery的動畫
隱藏和顯示元素-show()方法和hide()方法
hide(): 在HTML文檔中，爲一個元素調用hide()方法會將該元素的display樣式改成 none，代碼功能同css("display", "none")。
show(): 把元素隱藏後，可使用show ()方法將元素的 display 樣式改成先前的顯示狀態("block"或"inline"或其餘除了"none"以外的值)。
$(function(){
$("div").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
</script>
淡入和淡出-fadeIn()方法和fadeout()方法
fadeIn(), fadeOut(): 只改變元素的透明度. fadeOut()會在指定的一段時間內下降元素的不透明度,直到元素徹底消失(「display:none」)，fadeIn()則相反。
滑上和滑下-slideUp()方法和slideDown()方法
slideDown()，slideUp():只會改變元素的高度，若是一個元素的display屬性爲 none，當調用slideDown()方法時，這個元素將由上至下延伸顯示，slideUp()方法正好相反，元素由下至上縮短隱藏。
自定義動畫方法animate()
使用animate()方法來自定義動畫，其語法結構爲：
animate(params,[speed],[fn]) •params:一組包含做爲動畫屬性和終值的樣式屬性和及其值的集合，好比{property1:」value1」, property2:」value2」,..}
•speed:三種預約速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
fn:在動畫完成時執行的函數，每一個元素執行一次
toggle()方法
toggle()方法能夠切換元素的可見狀態。若是元素是可見的, 則切換爲隱藏; 若是元素時隱藏的, 則切換爲可見的。
toggle()會同時改變元素的高度、寬度和透明度
slideToggle()方法
slideToggle()方法經過高度變化來切換匹配元素的可見性。這個動畫效果只調整元素的高度。
fadeTo()方法
fadeTo()方法能夠把元素的不透明度以漸近的方式調整到指定的值(0–1之間)。這個動畫只調整元素的不透明度，即匹配的元素的高度和寬度不會發生變化。
fadeToggle()方法
fadeToggle()方法經過不透明度變化來切換匹配元素的可見性。這個動畫效果只調整元素的不透明度
動畫方法說明：
屬性自定義動畫的方法，以上各類動畫方法實質內部都調用了animate()方法。此外，直接使用animate()方法還能自定義其餘的樣式屬性，例如：「left」、」marginLeft」,」scrollTop」等
表單應用：
一個表單有3個基本組成部分：
•表單標籤：包含處理表單數據所用的服務器程序URL以及數據提交到服務器的方法。
•表單域：包含文本框、密碼框、多行文本框、複選框、單選框、下拉選擇框和文件上傳框等。
•表單按鈕：包括提交按鈕、復位按鈕和通常按鈕，用於將數據傳送到服務器上或者取消傳送，還能夠用來控制其餘定義了處理腳本的處理工做。
attr()和prop()方法區別:
attr的返回值要麼是checked要麼是undefined，prop的返回值只有true和false。
prop()**函數的結果**:
1.若是有相應的屬性，返回指定屬性值。 2.若是沒有相應的屬性，返回值是空字符串。
attr**()函數的結果:**
1.若是有相應的屬性，返回指定屬性值。 2.若是沒有相應的屬性，返回值是undefined。
對於HTML元素自己就帶有的固有屬性，在處理時，使用prop方法。
對於HTML元素咱們本身自定義的DOM屬性，在處理時，使用attr方法。
具備 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()
- 1. web前端入門到實戰：CSS3 動畫的實現
- 2. Web前端JQuery入門實戰案例
- 3. web前端入門到實戰：css3 過渡和動畫
- 4. web前端入門到實戰：css3動畫 Transition
- 5. web前端入門到實戰：HTML5表單標籤
- 6. web前端入門到實戰：好用的Js圖表庫
- 7. web前端入門到實戰：JavaScript 事件冒泡與事件委託
- 8. web前端入門到實戰：CSS實現雨滴動畫效果
- 9. web前端入門到實戰：CSS中的cursor屬性
- 10. web前端入門到實戰：CSS3 建立簡單的網頁動畫 – 實現彈跳球動
- 更多相關文章...
- • Redis在Java Web中的應用 - Redis教程
- • jQuery Mobile 表單滑動條 - jQuery Mobile 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。