一：jQuery簡介
jQuery是一個JavaScript庫，$就是jQuery的一個簡寫形式。
eg:$(“#foo”)和jQuery(“#foo”)是等價的；$.ajax和jQuery.ajax是等價的。
二：DOM對象與jQuery對象
DOM對象與jQuery對象：
通過JavaScript中的getElementsByName、getElementById等方法獲取元素節點，得到的就是DOM對象。
jQuery對象就是通過jQuery包裝DOM對象後產生的對象。
DOM對象與jQuery對象的相互轉換：
一個約定：如果獲取的對象是jQuery對象，那麼在變量前面加上$，例如：
var $variable = jQuery對象。
如果獲取的是DOM對象，則定義如下：
var variable=DOM對象
1.DOM對象轉換成jQuery對象
對於一個DOM對象，只要用$( )把DOM對象包裝起來，就可以獲得一個jQuery對象了。即：$(DOM對象)。
2. jQuery對象轉換成DOM對象
方式一：
由於jQuery對象是一個類似數組的對象，可以通 過[index]的方法得到相應的DOM對象。eg:
var $a = $(“#a”);
var a=$a[0];
方式二：
通過jQuery對象本身提供的get(index)方法。eg:
var $a=$(“#a”);
var a=$a.get(0);
三：$(document).ready(function(){})
在jQuery中，通過使用：
$(document).ready(function(){
// DOM結構繪製完畢後執行此處代碼
});
可以編寫DOM結構繪製完畢後執行的代碼
該結構也可簡寫成：
$(function(){
// DOM結構繪製完畢後執行此處代碼
});
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一個jQuery網頁</title>
<!--引入jQuery庫-->
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
alert("hello,歡迎學習jQuery!");
});
</script>
</head>
<body>
</body>
</html>運行結果圖：
四：jQuery選擇器
(1)id選擇器 $(#ID名稱)
eg:
$( "#myDiv").css( "border", "3px solid red" );
此代碼對應JavaScript的： document.getElementById(" myDiv ").style.border='3px solid red';
(2)通用選擇器 $("*" )
(3)類選擇器 $(".class")
(4).複選框選擇器 $(":checkbox" )
(5)後代選擇器 $( "ancestor descendant" )
(6)子選擇器 $("parent > child" )
(7)多元素選擇器 $( "selector1, selector2, selectorN" )
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery選擇器</title>
<style type="text/css">
.divclass{
width:200px;
height:200px;
background-color: yellow;
}
</style>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
/**
$("#btn").click(function(){
$("#mydiv").css("background-color","red");
});
**/
$("*").css("background-color","#FAEBD7");
$("#btn").bind("click",function(){
$("#mydiv").css("background-color","#aabbcc");
});
$("#btn2").click(function(){
$(".divclass").css("background-color","red");
});
});
</script>
</head>
<body>
<div id="mydiv" class="divclass"></div>
<input type="button" value="ID點擊變色" id="btn"/> <br/><br/>
<input type="button" value="class點擊變色" id="btn2">
<div class="divclass"></div>
</body>
</html>運行結果圖：
五：事件冒泡
當在有包含關係的DOM層級上綁定事件時，事件會按照DOM層級結構順序從內到外依次觸發,這就是“事件冒泡”。
停止事件冒泡的方法：
在事件處理函數中加上event事件對象，調用event事件對象的stopPropagation()方法。
補充：阻止默認行爲也是用event事件對象：
event.preventDefault();
eg1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style type="text/css">
#parentDiv{
width:400px;
height:400px;
background-color:#7FFF00;
}
#childDiv{
width:200px;
height:200px;
background-color:yellow;
margin:50px auto;
}
</style>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
$("#parentDiv").bind("click",function(){
alert("parentDiv被點擊了");
});
$("#childDiv").bind("click",function(event){
alert("childDiv被點擊了");
event.stopPropagation(); // 停止事件冒泡
});
$("body").bind("click",function(){
alert("body被點擊了");
});
});
</script>
</head>
<body>
<div id="parentDiv">
這是parentDiv裏的內容
<div id="childDiv">
這是childDiv裏的內容
</div>
這是parentDiv裏的內容
</div>
</body>
</html>運行結果圖：
eg2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默認行爲</title>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
$("#registerForm").bind("submit",function(event){
var username=$("#uname").val();
var password=$("#upwd").val();
if(username==""){
alert("用戶名不能爲空！");
event.preventDefault(); // 阻止提交表單的默認行爲
}
if(password.length<6){
alert("密碼不能小於6位！");
event.preventDefault(); // 阻止提交表單的默認行爲
}
});
});
</script>
</head>
<body>
<form action="serverURL" method="post" id="registerForm">
註冊用戶名：<input type="text" name="uname" placeholder="請輸入用戶名" id="uname"/>
<br/> <br/>
註冊密碼：<input type="password" name="pwd" placeholder="請輸入密碼" id="upwd">
<br/> <br/>
<input type="submit" value="註冊"/> <input type="reset" value="重置"/>
</form>
</body>
</html>運行結果圖：
