一、簡介
1、什么是jQuery
JavaScript的框架，是一套工具庫。簡化了JavaScript的功能實現。可以使得開發者寫更少的代碼，卻做更多的事-write less do more。
JQuery是一個工具庫，是對JS的代碼進行了一次封裝
JS代碼和JQuery代碼對比：
JS：
通過js來獲取頁面上的一個div:
document.getElementById("d1")
JQuery:
通過JQ來獲取頁面上的一個div:
$("#d1")
2、jQuery功能
jQuery庫包含以下功能：
HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函數
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX
3、安裝
有兩個版本的 jQuery 可供下載：
Production version - 用于實際的網站中，已被精簡和壓縮。 jquery-1.8.3.js
Development version - 用于測試和開發（未壓縮，是可讀的代碼） jquery-1.8.3.min.js
<head>
<script src="jquery-1.10.2.min.js"></script> <!--引用jquery庫-->
</head>
4、初識jQuery
<head>
<title>初識jQuery</title>
<meta charset="utf-8">
<script src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function myclick()
{
$("#pid").hide() //獲取id為pid的標簽，并將其隱藏
}
</script>
</head>
<body>
<p id="pid">做一個決定，并不難，難的是付諸行動，并且堅持到底。</p>
<input type="button" name="" value="點擊" onclick="myclick()">
</body>
二、jQuery選擇器
jQuery 選擇器允許對 HTML 元素組或單個元素進行操作。
jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。
jQuery 中所有選擇器都以美元符號開頭：$()。
1、基本選擇器
1.1 元素選擇器
$("p").hide(); // 所有的p標簽都被隱藏
1.2 #id選擇器
$("#test"); //id值為test的標簽
1.3 .class選擇器
$(".test"); //類名為test的標簽
1.4 *全選擇器
$("*"); //所有的標簽，全文檔
1.5 多選擇器共用
var p = $("p.pc") //p標簽且類名為pc的標簽
var p = $("p#pid") //p標簽且id為pid的標簽
var p = $("div p") //div標簽下的p標簽
var p = $("div,p") //多個標簽同時獲取，用逗號分隔
1.6 jQuery對象與DOM對象區別
DOM獲取元素：
document.getElement...(xxx) //返回DOM對象
jQuery獲取元素：
$("xxx") //返回jQuery對象
都是對一個或多個標簽的封裝，都指向一個或多個標簽，只是支持的功能不一樣，DOM對象和Jquery對象都有各自的方法
jQuery對象與DOM對象相互轉換
DOM --> jQuery
var div = document.getElementById("div_1"); //DOM對象
var div_jq = $(div) //jquery對象
jQuery --> DOM
var div = $(div) //jquery對象
var div = div.get(0) //DOM對象
var div = div[0] //DOM對象
2、層級選擇器
2.1 后代選擇器
$(“selector1 selector2”) 中間有空格
$("div .a"); //選擇所有的div，其中樣式類為a的后代
$("div .a input"); //選擇所有的div，其中樣式類為a的后代，再選擇這些后代的input后代標簽
2.2 父子選擇器
$(“selector1 > selector2”); 中間為大于號
$("span > input"); //所有的span的input子標簽
$("div span>input"); //所有的div下的span的input子標簽
2.3 后續緊鄰兄弟
$(“selector1+selector2”) 中間為加號
$("div+p") ; //緊鄰div的p標簽
$("div+p+input") //緊鄰div的p標簽緊鄰的input標簽
2.4 后續所有兄弟
$(“selector1~selector2”) 中間為破折號
$("div~p") ; //緊鄰div后的所有p標簽
3、基本過濾選擇器
：first 選出匹配到的標簽中的第一個標簽
var p = $("div>b>p:first")
p.hide() //將div下的b標簽下的第一個p標簽隱藏
<div>
<b >
<p id="pid" class="a">1.做一個決定，并不難，難的是付諸行動，并且堅持到底。</p>
<p id="pid2">2.做一個決定，并不難，難的是付諸行動，并且堅持到底。</p>
</b>
</div>
：last 選出匹配到的標簽中的最后一個標簽
$("div>p:last") //div標簽下的所有p標簽中的第一個
：eq(index) 選出對應index索引值的標簽 index從0開始
$("div>p:eq(1)") //div下的所有p標簽中 索引值為1的標簽
：gt(index) 選出索引大于index的元素
$("div>input:gt(1)"); //div下所有input子標簽中索引大于1的
：lt(index) 選出索引小于index的元素
$("div>input:lt(1)");//div下所有input子標簽中索引小于1的
：odd 選出索引值為奇數的元素
$("div>input:odd");//div下所有input子標簽中索引為1,3,5..的
：even 選出索引值為偶數的元素
$("div>input:odd");//div下所有input子標簽中索引為2,4,6..的
：not(selector) 選出selector不能匹配到的元素
$("div>input:not(.a)"); //div下所有input子標簽中樣式類名不是a的
$("#abc>li:not(#a)"); //id為abc的標簽下的li子標簽中id不是a的
$("#abc>li:not(:eq(2))");//id為abc的標簽下的li子標簽中索引不是2的
4、內容過濾選擇器 （了解）
：contains 模糊匹配 (自己含有，或后代含有)
$("div:contains('2')") div或div下內容包括2的標簽
：empty 沒有內容的標簽
$("p:empty") //沒有內容的p標簽
：parent 包含子元素或文本內容
$("p:parent") //有文本內容或子標簽的p標簽
：has(selector) 擁有某種后代的標簽
$("div:has('p')") //有p標簽的div標簽
5、屬性過濾選擇器
$("[name]") 有name屬性的
$("[name='zhj']") name屬性值為zhj的
$("[value='male']") value屬性值為male的
$("[type='text']") type屬性值為text的
$("div[name='abc']"); //div標簽且name為abc
6、可見性過濾選擇器
:visible 可見元素
:hidden 隱藏元素
<script type="text/javascript">
function myclick()
{
$("div p:empty").hide();
console.log($("div p:visible"));
}
</script>
<div>
<p id="pid" class="a">1.做一個決定，并不難，難的是付諸行動，并且堅持到底。</p>
<p id="pid2">2.做一個決定，并不難，難的是付諸行動，并且堅持到底。</p>
<p></p>
</div>
<input type="button" name="" value="點擊" onclick="myclick()">
7、表單選擇器
:input 所有的input元素
:checked 適用于單選按鈕 和 復選框
:selected 適用于下拉框
jQuery對象遍歷
var plist = $(":input");
for(var i = 0; i<plist.size();i++)
{
var pd = plist.get(i); //DOM對象
var pq = plist.eq(i); //jquery對象
console.log($(pd).val());
console.log(pq.val());
}
或者
var ps = $("div p");
ps.each(function(i){ //i為循環變量 0，1，2...
console.log(this) //this為當前遍歷到的每一個DOM對象
});
三、jQuery事件
1、事件注冊的方式
基于標簽：和之前JS中使用方式一致,Jquery未加干涉
基于編程：Jquery提供了全新的API
$(document).ready(function(){
$("#btn_1").click(function(event){
console.log($(this).val()); //this為當前觸發事件的標簽的DOM對象
console.log(this.value);
})
})
Ready事件
等價于onload的作用，用于保證代碼的執行在頁面加載之后
$(document).ready(function(){...});
$(function(){...}) //簡寫
2、jQuery事件函數
鼠標事件
鍵盤事件
表單事件
click()
keypress()
submit()
dblclick()
keydown()
change()
mouseover()
keyup()
focus()
mousemove()
blur()
mouseout()
toggle()
hover()
//toggle開關 示例
$(function(){
$("#btn_1").toggle(function(){
console.log('abc')
$("#pid").hide()
},
function(){
$("#pid").show()
})
})
//hover鼠標復合函數
$(function(){
$("#div_1").hover(function(){ //mouseover時觸發
this.style.backgroundColor = 'blue';
},
function(){ //mouseout時觸發
$(this).css({"background-color":"green"});
})
})
四、jQuery DOM
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。
1、獲取內容
text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值
<script >
$(function(){
$("#btn").click(function(){
var pe = $("div");
var text = pe.text(); //獲得標簽文本內容
console.log(text);
var html = pe.html(); //獲取標簽內容（包括HTML標記）
console.log(html);
console.log($(this).val()); //表單value
$(this).val("不要點我"); //修改value值 -- 通過參數 上同
})
})
</script>
<div>abc
<p id="pid" class="a">
1.做一個決定，并不難，難的是付諸行動，并且堅持到底。
</p>
</div>
<input type="button" value="點我" id="btn">
2、獲取屬性
jQuery attr() 方法用于獲取屬性值。
attr("屬性名") 獲取屬性名
attr("屬性名","屬性值") 設置屬性值
attr({屬性名1:屬性值, 屬性名2:屬性值,...}) 一次設置多個屬性值
removeAttr("屬性名") 刪除標簽的屬性
prop 和attr使用一致，作用一致；但prop在獲取bool類型屬性時(checkd,selected)更友好
$(function(){
$(":input").click(function(){
var attr = $("a").attr("href"); //獲取href屬性值
console.log(attr);
$("a").attr("href","http://www.baidu.com"); //修改href屬性值
})
})
<a style="text-decoration: none" target="_blank">百知教育</a>
<input type="button" value="點我">
3、添加元素
append() - 在被選元素最后一個位置插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之后插入內容
before() - 在被選元素之前插入內容
<script >
$(function(){
$("#btn").click(function(){
$("#div_1").append("<p>通過 jQuery，可以很容易地添加新元素/內容。</p>")
})
})
</script>
<div id="div_1">
abc
</div>
<input type="button" value="添加" id="btn">
4、刪除元素
remove() - 刪除被選元素（及其子元素）
empty() - 清空元素內容
5、jQuery CSS類
addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
通過添加class實現 當點擊button時將div的文本顏色改為blue，字體改為120px。
<!--樣式表-->
<style type="text/css">
.blue{
color: blue;
font-size: 120px;
}
</style>
<!--jquery代碼-->
<script>
$(function(){
$("#btn").click(function(){
$("#div_1").addClass("blue")
})
})
</script>
<!--HTML-->
<div id="div_1">
這是一個文本
</div>
<input type="button" value="添加" id="btn">
6、css( )方法
css() 方法設置或返回被選元素的一個或多個樣式屬性。
css("樣式屬性名") 獲取樣式屬性值
css("樣式屬性名"，"樣式屬性值") 設置樣式屬性值
css({"樣式屬性名1":"樣式屬性值","樣式屬性名2":"樣式屬性值",..}) 設置多個樣式屬性值
$("#div_1").css("color","blue"); //設置css樣式屬性值
console.log($("#div_1").css("color")); //獲取css樣式屬性值
$("#div_1").css({"background-color":"blue","color":"white","font-size":"50px"}); //一次設置多個屬性
補充：
使用 on() 方法添加的事件處理程序適用于當前及未來的元素（比如由腳本創建的新元素）。
$(document).ready(function(){
$("p").on("click",function(){
...
});
$("button").click(function(){
$("<p>This is a new paragraph.</p>").insertAfter("button");
});
});
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
