一 簡(jiǎn)介
jquery 是一個(gè)js類(lèi)庫(kù),其實(shí)就是對(duì)js常用的方法進(jìn)行封裝富拗，方便我們使用。
二 jquery和html的整合
其實(shí)jquery既然是js的類(lèi)庫(kù)，那么我們就可以像導(dǎo)入js一樣導(dǎo)入jquery
注意：jquery是一個(gè)單獨(dú)的js文件朱庆，通過(guò)script標(biāo)簽的src屬性導(dǎo)入即可沙绝。
三 jquery對(duì)象的獲取
語(yǔ)法：$("選擇器") 或者jQuery（“選擇器”）
通過(guò)以上兩種方式都可以獲得jq對(duì)象疏之。
四 dom對(duì)象和jquery對(duì)象之間的相互轉(zhuǎn)換
- dom轉(zhuǎn)jquery：
$("dom對(duì)象") - jquery轉(zhuǎn)dom(參考下面詳細(xì)案例)
1 jquery對(duì)象[index]
2 jquery對(duì)象.get(index)
代碼案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
</head>
<body>
<!--
1 jquery 定義
jquery對(duì)js常用的方法屬性進(jìn)行封裝胆筒，方便我們使用朽色。（幾乎占據(jù)了js的一半）
2 jquery與html 的整合
其實(shí)jquery是一個(gè)獨(dú)立的.js 文件 和導(dǎo)入單獨(dú)的js文件一樣拘悦，通過(guò)Script的src導(dǎo)入即可
3獲取Jquery對(duì)象
$("選擇器") 或者jquery("選擇器");
4 dom和jquery的互相轉(zhuǎn)換
dom裝換為jquery -》 $(dom 對(duì)象)
5 jquery 轉(zhuǎn)dom
兩種方式：
a：jquery對(duì)象[index]
b: jquery對(duì)象.get(index)
-->
username:<input type="text" value ="kate" id="username"/>
</body>
<script>
// jquery 的簡(jiǎn)單引入及其測(cè)試
var $obj = $("#username");
alert($obj.val());
// dom裝換為jquery
var $username = $(document.getElementById("username"));
alert("dom 轉(zhuǎn)jQuery"+$username.val())
// jquery 轉(zhuǎn)dom
// 由于使用的是id選擇器就一個(gè)元素對(duì)象故此處使用[0]
var obj = $username[0];
alert("jquery 轉(zhuǎn)dom 方式1"+obj.value);
var obj2 = $username.get(0);
alert("jquery 轉(zhuǎn)dom 方式2"+obj2.value);
</script>
</html>
五 ：與js相同功能的使用
1 頁(yè)面的加載（onload）
js中：
window.onload=function(){}
jquery中方式1（簡(jiǎn)寫(xiě)齿兔，使用較多）：
$(function(){...})
jquery中方式2（全寫(xiě)）：
$(document).ready(function(){});
js方式與jquery方式的加載有區(qū)別：
js方式只能使用一次window.onload=function(){}，如果你在寫(xiě)了個(gè)onoad后面的會(huì)覆蓋前面的方法础米。然而jquery的都執(zhí)行分苇，不會(huì)覆蓋。
code Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
</head>
<body>
<!--
頁(yè)面的加載：
js方式:
window.onload = function(){}
jquery 方式:
1 簡(jiǎn)寫(xiě)
$(function(){})
2 全寫(xiě)
$(document).ready(function(){});
注意兩種方式的區(qū)別： // onload在一個(gè)頁(yè)面中只能使用一次 出現(xiàn)多次的時(shí)候回覆蓋
jquery 在一個(gè)頁(yè)面中可以使用多次
-->
</body>
<script>
// js方式頁(yè)面加載：
window.onload = function(){
alert("js方式頁(yè)面加載1");
}
// 此處的方法會(huì)覆蓋上面的方法 而使用jQuery就不覆蓋
// window.onload = function(){
// alert("頁(yè)面加載2");
// }
// jquery方式
$(function(){alert("Jquery 方式頁(yè)面加載1")});
$(function(){alert("Jquery 方式頁(yè)面加載2")});
$(function(){alert("Jquery 方式頁(yè)面加載3")});
// 無(wú)論出現(xiàn)幾個(gè)都不會(huì)覆蓋的（此處執(zhí)行了三遍）
</script>
</html>
2 事件的派發(fā)
js的事件派發(fā)：
// dom 方式
dom對(duì)象.onclick=function(){....}
jquery的事件派發(fā);
$("選擇器").click(function(){...});
jq中其他事件：
focus
blur
submit
change
click
補(bǔ)充：$("選擇器").html 往標(biāo)簽提內(nèi)寫(xiě)內(nèi)容
兩者之間的細(xì)小區(qū)別：jquery吧以前的事件的on去掉屁桑，吧函數(shù)作為參數(shù)傳遞就行医寿。
其他事件一樣。
代碼測(cè)試：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
</head>
<body>
<!--
方式j(luò)query 的事件派發(fā) 和dom一樣類(lèi)似
dom 的方式為：
dom對(duì)象.onclick = function(){}
jquery的方式：
jquery對(duì)象.click(function(){})
兩者對(duì)比： 只是jquery吧onclick 的on去掉了就這個(gè)小差別
-->
<input type="button" value="kate" id="btn" />
</body>
<script>
// dom 方式事件派發(fā)
document.getElementById("btn").onclick = function(){
alert("dom 方式的事件派發(fā)");
}
// 方式j(luò)query 事件派發(fā)
$("#b").click(function(){
alert("jquery方式的事件");
})
</script>
</html>
六 jquery中的動(dòng)畫(huà)效果
jquery中效果:(jq對(duì)象調(diào)用即可)
- 隱藏或展示
show(毫秒數(shù)) hide(毫秒數(shù)) - 滑入或滑出
slideDown(毫秒數(shù)):向下滑入
slideUp(毫秒數(shù)):向上滑出 - 淡入或淡出
fadeIn(int):淡入
fadeOut(int):淡出
代碼案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: #FF0000;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
</head>
<body>
<!--
作者：1246771571@qq.com
時(shí)間：2018-11-01
描述：
jquery中效果:
隱藏或展示
show(毫秒數(shù)) hide(毫秒數(shù))
滑入或滑出
slideDown(毫秒數(shù)):向下滑入
slideUp(毫秒數(shù)):向上滑出
淡入或淡出
fadeIn(int):淡入
fadeOut(int):淡出
-->
<input type="button" value="顯示隱藏" id="btn1" />
<input type="button" value="劃入劃出" id="btn2" />
<input type="button" value="淡入淡出" id="btn3" />
<div id="div1"></div><br>
</body>
<script>
// 頁(yè)面加載完成后進(jìn)行事件
$(function(){
// 點(diǎn)擊按鈕 產(chǎn)生事件 顯示隱藏 show（） hide（）
$("#btn1").click(function(){
//隱藏控件 參數(shù)為xxx毫秒內(nèi)完成
//$("#div1").hide(2000);
// 顯示使用show就行
// 可以使用toggle（）方法 點(diǎn)擊顯示 再次點(diǎn)擊就隱藏
$("#div1").toggle(2000);
});
// 劃入劃出事件 slideUp（） slideDown（）
$("#btn2").click(function(){
// 當(dāng)控件處于顯示狀態(tài)時(shí) 你只能使用劃出狀態(tài)（同理不顯示時(shí)可以調(diào)用劃入的方法）
//$("#div1").slideUp(2000);
// 同上特也有SlideToggle（）方法
$("#div1").slideToggle(2000);
});
// 點(diǎn)擊按鈕 div產(chǎn)生淡入淡出事件
$("#btn3").click(function(){
// 使用fadeOut fadeIn了 直接 fadeTaggle（）
$("#div1").fadeToggle(2000);
});
})
</script>
</html>
七 選擇器
1基本選擇器★
$("#id值") id選擇器
$(".class值") 類(lèi)選擇器
$("標(biāo)簽名") 標(biāo)簽選擇器
$("*") 獲取全部元素
$("#id值,.class值") 獲取多個(gè)選擇器
注意：可以通過(guò)jquery對(duì)象.css("屬性","值") 設(shè)置css樣式蘑斧。
了解:$("*")獲取全部元素
所有的元素都獲取例如：$("*").css() 給所有的元素設(shè)置css樣式
理解:獲取多個(gè)選擇器 用逗號(hào)隔開(kāi)
$("#id值,.class值")
選擇符合上面兩種選擇器的元素
代碼demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: #FF0000;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
</head>
<body>
<!--
作者：1246771571@qq.com
時(shí)間：2018-11-01
描述：
1基本選擇器★
$("#id值") $(".class值") $("標(biāo)簽名")
id 類(lèi) 標(biāo)簽選擇器和css的使用類(lèi)似
了解:$("*")獲取全部元素
所有的元素都獲取例如：$("*").css() 給所有的元素設(shè)置css樣式
理解:獲取多個(gè)選擇器 用逗號(hào)隔開(kāi)
$("#id值,.class值")
選擇符合上面兩種選擇器（符合一個(gè)就行）的元素
2
-->
<input type="button" value="id選擇器（類(lèi) 元素不再給出）" id="btn1" />
<input type="button" value="全部選" id="btn2" />
<input type="button" value="多個(gè)" id="btn3" />
<div id="div1"></div><br><br />
<div id="div1",class="class1"></div><br>
</body>
<script>
$(function(){
// 此處介紹個(gè)id選擇 class 元素選擇器和css類(lèi)似就不介紹了靖秩。
$("#btn1").click(function(){
$("#div1").css("background-color","aqua");
});
// 選擇全部元素
$("#btn2").click(function(){
$("*").css("background-color","chartreuse");
});
// 選擇 id為 div1 class 為class1 的
$("#btn3").click(function(){
$("#div1,.class1").css("background-color","crimson");
});
})
</script>
</html>
2 層次選擇器
層次選擇器 ★ 重點(diǎn) 類(lèi)似css的后代選擇器
- a空格b a的所有b后代（a標(biāo)簽下的所有元素）
- a>b a的所有b孩子 （a標(biāo)簽下的所有子元素，孫子元素就不行了不滿足）
- a+b a的下一個(gè)兄弟(大弟弟)
（假如存在標(biāo)簽a嵌套b竖瘾，c標(biāo)簽沟突。b（id為id1），c（id為id2）是并列的捕传，則id1下的id2 可寫(xiě)為$("#id1+#id2")）
<a>
<b id ="id1"></b>
<c id = "id2"></c>
<d></d>
</a>
則id1下的id2 標(biāo)簽（c） 可寫(xiě)為$("#id1+#id2")
- a~b a的所有弟弟
3 基本過(guò)濾選擇器
基本過(guò)濾選擇器:★
:frist 第一個(gè) 例如選擇第一個(gè)為div的: $（"div:first"）
:last 最后一個(gè) $（"div:last"）
:odd 索引奇數(shù) $（"div:odd"）
:even 索引偶數(shù)
:eq(index) 指定索引 $（"div:eq(3)"）
:gt(index) > $（"div:gt(3)"）
:lt(index) < $（"div:lt(3)"）
4 內(nèi)容過(guò)濾
:has("選擇器"):包含指定選擇器的元素
//例如： class元素為mini的div
$("div:has(".mini")")
5 可見(jiàn)過(guò)濾:
:hidden 在頁(yè)面不展示元素 一般指 input type="hidden" 和 樣式中display:none
注意：br換行也是頁(yè)面不展示的
:visible
例如選取所有可見(jiàn)的div:
$("div:visiable")
注意 jquery對(duì)象可以鏈?zhǔn)秸{(diào)用
6屬性過(guò)濾器:★
1 [屬性名]
含有此屬性的元素
例如含有屬性為title的div $("div[title]")
2 [屬性名="值"] 不但含有此元素惠拭，還要有指定的值。
7 表單過(guò)濾:
:input 所有的表單子標(biāo)簽 input select textarea button
八 jq對(duì)屬性和css操作總結(jié)
1 對(duì)屬性的操作:
attr():設(shè)置或者獲取元素的屬性
方式1:獲取
attr("屬性名稱")
方式2:設(shè)置一個(gè)屬性
attr("屬性名稱","值");
方式3:設(shè)置多個(gè)屬性 json
attr({
"屬性1":"值1",
"屬性2":"值2"
})
removeAttr("屬性名稱"):移除指定屬性
//添加class屬性的時(shí)候
// attr("class","值");
addClass("指定的樣式值"); 相當(dāng)于 attr("class","指定的樣式值");
removeClass("指定的樣式值");
2 對(duì)css操作:操作元素的style屬性
css():獲取或者設(shè)置css樣式
方式1:獲取
css("屬性名")
方式2:設(shè)置一個(gè)屬性
css("屬性名","值")
方式3:設(shè)置多個(gè)
css({
"屬性1":"值1",
"屬性2":"值2"
});
3 獲取元素的尺寸:
width()
height()
九 補(bǔ)充
技術(shù):
遍歷數(shù)組
數(shù)組.each(function(){});
$.each(遍歷數(shù)組,function(){});
注意:
each的function中可以加兩個(gè)參數(shù) index和dom
index是當(dāng)前遍歷的索引值
dom指代的是當(dāng)前遍歷的dom對(duì)象(開(kāi)發(fā)中一般使用this即可)
//////////////////////////////
設(shè)置或者獲取value屬性
jquery對(duì)象.val():獲取
jquery對(duì)象.val("...."):設(shè)置
/////////////////////////////////////////
設(shè)置獲取獲取標(biāo)簽體的內(nèi)容
html()
text()
xxxxx():獲取標(biāo)簽體的內(nèi)容
xxxxx("....."):設(shè)置標(biāo)簽體的內(nèi)容
設(shè)置的區(qū)別:
html:會(huì)把字符串解析
text:只做為普通的字符串
獲取的區(qū)別:
html:獲取的html源碼
text:獲取只是頁(yè)面展示的內(nèi)容
//////////////////////////////////////////////
創(chuàng)建一個(gè)元素: $("<標(biāo)簽></標(biāo)簽>")
///////////////////////
文檔操作:
內(nèi)部插入
a.append(c):將c插入到a的內(nèi)部(標(biāo)簽體)后面
a.prepend(c):將c插入到a的內(nèi)部的前面
appendTo
prependTo
外部插入
a.after(c):將c放到a的后面
a.before(c):將c放到a的前面
a.insertAfter(c)
a.insertBefore(c)
刪除
empty() 清空元素
remove() 刪除元素
表單對(duì)象屬性過(guò)濾選擇器
:enabled 可用的
:disabled 不可用
:checked 選中的(針對(duì)于單選框和復(fù)選框的)
:selected 選中的(針對(duì)于下拉選)
十 總結(jié)
后面的幾個(gè)Demo可能不太詳細(xì)庸论，由于我也偷懶职辅，有些看懂了就沒(méi)寫(xiě)，這樣對(duì)于快速的知識(shí)灌輸情況下葡公，記憶周期比較短罐农。好在以后還會(huì)再學(xué)一遍，現(xiàn)在我是在預(yù)習(xí)的條件下寫(xiě)的催什，如有不足，后期學(xué)習(xí)時(shí)會(huì)慢慢完善筆記宰睡。
