jQuery是一個快速良蛮、簡潔的JavaScript框架瓮下，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫（或JavaScript框架）。
下載：
jquery官網(wǎng)
一朋鞍、使用Jquery
jquery其實就是一個js文件棋凳，使用它就像我們用一個外部js文件一樣使用即可。一般放在html的head中引入坠陈。
<script src="./libs/jquery-3.1.1.js" type="text/javascript"></script>
二萨惑、Jquery的入口
<script type="text/javascript">
//帶整個文檔加載完畢之后再去執(zhí)行我們傳入的匿名函數(shù)。 document.onload = function () {}
$(document).ready(function () {
//jquery代碼
});
//上面的入口可以簡寫成如下形式,完全與前面的的等價
$(function () {
});
</script>
說明：
- $ 是jquery中的對象仇矾。我們使用jquery的所有操作庸蔼，都是在 $ 的基礎(chǔ)上完成的
- 其實 $ 是 jQuery 對象的簡稱。 $ === jQuery
三贮匕、JQuery對象和DOM對象的轉(zhuǎn)換
DOM對象轉(zhuǎn)換成JQuery對象
** $(domObj)**
JQuery對象用兩種方式轉(zhuǎn)變成DOM對象：
1姐仅、利用數(shù)組下標(biāo)方式(常用)
** JQueryObj[0]**
2、利用get方法：
** JqueryObj.get[0]**
<script type="text/javascript">
$(function () {
var $div = $("#div");//JQuery操作節(jié)點刻盐，得到的是JQuery節(jié)點對象掏膏。Jquery對象一般用$開頭來表示
var div = document.getElementById("div"); //得到的DOM對象
/*
DOM對象轉(zhuǎn)換成JQuery對象
$(domObj)
*/
var $div1 = $(div);
/*
JQuery對象用兩種方式轉(zhuǎn)變成DOM對象：
1、利用數(shù)組下標(biāo)方式
JQueryObj[0]
2敦锌、利用get方法：
JqueryObj.get[0]
*/
var domDiv1 = $div[0];
var domDiv2 = $div.get(0);
});
</script>
四馒疹、JQuery選擇器
1.ID選擇器
<script type="text/javascript">
$(function() {
//通過id找到元素。注意返回的jquery對象
var $box = $("#box");
})
</script>
2.類選擇器
<script type="text/javascript">
$(function() {
var $link = $(".myLink");
console.log($link);
})
</script>
3.標(biāo)簽名選擇器
<script type="text/javascript">
$(function() {
//找到標(biāo)簽名為a的標(biāo)簽
var $a = $('a');
})
</script>
4.群組選擇器(并集)
<script type="text/javascript">
$(function() {
var $elements = $(".box,#toBaidu,h1"); //可以同時選中多個元素.不同的選擇器用,隔開
console.log($elements);
})
</script>
5.后代選擇器
$(function () {
var $as = $("p a"); //找到p標(biāo)簽下的所有a標(biāo)簽
console.log($as);
})
6.通配符選擇器
$(function() {
var $all = $("*"); //獲取當(dāng)前文檔中所有元素的
console.log($all);
alert($all.length);
})
五乙墙、JQuery高級選擇器
1.后代選擇器和find方法
jquery對象.find(選擇器)：是jquery對象的方法颖变，表示找到這個標(biāo)簽下的所有的指定的選擇器的元素生均。
<script type="text/javascript">
$(function () {
var $allLi1 = $(".box li");
console.log($allLi1);
//找到 class是box的元素下面的所有的li標(biāo)簽元素
var $allLi2 = $(".box").find("li"); // 效果等同于前面的后代選擇器。
console.log($allLi2);
})
</script>
2.子元素選擇器和children方法
<script type="text/javascript">
$(function () {
var $divs = $(".box>div"); //子元素選擇器
console.log($divs);
// 找到.box 元素下的所有直接子元素悼做。只找兒子不找孫子疯特。 和子元素選擇器后果一樣。
// children方法也可以帶參數(shù)肛走，代表表示這個選擇器選中的子標(biāo)簽
var $children = $(".box").children();
console.log($children);
var $cc = $(".box").children(".item1");
console.log($cc);
})
</script>
3.Next選擇器( + )和next方法
<script type="text/javascript">
$(function () {
//next選擇器其實就是兄弟選擇器.
//找到.box .item2 后的 是 .item3的緊挨著的下一個兄弟
var $nextDiv1 = $(".box .item2 + .item3");
console.log($nextDiv1);
//同next選擇器. 可以跟參數(shù)漓雅，也可以不跟參數(shù)。有參數(shù) 表示下一個兄弟必須滿足這個條件,否則就拉到
//不跟參數(shù)表示如果有下一個兄弟就返回朽色，沒有拉到
var $nextDiv2 = $(".box .item2").next(".item3");
console.log($nextDiv2);
})
</script>
4.nextAll選擇器( ~ )和nextAll方法
<script type="text/javascript">
$(function () {
//獲取.item2的所有的同輩div標(biāo)簽 注意：不包括.item這個標(biāo)簽
var $divs = $(".item2~div");
console.log($divs);
//也可以使用nextAll方法邻吞，效果同上。 可以不跟參數(shù)葫男，表示后面的所有同輩元素
var $divss = $(".item2").nextAll("div");
console.log($divss);
})
5.prev方法和prevAll方法
<script type="text/javascript">
$(function () {
//找到緊挨著這個的上一個同輩div元素抱冷。 如果不是div則拉到。
//也可以不給參數(shù)梢褐，表示返回上一個同輩元素
var $prev = $(".item2").prev("div");
console.log($prev);
//獲取.item5的所有的前面的同輩div元素旺遮。
var $prevAll = $(".item5").prevAll("div");
console.log($prevAll);
})
</script>
6.sibling方法
<script type="text/javascript">
$(function () {
//sibling獲取的是所有同輩標(biāo)簽
var $sibling = $(".item2").siblings();
console.log($sibling);
})
</script>
7.屬性選擇器
<script type="text/javascript">
$(function () {
// 找到有id屬性的所有元素
var $ids1 = $("[id]");
console.log($ids1);
//找到.box的所有后代中有id屬性的元素
var $ids2 = $(".box [id]");
console.log($ids2);
//找到id等于id的元素
var $ids3 = $("[id=id4]");
console.log($ids3);
//id不是box的都會被選中，沒有id屬性的也算進(jìn)去
var $ids4 = $("[id!=box]");
console.log($ids4)
// id屬性以b開頭的
var $ids5 = $("[id^=b]");
console.log($ids5)
// id屬性的值包含子字符串b的
var $ids6 = $("[id*=b]");
// 包換單詞bb
var boxs = $("[class~=bb]")
console.log($ids6)
})
六盈咳、過濾選擇器
1.基本過濾選擇器
<script type="text/javascript">
$(function() {
//所有的div元素中的第一個div
var $first = $("div:first");
console.log($first);
// 所有div元素中的最后一個div
var $last = $("div:last");
console.log($last);
//所有div元素中耿眉，class不是box的div
console.log($("div:not(.box)"));
// 所有的div元素中，索引是偶數(shù)的div
console.log($("div:even"));
// 所有div元素中鱼响，索引是奇數(shù)的div
console.log($("div:odd"));
// 所有div元素中鸣剪，索引是0的div
console.log($("div:eq(0)")); // equal
// 所有的div元素中，索引大于0的div
console.log($("div:gt(0)")); // great than
//所有的div元素中 索引小于3的div
console.log($("div:lt(3)"));
//獲取所有的標(biāo)題元素 h1 h2 ...
console.log($(":header"));
//獲取當(dāng)前取得焦點的元素
console.log($(":focus"));
})
</script>
2.內(nèi)容過濾選擇器
| 選擇器 | 描述 |
|---|---|
| :contains(text) | 選取含有文本內(nèi)容為text的元素 |
| :empty | 選取不包含子元素或文本的元素 |
| :has(selector) | 選擇與指定的選擇匹配的元素 |
| :parent | 選取含有子元素或文本的元素 |
<script type="text/javascript">
$(function() {
//選取包含文本 "標(biāo)簽" 的div元素丈积。 如果div的子元素滿足筐骇，那么這個div也算。
console.log($("div:contains(標(biāo)簽)"));
//選取江滨，沒有子標(biāo)簽或文本的div元素
console.log($("div:empty"));
//選取有 后代 是.item2的div元素
console.log($("div:has(.item2)"))
// 選取有文本或子元素的所有元素铛纬。 也就是能當(dāng)?shù)脑? console.log($(":parent"));
})
</script>
3.可見性選擇過濾器
| 選擇器 | 描述 |
|---|---|
| :hidden | 選取所有不可見的元素。包括input的type屬性是hidden唬滑，display是none饺鹃。 |
| :visible | 選取所有可見的元素。如果一個元素的visibility是hidden也會被選中间雀。 |
javascript
<script type="text/javascript">
$(function() {
console.log($("div:visible"));
console.log($("div:hidden"));
})
</script>
4.子元素過濾選擇器
| 選擇器 | 描述 |
|---|---|
| :nth-child(index/even/odd/equation) | 匹配其父元素下的第N個子或奇偶元素.這個選擇器和之前說的基礎(chǔ)過濾(Basic Filters)中的 eq() 有些類似,不同的地方就是前者是從0開始,后者是從1開始. |
| :first-child | 相當(dāng)于nth-child(1) |
| :last-child | 返回父元素的第一個子元素 |
| :only-child | 如果父類元素僅僅有一個子元素就返回 |
<script type="text/javascript">
$(function() {
// 從p元素的父元素的所有子元素中查找悔详。如果第2個元素是p，則返回這個p元素惹挟，如果不是p則不返回這個子元素
console.log($("p:nth-child(2)"));
//從p元素的父元素的所有子元素中查找茄螃。如果第一個元素是p則返回這個p元素。否則不返回
console.log($("p:first-child"));
console.log($("p:last-child"));
console.log($("div:only-child"));
});
</script>
七连锯、表單選擇器
? 為了更加方便的操作表單归苍，jquery專門添加的表單選擇器
<script type="text/javascript">
$(function() {
//獲取所有的input用狱、button、select拼弃、textarea
console.log($(":input"));
//選取所有的單行文本框 (type=text)
console.log($(":text"));
console.log($(":password"));
console.log($(":radio"));
console.log($(":checkbox"));
console.log($(":submit"));
console.log($(":button"));
});
</script>
