一.jQury的引入
jQuery的優勢
輕量級
強大的選擇器
出色的DOM操作
可靠的事件處理機制
完善的Ajax
出色的瀏覽器兼容性
鏈式操作方式
豐富的插件支持
完善的文檔
開源
一定要引入jquery文件
在jQuery庫中，$ 就是jQuery的一個簡寫形式
選擇器:類似于css的選擇器(包含css1-css3的選擇器)
//原理采用的是事件監聽機制，不會發生覆蓋
//在運行時間點上，ready方法只要html、css、js文件加載完畢就可以執行，無需等待圖片加載
$(document).ready(function() {
alert("a");
})
//不會出現覆蓋
$(document).ready(function(){
alert("b");
})
//推薦使用，非常簡單
$(function(){
alert("c");
})
jQuery(function(){
alert("d");
})
二.jQuery綁定事件
//需要傳入選擇器
//對照原生事件，jQ里面的事件，不需要使用on開頭
$("#btn").click(function(){
//alert("點擊");
})
$("#div").mouseover(function(){
//alert("移入");
})
//推薦使用以下方法來綁定事件
$("#btn").on("click mouseover",function(ev){
//這里面已經做過兼容，ev可以直接使用
//ev.type 可以區分當前綁定的多個事件
console.log(ev);
//alert("heihei");
})
三、做一個移入移出的案例
$("#div").on("mouseover mouseout", function(ev) {
if(ev.type == "mouseover") {
this.style.backgroundColor = "red";
}
if(ev.type == "mouseout") {
this.style.backgroundColor = "green";
}
})
四、jQ的奇葩方法
//jQ里面除了原有事件之外，還有很多個性化事件
//第一個事件為移入事件，第二個事件為移出事件
$("#div1").hover(function() {
this.style.backgroundColor = "blue";
}, function() {
this.style.backgroundColor = "pink";
})
五、jQ改變和獲取樣式
$("#btn").on("click", function() {
//在jQ里面css方法專門用來操作樣式
?? $("#div1").css({
//不能用分號，用逗號隔開
?? display: "block",
? ?? backgroundColor:"blue",
//可以加雙引號加px，也可以直接寫個值
?? transition:"4s all linear",
? ? height:"400px",
?? width:400,
?});
//animate只針對于值的變化，字符串變化是不可以的
//animate第一個參數為變換的值的集合，第二個參數為變換時間，
//第三個參數為運動軌跡，第四個參數為結束之后執行的回調函數
//jQ的學習成本很低
// 在現有高度的基礎上增加100px
$aaron.animate({
width:"+=100px",
height:"+=100px"
});
$("#div1").animate({
width:400,
height:400,
},2000,"linear",function() {
//變化結束回調的函數
$("#div1").animate({
width:200,
height:200
},2000)
});
//除了給定樣式、修改樣之外之外，還可以獲取樣式，
//因為有良好的兼容性，所以不管是css樣式還是行間樣式，都可以獲取
//alert($("#div1").css("width"));
})
六、jQ奇葩方法2
$("#hide").on("click", function() {
//隱藏hide()
$("#div1").hide();
})
$("#show").on("click", function() {
//顯示show()
$("#div1").show();
})
七、修改元素行間屬性
$("#btn").on("click", function() {
//獲取當前點擊元素的type類型value值
alert($(this).attr("type"));
alert($(this).attr("value"));
//修改有問題,
//如果使用attr修改value值，則value必須先改
$(this).attr({
value: "haha",
type: "text",
name: "btn"http://本來沒有name就是在添加屬性
})
//也可以單獨修改value的值
//$(this).val("哈哈");
})
八、jQ的DOM操作
DOM(Document Object Model-文檔對象模型)：一種與瀏覽器，平臺，語言無關的接口，使用該接口可以輕松地訪問頁面中所有的標準組件
DOM操作的分類：
--DOM Core：DOM Core并不專屬于javascript，任何一種支持DOM的程序設計語言都可以使用它，它的用途并不僅限于處理網頁，也可以用來處理任何一種是用標記語言編寫出來的文檔，例如：XML
--HTML DOM：使用javascript和DOM為html文件編寫腳本時，有許多專屬于HTML DOM的屬性
--CSS? DOM：針對于CSS操作，在javascript中，CSS? DOM主要用于獲取和設置style對象的各種屬性
$("#btn").on("click",function(){
//在jQ中使用DOM創建一個元素，添加到文檔中
//類似于innerHTML
var? div=$("<div><a href="#">我是超鏈接</a></div>")；
div.css({
width:200,
height:200,
backgroundColor:"red"
});
$("#wrap").append(div);
});
九、jQ對象與jS對象互換
//jQuery對象就是通過jQuery($())包裝DOM對象后產生的對象
//jQuery對象是jQuery獨有的，如果一個對象是jQuery對象，那么
//它就可以使用jQuery里的方法：$("#persontab").html()
//jQuery對象無法使用DOM對象的任何方法，同樣DOM對象也不能使用jQuery里的任何方法
//約定：如果獲取的時jQuery對象，那么要在變量前加上$
//jQuery對象是一個數組對象，可以通過index的方法得到對應的DOM對象
//var $cr=$("#div")? ? ? var cr=$cr(0);
//使用jQuery中的get(index)方法得到相應的DOM對象
//var $cr=$("#div")? ? ? var cr=$cr.get(0);
$("#btn").on("click", function() {
//獲取一個jQuery對象
var $btn = $("#btn");
//jQuery對象是一個數組
alert($btn.length);
//可以通過數組下標轉為DOM對象
//由jQuery對象轉換成DOM對象
alert($btn[0].firstChild.nodeValue);
var btn = document.getElementById("btn");
//把DOM對象轉為一個jQuery對象，使用$()進行包裝
alert($(btn).text())
})
//原生
var div=document.getElementById("div1");
alert(div.offsetWidth);
//jQ
var div = $("#div1");
?alert(div.css("width"));
//jq轉原生
alert(div.get(0).offsetWidth);
?var div = document.getElementById("div1");
?//js原生轉jq
?alert($(div).css("width"));
十、jq版tab切換
//依次為按鈕添加點擊事件
$("input").on("click", function() {
//alert($(this).index());
//alert($("input").index($(this)))
var index = $("input").index($(this));
//把animate改成css就是tab切換
//用animate就是大圖滾動
$("#middle").animate({
//方法一：
//left: -index * $("#wrap").width()
//方法二：
//left:-index*parseInt($("#wrap").css("width"))
//方法三：
left: -index * $("#wrap").get(0).offsetWidth
},1500)
})
十一、jQ版全選反選
$("#All").on("click", function() {
$.each($(".box"), function(index, el) {
el.checked = "true"
})
})
$("#Else").on("click", function() {
$.each($(".box"), function(index, el) {
el.checked = !el.checked
});
})
十二、each版tab切換
//第一種
$.each($("input"), function(index, el) {
? ?? el.onclick = function() {
? ?? //animate換成css就是tab切換
? ? $("#middle").animate({
? ? left: -index * $("#wrap").width(),
? ? }, 1000)
?? }
?});
//第二種
$.each($("input"), function(index, el) {
??? $(el).on("click", function() {
?? $("#middle").animate({
?? left: -index * $("#wrap").width(),
?? }, 1000)
? })
});
十三、小練習
//點擊p節點，彈出對應的文本內容，并且設置文本內容
//jQuery對象可以進行隱式迭代：$("p").on("click",function? () {
}表示為選取的所有的p節點都添加了click響應函數。jquery對象本身就是一個DOM對象的數組
$("p").on("click",function? () {
//在響應函數中，this是DOM對象，若想要使用jQuery對象的方法需要用$()把this包裝起來
//alert(this.firstChild.nodeValue)
//alert($(this).text())
$(this).text("^^"+$(this).text())
//text()方法：不加參數表示讀取文本值，加上參數表示為屬性節點添加文本值（文本節點）
})
十四、小練習
//點擊按鈕彈出checkbox被選中的個數
<input type="button" id="btn" value="選中的個數">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
//js代碼
<script type="text/javascript">
$("#btn").on("click",function(){
alert($(":checkbox:checked").length)
})
</script>
