JQuery —— 一個js函數包
一、選擇器
1、基本選擇器
①id選擇器：# ②class選擇器：. ③標簽名選擇：標簽名
④並列選擇：用，隔開 ⑤後代選擇：用空格隔開
代碼用法展示：
<title></title>
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="div1">
<a>aaaaa</a> <%--a標記--%>
</div>
<div id="div2"></div>
<div class="div"></div>
<div></div>
</form>
</body>
</html>
<%-- $ JQuery標志性符--%>
<script type="text/javascript" >
$("#div1").css("background-color", "red"); //id選擇,$("#div1")相當於js中docunment.getElementById("div1"),下面其他類似
$(".div2").css("background-color", "red"); //class選擇
$("div").css("background-color", "red"); //標簽選擇
$("#div1,#div2").css("background-color", "red"); //並列選擇，用逗號隔開
$("#div1 a").css("background-color", "red"); //後代選擇，用空格隔開
</script>
基本選擇器
2、過濾選擇器
（1）、基本過濾
①首個：:first ②尾個：:last ③任意個：:eq(索引號) ④大於：:gt(索引號)
⑤小於：:lt(索引號) ⑥排除：:not(選擇器) ⑦奇數：odd ⑧偶數：even
（2）、屬性過濾
①屬性名過濾：[屬性名]
②屬性值過濾：[屬性名=屬性值]或[屬性名！=屬性值]
（3）、內容過濾
①文字過濾：:contains(“字符串”)
②子元素過濾：:has(選擇器)
代碼用法展示：
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="div">aaa</div>
<div class="div">bbb</div>
<div class="div" hehe="aaa" he="aaa"><a></a></div>
<div class="div" hehe="bbb">bbb</div>
<div class="div">aaa</div>
<div class="div"><a></a></div>
</form>
</body>
</html>
<script type="text/javascript" >
//基本過濾
$(".div:first").css("background-color", "red"); //取首個
$(".div:last").css("background-color", "red"); //取最後一個
$(".div:eq(2)").css("background-color", "red"); //取任意個， :eq(索引號) 或者$(".div").eq(2).css("background-color", "red");——重點
$(".div:gt(2)").css("background-color", "red"); //:gt(索引號)，取大於該索引號的
$(".div:lt(2)").css("background-color", "red"); //:lt(索引號)，取小於該索引號的
$(".div:not(.div:eq(2))").css("background-color", "red"); //:not(“選擇器”)，排除這一個，選剩余的
$(".div:odd").css("background-color", "red"); //:odd，選索引為奇數的
$(".div:even").css("background-color", "red"); //:even，選索引為偶數的
//屬性過濾
$(".div[he]").css("background-color", "red"); //[屬性名]，選有該屬性名的
$(".div[hehe=aaa]").css("background-color", "red"); //[屬性名=屬性值]，選有該屬性名且是此屬性值的
$(".div[hehe!=bbb]").css("background-color", "red"); //[屬性名！=屬性值]，選有該屬性名的且屬性值不是此的
//內容過濾
$(".div:contains('a')").css("background-color", "red"); //:contains('字符串')，選取包含該字符串的——根據文字
$(".div:has(a)").css("background-color", "red"); //:has(“選擇器”)，選取包含該選擇器的——根據選擇器
</script>
過濾選擇器
二、事件
1、常規事件——把js事件前面的on去掉
比如：js：onclick——JQuery：click
2、復合事件
①houver(function(){},functiaon(){})——相當於把mouseover()mouseout()合二為一
②toggle(function(){},function(){},....)——點擊事件循環執行，具體看下面的代碼用法展示
代碼用法展示：
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="div">aaa</div>
<div class="div">bbb</div>
<div class="div"><a></a></div>
<div class="div">bbb</div>
<div class="div">aaa</div>
<div class="div"><a></a></div>
</form>
</body>
</html>
<script type="text/javascript" >
//單擊事件
$(".div").click(function () {
alert('aaa');
});
//雙擊事件
$(".div").dblclick(function () {
alert('aaa');
});
//復合事件hover——相當於把mouseover()mouseout()合二為一
$(".div").hover(function () {
$(this).css("background-color","red");
}, function () {
$(this).css("background-color", "blue");
});
//復合事件toggle——點擊事件循環執行，下面代碼中即點擊div，循環為div更換背景色
$(".div").toggle(function () {
$(this).css("background-color", "red");
}, function () {
$(this).css("background-color", "yellow");
}, function () {
$(this).css("background-color", "blue");
}, function () {
$(this).css("background-color", "green");
}, function () {
$(this).css("background-color", "orange");
});
</script>
常規和復合事件
3、事件冒泡（冒泡事件）——冒泡部分轉載自：http://www.cnblogs.com/jiqing9006/archive/2012/09/11/2679831.html
冒泡事件就是點擊子節點，會向上觸發父節點，祖先節點的點擊事件。
解析：下面是html代碼部分：
<body>
<div id="content">
外層div元素
<span>內層span元素</span>
外層div元素
</div>
<div id="msg"></div>
</body>
對應的jQuery代碼如下：
<script type="text/javascript">
$(function(){
// 為span元素綁定click事件
$('span').bind("click",function(){
var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";//獲取html信息
$('#msg').html(txt);// 設置html信息
});
// 為div元素綁定click事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";
$('#msg').html(txt);
});
// 為body元素綁定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被點擊.<p/>";
$('#msg').html(txt);
});
})
</script>
冒泡Jquery
當點擊span時，會觸發div與body 的點擊事件。點擊div時會觸發body的點擊事件。
如何防止這種冒泡事件發生呢？
修改如下：
<script type="text/javascript">
$(function(){
// 為span元素綁定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
// 為div元素綁定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
// 為body元素綁定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被點擊.<p/>";
$('#msg').html(txt);
});
})
</script>
阻止冒泡一
event.stopPropagation(); // 阻止事件冒泡
或者通過return false來處理。
<script type="text/javascript">
$(function(){
// 為span元素綁定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";
$('#msg').html(txt);
return false;
});
// 為div元素綁定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";
$('#msg').html(txt);
return false;
});
// 為body元素綁定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被點擊.<p/>";
$('#msg').html(txt);
});
})
</script>
阻止冒泡二
三、DOM操作
1、操作內容
①表單元素：取值：var s=$(“選擇器”).val()
賦值：$(“選擇器”).val(“值”)
②非標單元素：取值：var s=$(“選擇器”).text(“內容”) var s=$(“選擇器”).text(“內容”)
賦值：$(“選擇器”).text(“內容”) $(“選擇器”).html(“內容”)
代碼用法展示：
<script type ="text/javascript" >
//$(document).ready相當於js中的window.onload
$(document).ready(function () {
$("#a").click(function () {
$(this).text("bbbb");//改變a標記的顯示內容
})
$("#btn1").click(function () {
$("#txt").val("aaaaaa");//改變文本框的顯示內容
$(this).val("bbbb");//改變按鈕的顯示內容
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<%--操作內容 start--%>
<a id="a">aaaaa</a>
<input type ="text" id="txt" />
<input type ="button" id="btn1" value ="btn1" />
<%--操作內容 end--%>
</form>
</body>
操作內容
2、操作屬性
①獲取屬性：var s=$(“選擇器”).attr(“屬性名”)
②設置屬性：$(“選擇器”).attr(“屬性名”,”屬性值”)
③更改屬性：$(“選擇器”).attr(“屬性名”,”屬性值”)
④刪除屬性：$(“選擇器”).removeAttr(“屬性名”)
代碼用法展示：
<style type="text/css" >
.aaa {
border :5px solid red;
}
.bbb {
border :10px solid blue;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<%--操作屬性 start--%>
<input type ="text" id="txt1" />
<input type ="button" id="btn1" value ="btn1" />
<input type ="button" id="btn2" value ="btn2" />
<input type ="button" id="btn3" value ="btn3" />
<%--操作屬性 end--%>
</form>
</body>
</html>
<script type ="text/javascript" >
$("#btn1").click(function () {
$("#txt1").attr("disabled", "disabled");//點擊btn1按鈕，給文本框設置不可用屬性和class
$("#txt1").attr("class", "aaa");
});
$("#btn2").click(function () {
$("#txt1").removeAttr("disabled").attr("class","bbb");//點擊btn2按鈕，刪除文本框不可用屬性,並且更改class屬性
});
$("#btn3").click(function () {
var aa = $("#txt1").attr("class");//點擊btn3按鈕，獲取文本框的class屬性，然後alert彈出看看
alert(aa);
});
</script>
操作屬性
3、操作樣式（一般用操作屬性就可以）
①操作內聯樣式：獲取樣式：var s=$(“選擇器”).css(“樣式名”)
設置樣式：$(“選擇器”).css(“樣式名”,”值”)、
$("#btn1").click(function () {
$("#txt1").css("border", " 5px solid red");});
②操作樣式表的class：添加class：$(“選擇器”).addClass(“class名”)
移除class：$(“選擇器”).removeClass(“class名”)
添加移除交替class：$(“選擇器”).toggleClass(“class名”)
4、操作相關元素
①查找：父輩、前輩：parent() parents(“選擇器”)
子代、後代：children(“選擇器”) find(“選擇器”)
兄弟：哥哥：prev() prevAll(“選擇器”)
弟弟：next() next All(“選擇器”)
用法代碼展示：
<script src="js/jquery-1.7.2.min.js"></script>
<style type="text/css" >
#div1 {
width :400px;
height :400px;
background-color :red;
}
#div2 {
width :300px;
height :300px;
background-color :yellow;
}
#div3 {
width :200px;
height :200px;
background-color :blue;
}
#div4 {
width :100px;
height :100px;
background-color :green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4"></div>
</div>
</div>
</div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
</form>
</body>
</html>
<script type="text/javascript" >
$("#div4").click(function () {
var p = $(this).parent();//查找div4的父級
var p = $(this).parent().parent();//查找div4的父級的父級
var p = $(this).parents("#div2");//若知道前輩的id或name，可以用parents("選擇器")
});
$("#div1").click(function () {
var p = $(this).children("#div2");//查找div1的子級，children("#div3")是找不出來的，div3是div1子集的子集
var p = $(this).find("#div3");//查找div1的後代div3
});
//div1、div5、div6、div7平級
$("#div1").click(function () {
var p = $(this).next();//查找div1的弟弟，可以next().next()
var p = $(this).nextAll("#div6");//nextAll("選擇器")，前提知道需要查找的弟弟的選擇器
});
$("#div7").click(function () {
var p = $(this).prev();//查找div1的哥哥，可以prev().prev()
var p = $(this).prevAll("#div6");//prevtAll("選擇器")，前提知道需要查找的哥哥的選擇器
});
</script>
查找
②操作：新建：$(“html字符串”)
添加：appen(jquery對象或字符串)——某個元素內部添加
after(…)——下部平級添加
before(…)——上部平級添加
移除：empty()——清空內部全部元素
remove()——清空元素
復制：clone()
代碼用法展示：例子：模仿制作一個微博或者其他的評論頁面
<script src="js/jquery-1.7.2.min.js"></script>
<style type="text/css" >
#div1 {
width :400px;
height :400px;
background-color :red;
}
#div2 {
width :300px;
height :300px;
background-color :yellow;
}
#div3 {
width :200px;
height :200px;
background-color :blue;
}
#div4 {
width :100px;
height :100px;
background-color :green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4"></div>
</div>
</div>
</div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
</form>
</body>
</html>
<script type="text/javascript" >
$("#div4").click(function () {
var p = $(this).parent();//查找div4的父級
var p = $(this).parent().parent();//查找div4的父級的父級
var p = $(this).parents("#div2");//若知道前輩的id或name，可以用parents("選擇器")
});
$("#div1").click(function () {
var p = $(this).children("#div2");//查找div1的子級，children("#div3")是找不出來的，div3是div1子集的子集
var p = $(this).find("#div3");//查找div1的後代div3
});
//div1、div5、div6、div7平級
$("#div1").click(function () {
var p = $(this).next();//查找div1的弟弟，可以next().next()
var p = $(this).nextAll("#div6");//nextAll("選擇器")，前提知道需要查找的弟弟的選擇器
});
$("#div7").click(function () {
var p = $(this).prev();//查找div1的哥哥，可以prev().prev()
var p = $(this).prevAll("#div6");//prevtAll("選擇器")，前提知道需要查找的哥哥的選擇器
});
</script>
css
前台代碼：
總代碼 <title></title>
<script src="js/jquery-1.7.2.min.js"></script>
<link href="css/css7.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div id="boss">
<div id="top">
<textarea id="txt1"></textarea>
<input type="button" id="btn1" value="提交" />
</div>
<div id="bottom">
<%--評論div start--%>
<div class="item">
<div class="item_top">aaaaaaaa</div>
<div class="item_txt">
aaaaaaa
</div>
<div class="item_bottom">
1999-1-1
<input type="button" class="btn_del" value="刪除" />
</div>
</div>
<%--評論div end--%>
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$("#btn1").click(function () {
var oTxt = $("#txt1").val();//取文本框的內容
var aaa = "<div class=\"item\">";
aaa += "<div class=\"item_top\">aaaaaaaa</div><div class=\"item_txt\">";
aaa += oTxt;
aaa += "</div><div class=\"item_bottom\">";
aaa += "1999-1-1 <input type=\"button\" value=\"刪除\" class=\"btn_del\" /></div></div>";//拼接評論div的字符串
//判斷是否已有評論
if ($(".item").length <= 0) {
$("#bottom").append(aaa);//若沒有，直接在 $("#bottom")內部添加一個
}
else {
$(".item").eq(0).before(aaa);//若有，從索引為0的一個，上部平級添加
//$(".item").eq(0).after(aaa);//若有，從索引為0的一個，下部平級添加
}
});
//live()——未來事件，即給還沒有出現但一定會出現的元素添加事件，只要這個class是.btn_del的元素出現，就會綁上這個事件
$(".btn_del").live("click", function () {
$(this).parent().parent().remove();
});
</script>
