目标:Jquery
一.概述
1.JQuery是什麼
jQuery 是一套相容多浏覽器的 javascript 腳本庫. 核心理念是寫得更少，做得更多.
2.優點
（ 1）提供了強大的功能函數
（ 2）解決浏覽器相容性問題
（ 3）實作豐富的 UI 和插件
（ 4）糾正錯誤的腳本知識
3. 在頁面引入
<script src="js/jquery.js" type="text/javascript" ></script>
二、 jQuery 核心
三、 DOM 對象和 jQuery 包裝集對象
明确 Dom 對象和 jQuery 包裝集的概念, 将極大的加快我們的學習速度。原始的 Dom 對象隻有 DOM 接口提供的方法和屬性，通過 js 代碼擷取的對象都是 dom 對象；而通過 jQuery擷取的對象是 jQuery 包裝集對象，簡稱 jQuery 對象，隻有 jQuery 對象才能使用 jQuery 提供的方法。
1. Dom 對象
2. jQuery 包裝集|對象
3. Dom 轉 jQuery 對象
4. jQuery 對象轉 Dom 對象
四、 jQuery 選擇器
jQuery 選擇器按照功能主要分為"選擇"和"過濾"。 并且是配合使用的，具體分類如下。
基礎選擇器掌握即可 ,其他用到再查閱。
1. 基礎選擇器 Basics（掌握即可）
<script>
// id選擇器
var div1 = $("#div1");
console.log(div1);
//類選擇器
var cls = $(".test");
console.log(cls);
// 元素選擇器
var divs = $("div");
console.log(divs);
// 通用選擇器
var all = $("*");
console.log(all);
// 組合選擇器
var group = $("#div1,span,.test");
console.log(group);
</script>
2. 層次選擇器 Hierarchy
<div id="parent">層次擇器
<div id="child" class="testColor">父選擇器
<div class="gray">子選擇器</div>
<p>PPPPPPPPPP</p>
<img src="http://www.baidu.com/img/bd_logo1.png"
width="270" height="129" />
<img src="http://www.baidu.com/img/bd_logo1.png"
width="270" height="129" />
</div>
<p>這是一個P</p>
<div>
選擇器2<div>選擇器2中的div</div>
</div>
</div>
<script>
// 後代選擇器 ancestor descendant $("#parent div")
var houdai = $("#parent div");
houdai.each(function(){
console.log(this);
});
console.log("==============");
// 子代選擇器 parent > child $("#parent>div")
var zidai = $("#parent > div");
zidai.each(function(){
console.log(this);
});
console.log("==============");
// 相鄰選擇器 prev + next $(".blue + img") 隻會查詢指定元素的下一個指定元素（隻往下找一次元素）
var xl = $("#child + p");
xl.each(function(){
console.log(this);
});
console.log("==============");
// 同輩選擇器 prev ~ sibling $(".blue ~ img")
var tb = $(".gray ~ img");
tb.each(function(){
console.log(this);
});
</script>
3. 表單選擇器Forms
<script type="text/javascript">
// 表單元素：文本框、密碼框、單選框、複選框、檔案域、隐藏域、文本域textarea、下拉框select
// 非表單元素：div、span、p、h1~h6、img、a、table
var inputs = $(":input"); // 表單選擇器，所有表單元素
console.log(inputs.length);
var inputs2 = $("input"); //元素選擇器
console.log(inputs2.length);
</script>
4.過濾選擇器(用于<input>元素)
<script type="text/javascript">
/**
:checked 選擇所有被選中的元素
:eq(index) 比對指定下标的元素 eq=equal
:gt(index) 比對下标大于指定值的所有元素 gt=great than
:odd 選擇每個相隔的（奇數） 元素
:even 選擇每個相隔的（偶數） 元素
*/
var checkboxs = $(":checkbox");
checkboxs.each(function(){
console.log(this);
console.log(this.checked);
});
console.log("==============");
var ckeckeds = $(":checkbox:checked");
ckeckeds.each(function(){
console.log(this);
});
console.log("==============");
var second = $(":checkbox:eq(1)")
second.each(function(){
console.log(this);
});
console.log("==============");
var gtfirst = $(":checkbox:gt(0)")
gtfirst.each(function(){
console.log(this);
});
console.log("==============");
var odds= $(":checkbox:odd")
odds.each(function(){
console.log(this);
});
</script>
五、 jQuery DOM 操作
jQuery 也提供了對 HTML 節點的操作，而且在原生 js 的基礎之上進行了優化，使用起來更加友善。
常用的從幾個方面來操作，查找元素（選擇器已經實作）；建立節點對象；通路和設定節點對象的值，以及屬性；添加節點；删除節點；删除、添加、修改、設定節點的 CSS 樣式；動畫操作等。注意： 以下的操作方式隻适用于 jQuery 對象。
1. 操作元素的屬性
<!--
擷取屬性的值
attr(屬性名稱) 擷取指定的屬性值，操作 checkbox 時選中傳回 checked，沒有選中傳回 undefined。 attr('checked')
attr('name')
prop(屬性名稱) 擷取具有true和false兩個屬性的屬性值 prop('checked')
設定屬性的值
attr(屬性名稱,屬性值);
prop(屬性名稱,屬性值);
移除屬性
removeAttr(屬性名) 移除指定的屬性 removeAttr('checked')
如果屬性的傳回值是true或false（checked、selected、disabled），使用prop()方式；其他屬性使用attr();
-->
2. 操作元素的樣式
<body>
<!--
attr(“class”) 擷取class屬性的值，即樣式名稱
attr(“class”,”樣式名”)
修改class屬性的值，修改樣式
addClass(“樣式名”) 後面添加顯示style:....
添加樣式名稱
css() 添加具體的樣式 後面添加顯示style:....
removeClass(class)
移除樣式名稱
-->
<div id="div1" class="red">我是div1</div>
<div id="div2">我是div2</div>
<div id="div3" class="greenyellow">我是div3</div>
</body>
<script src="js/jquery-1.9.0.min.js"></script>
<script>
/* attr */
// 設定元素的class屬性（如果屬性不存在，則添加屬性）
$("#div2").attr("class","red");
// 如果屬性存在，則修改屬性值
$("#div1").attr("class","dodgerblue");
// addClass() 添加樣式，原來的樣式保留，如果出現相同的樣式，以後面定義樣式為準
$("#div2").addClass("larger");
// css()
// 添加一個具體樣式 css("樣式名","樣式值")
$("#div3").css("background","dodgerblue");
// 同時添加多個具體的樣式名 css({"樣式名":"樣式值","樣式名":"樣式值"})
$("#div3").css({"color":"red","font-family":"楷體"})
//removeClass(class)移除樣式名稱
$("#div2").removeClass();
</script>
3. 操作元素的内容
4. 建立元素
5. 添加元素
6. 删除元素
<script>
// remove()
$("#div1").remove();
// empty()
$("#div2").empty();
</script>
7. 周遊元素
</body>
<!--
each()
$(selector).each(function(index,element)) :周遊元素
參數 function 為周遊時的回調函數，
index 為周遊元素的序列号，從 0 開始。
element是目前的元素，此時是dom元素。
-->
<script>
$(".green").each(function(index,element){
console.log(index);
console.log(this);
console.log(element.innerHTML); //Dom對象取值
console.log($(element).text()); //Jquery對象取值
});
</script>
六、 Jquery 事件
1. ready()加載事件
<!--
1.ready()加載事件
ready()類似于 onLoad()事件
ready()可以寫多個，按順序執行
$(document).ready(function(){})等價于$(function(){})
onload與ready()的差別：
1、ready()在DOM結構解析完畢後即執行
2、onload在DOM結構解析完畢，并且外部資源加載完畢後執行
-->
<script type="text/javascript">
// js的onlooad事件
/*window.onload = function(){
var mydiv = $("#mydiv");
console.log(mydiv);
}*/
// jquery的ready事件
$(document).ready(function(){
var mydiv = $("#mydiv");
console.log(mydiv);
});
$(function(){
var mydiv = $("#mydiv");
console.log(mydiv);
});
</script>
2. bind()綁定元素事件
<body>
<!--button元素，預設是送出按鈕-->
<button type="button" id="btn">按鈕</button>
<input type="text" id="txt" value="Hello Jquery" />
</body>
<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
<!--
1.确定為哪些元素綁定事件
擷取元素
2.綁定什麼事件（事件類型）
第一個參數：事件的類型
3.相應事件觸發的，執行的操作
第二個參數：函數
-->
<script type="text/javascript">
/*綁定簡單事件*/
// js綁定事件
/*document.getElementById("btn").onclick = function(){
alert('這是個按鈕。。。');
};*/
// bind()綁定事件
/*$("#btn").bind("click",function(){
alert('這是個按鈕。。。');
});*/
// 直接綁定事件
$("#btn").click(function(){
alert('這是個按鈕。。。');
});
/*綁定多個事件*/
// 聚焦失焦事件
// 方式一：
$("#txt").focus(function(){
// 聚焦時清空文本框
$("#txt").val("");
}).blur(function(){
$("#txt").val("你好");
});
// 多個事件綁定一種行為
$("#txt").bind("focus blur",function(){
console.log("。。。");
});
$("#txt").bind("focus",function(){
console.log("aaa");
}).bind("blur",function(){
console.log("bbb");
});
$("#txt").bind({
focus:function(){
console.log("鍊式程式設計1");
},
blur:function(){
console.log("鍊式程式設計2");
}
});
</script>