1笔链，jquery 定義
jquery 是一個快速舰蟆，小巧且功能豐富的JavaScript庫趣惠，可以跨多種瀏覽器工作，
本質(zhì)：就是封裝了很多方法的 js 庫
2身害，如何使用 jquery
1, 第一步引入
2味悄，寫入口函數(shù)（防止頁面標簽還沒有被渲染出來，入口函數(shù)就已經(jīng)執(zhí)行了）- 請看下面入口函數(shù)詳情
3塌鸯，找到要操作元素（jquery 選擇器）侍瑟，去操作他（給他設(shè)置屬性，樣式丙猬，文本等等）
$(document).ready(function(){
$('div').width(100).height(100).css('color','red').text('我是輸出的文本')
})
3涨颜，jquery 版本介紹
1，1.xx 版本1. 多是 支持老瀏覽器茧球，比如 IE678庭瑰， 已停止更新
2，2.xx 版本2. 多是 不支持老瀏覽器抢埋， 已停止更新
3弹灭，3.xx 版本3. 多是 不支持老瀏覽器，更新中
4，jquery 的入口函數(shù)
1，jquery 的入口函數(shù)兩種書寫方式
// 第一種
$(document).ready(function(){
})
// 第二種 更常用
$(function(){
})
2鳞绕，jquery 與 原生 js 的入口函數(shù)區(qū)別
1，原生 js 入口函數(shù)不能寫多個捡鱼，但是 jquery 可以寫多個
2，原生 js 入口函數(shù)執(zhí)行在后肪凛，jquery 入口函數(shù)執(zhí)行在前
* 原生 js 要等待頁面上所有的資源（dom樹堰汉，外部css，js鏈接等）都加載完畢后伟墙，執(zhí)行
* jquery 等待頁面上 dom 樹加載完畢后執(zhí)行
5翘鸭，$ 解釋
1，$ 是一個自執(zhí)行函數(shù)
1戳葵，引入一個js文件就乓，是會執(zhí)行js文件中的代碼
2，jquery 文件是一個自執(zhí)行函數(shù)，執(zhí)行還這個jquery文件中的代碼生蚁，其實就是執(zhí)行這個自執(zhí)行函數(shù)
3噩翠，這個自執(zhí)行文件就是給window對象添加一個 jquery 屬性和 $ 屬性
4，$ = jquery邦投，是等價的伤锚，是一個函數(shù)
2，$ 是一個函數(shù)志衣，參數(shù)不同屯援，效果不同
1，參數(shù)是一個匿名函數(shù) — 入口函數(shù)
$(function(){
})
2念脯，參數(shù)是一個字符串 — 選擇器
$(‘# divOne’)
3狞洋，參數(shù)是一個標簽 —— 創(chuàng)建一個標簽
$(‘<div>我是創(chuàng)建的標簽</div>’)
4，參數(shù)是一個 dom 對象 — 就會把dom對象轉(zhuǎn)換成 jquery 對象(詳情請看下面 5)
6绿店，dom 對象與jquery對象區(qū)別
1吉懊，區(qū)別
* dom 對象：原生js選擇器獲取到的對象，只能調(diào)用dom方法假勿，
* jquery對象：用jquery選擇器獲取的對象借嗽，只能用jquery對象的屬性和方法
jquery對象是一個偽數(shù)組（有下標，有l(wèi)ength）废登；jquery對象其實就是dom對象的一個包裝集
2淹魄，案例
// js - dom
var idValue = document.getElementById('idValue')
idValue.style.width = '600px'
// jquery
$('idValue').css('width','600px')
3郁惜，互相轉(zhuǎn)換
a堡距，dom對象轉(zhuǎn)換成 jquery 對象
var idValue = document.getElementById('idValue')
var $idValue = $(idValue) // 轉(zhuǎn)換成了jquery對象
b， jquery 對象轉(zhuǎn)換成 dom對象
var $divs = $('div')
方法一：使用下標取出來
var div1 = $divs[0] // jquery 對象轉(zhuǎn)換成 dom對象
方法二：使用jquery的方法兆蕉，get（）
var div2 = $divs.get(1) // 轉(zhuǎn)換成功
7羽戒，jquery 選擇器
1，基本選擇器
ID 選擇器 ： $('#id') 獲取指定id的元素
類選擇器： $('.class') 獲取同一類class的元素
標簽選擇器： $('div') 獲取同一類標簽的所有div
并集選擇器： $('div,p,li') 使用逗號分隔虎韵，只要符合條件之一就可
交集選擇器： $('div.redClass') 獲取class為redClass的div元素
注：跟class選擇器用法一樣
2易稠，層次選擇器
自帶選擇器 $('ul > li') 使用 大于號，獲取兒子層級的元素包蓝，注意驶社，并不會獲取子孫層級的元素
后代選擇器 $('ul li') 使用空格，代表后代選擇器测萎，獲取ul下所有l(wèi)i元素亡电，包括子孫等
`注：這里不可以使用并集選擇器，可以直接改為
$('ul > li, ul > p') // 獲取ul下面所有的li標簽硅瞧，與ul下面是所有p標簽
$('ul > li, p') // 獲取ul下面所有的li標簽份乒，與頁面中所有的p標簽
$('#divValue div') // 獲取id為divValue 這個div所有的后代div
3，過濾選擇器
這類選擇器都帶冒號
:eq(index) $('li > :eq(2)').css('color','red') 獲取到的li元素中，選擇索引值為2的元素或辖，顏色變?yōu)榧t色瘾英；index是索引值
:odd $('div:odd').css('color','red') // 設(shè)置所有div為奇數(shù)行的字體顏色為紅色
:even $('div:even').css('color','red') // 設(shè)置所有div為偶數(shù)行的字體顏色為紅色
8，jquery 其他選擇器
children(selector) $('ul').children('li') 相當于$('ul-li')颂暇，子類選擇器
find(selector) $('ul').find('li') 相當于$('ul li')缺谴，后代選擇器
siblings(selector) $('#first').siblings('li') 查找兄弟節(jié)點，不包括自身
parent(selector) $('#first').parent('li') 查找父親
eq(selector) $('li').eq(2) 找到li中索引值為2的對象
next(selector) $('li').next() 找下一個兄弟節(jié)點
prev(selector) $('li').prev() 找上一個兄弟節(jié)點
9耳鸯，jquery 方法
1瓣赂，增
1，append() - 在被選元素的結(jié)尾插入內(nèi)容
$("p").append("追加文本")
2片拍，prepend() - 在被選元素的開頭插入內(nèi)容
$("p").prepend("在開頭追加文本");
3煌集，after() - 在被選元素之后插入內(nèi)容
$("img").after("在后面添加文本");
4，before() - 在被選元素之前插入內(nèi)容
$("img").before("在前面添加文本");
2捌省，刪
1苫纤，remove() - 刪除被選元素（及其子元素）
$("#div1").remove();
2，empty() - 從被選元素中刪除子元素
$("#div1").empty();
注：remove(value) : 刪除你選擇的元素纲缓；value是你要刪除的class名
$("p").remove(".italic");
3卷拘，改
1，text（value）：設(shè)置文本內(nèi)容祝高；value 是設(shè)置的文本值
$(function(){
$('idValue').click(function(){
// 會覆蓋原來的內(nèi)容栗弟，如果設(shè)置的文本中有標簽，不會解析出來
$('div1').text(‘我是新設(shè)置的文本’)
})
})
2工闺，html( value )：設(shè)置文本的內(nèi)容乍赫；value是要設(shè)置的值
$("#test2").html("<b>Hello world!</b>")
3，val(value)：設(shè)置文本value值陆蟆；value是要設(shè)置的文本值
$("#test3").val("RUNOOB")
4雷厂，attr（value）：設(shè)置文本的屬性值；value是要設(shè)置的屬性值
$("#runoob").attr("href","http://www.baidu.com");
5叠殷，css（name改鲫，value）:獲取樣式，name 是你要樣式的準確名林束，value 是要設(shè)置的樣式名的值
設(shè)置樣式是行內(nèi)標簽
// 設(shè)置單樣式
$('div1').css('width','400px') // 設(shè)置樣式
// 設(shè)置多樣式
$('div1').css({ // 設(shè)置樣式
'width','400px'像棘，
height: 100, // 這種方式也是可以實現(xiàn)的
'border','1px red solid'
})
6，addClass() ：給jquery對象增加類
$("body div:first").addClass("important blue");
7壶冒，removeClass() ：給jquery對象刪除類
$("body div:first").removeClass("important");
8缕题，toggleClass()：給元素進行添加/刪除類的切換操作
$("body div:first").toggleClass("blue");
9，隱式迭代（只要返回是一個數(shù)組集合依痊，此數(shù)組有這個方法避除，就可以繼續(xù)執(zhí)行）
$(this).text(wjx_sel).prevAll().text().nextAll().text()怎披；// 一旦返回的不是一個數(shù)組，就會終止此方法運行
4瓶摆，查
1凉逛，text（）：獲取文本內(nèi)容（傳空值）
$(function(){
$('idValue').click(function(){
$('div1').text() // 會獲取到這個標簽中所有的文本，包括后代元素的文本
})
})
2群井，html（）：獲取文本內(nèi)容
$("#test").html(); // 注：當獲取文本中值状飞，里面代碼不會編譯
3，css（name）:獲取樣式书斜，name 是你要樣式的準確名
注：獲取包含多個dom元素的jquery對象的樣式诬辈，只能獲取到第一個dom對象的樣式
$('div1').css('width') // 獲取樣式
4，attr()：獲取元素屬性
<div name="zhansui" id="runoob">百度一下</div>
$("#runoob").attr("href")
5荐吉，val()：獲取表單的字段值
$("#test").val()
9焙糟，jquery 其他方法
1，設(shè)置寬高方法
1样屠，width() ：設(shè)置或返回元素的寬度（不包括內(nèi)邊距穿撮、邊框或外邊距）
2，height()：設(shè)置或返回元素的高度（不包括內(nèi)邊距痪欲、邊框或外邊距）
3悦穿，innerWidth()： 返回元素的寬度（包括內(nèi)邊距）。
4业踢，innerHeight()：返回元素的高度（包括內(nèi)邊距）栗柒。
5，outerWidth()：返回元素的寬度（包括內(nèi)邊距和邊框）知举。
6瞬沦，outerHeight()：返回元素的高度（包括內(nèi)邊距和邊框）。
2负蠕，遍歷蛙埂，向上迭代
1，parent()：被選元素的直接父元素
$("span").parent(); // 獲取到了遮糖，可以對其進行操作
2，parents()：被選元素的所有父元素
$("span").parents()
3叠赐，parentsUntil()：返回介于兩個給定元素之間的所有祖先元素欲账。
$("span").parentsUntil("div"); // 返回 span 與 div 之間層級中所有的父級元素
3，遍歷芭概，向下迭代
1赛不，children()：返回被選元素的所有直接子元素。
$("div").children();
children()也可以使用可選參數(shù)來過濾對子元素的搜索罢洲。
$("div").children("p.pValue"); // 返回類名為 "pValue" 的所有 <p> 元素踢故，并且它們是 <div> 的直接子元素
2文黎，find()：被選元素的后代元素，一路向下直到最后一個后代
$("div").find("span"); // 返回所有所選擇元素的后代span元素
注：
$("div").find("*"); // 返回所有的div后代元素殿较，部分標簽
4耸峭，遍歷，同胞元素
1淋纲，siblings()：被選元素的所有同胞元素劳闹。
$("h2").siblings(); // 返回 h2 標簽的所有同胞元素
2，next()：被選元素的下一個同胞元素
$("h2").next(); // 返回被選元素的下一個同級元素
3洽瞬，nextAll()：
$("h2").nextAll(); // 返回被選元素的所有跟隨的同級元素
4本涕，nextUntil()：返回介于兩個給定參數(shù)之間的所有跟隨的同胞元素
$("h2").nextUntil("h6"); // 返回介于h2 與 h6 之間的所有同胞元素
5，遍歷伙窃，過濾
1菩颖，first()：返回被選元素的首個元素
$("div p").first(); // 返回選取首個 <div> 元素內(nèi)部的第一個 <p> 元素：
2，last()：返回被選元素的最后一個元素为障。
$("div p").last() // 返回選擇最后一個 <div> 元素中的最后一個 <p> 元素：
3位他，eq()：返回被選元素中帶有指定索引號的元素
$("p").eq(1); // 返回第一個p標簽元素
4，filter()：不匹配這個標準的元素會被從集合中刪除产场，匹配的元素會被返回鹅髓。
$("p").filter(".url"); // 所有p標簽中，沒有class為 url 的類京景，都會被刪除
5窿冯，not()：返回不匹配標準的所有元素
$("p").not(".url"); // 返回所有p標簽中，沒有url類的標簽
10确徙，jquery 常用的方法
1醒串，show（）：隱藏被選元素
$("p").show(); // 被選中元素顯示
2，hide（）：隱藏被選元素
$("p").hide(); // 被選中元素隱藏
3鄙皇，toggle（）：hide() 和 show() 方法之間的切換
$("p").toggle(); // 被選中元素在顯示與隱藏中切換
4芜赌，fadeIn（）：逐漸改變被選元素的不透明度，從隱藏到可見
$("p").fadeIn(); // 被選中元素p淡入效果
5伴逸，fadeOut（）：逐漸改變被選元素的不透明度缠沈，從可見到隱藏
$("p").fadeOut(); // 被選中元素p淡出效果
6，fadeToggle（）：在 fadeIn() 和 fadeOut() 方法之間進行切換
$("p").fadeToggle(); // 被選中元素p在淡入效果與淡出效果中切換
7错蝴，slideUp（）：通過調(diào)整高度來滑動隱藏被選元素
$("p").slideUp(); // 以向上滑動方式隱藏所有的 <p> 標簽
8洲愤，slideDown（）：通過調(diào)整高度來滑動顯示被選元素
$("p").slideDown(); // 以向下滑動方式顯示所有的隱藏 <p> 標簽
9，slideToggle（）：slideUp() 和 slideDown() 方法之間的切換
$("p").slideToggle(); // 以向上向下滑動方式顯示隱藏所有的 <p> 標簽
11顷锰，jquery Ajax
1柬赐，load()：從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中官紫。
$("#div1").load("demo_test");// 把獲取到文件中的數(shù)據(jù)返回到id為div1的標簽中
$("#div1").load("demo_test.txt #p1");// 把獲取到文件中id為p的數(shù)據(jù)返回到id為div1的標簽中
注：onload（）函數(shù)可以支持回調(diào)
- responseTxt - 包含調(diào)用成功時的結(jié)果內(nèi)容
- statusTXT - 包含調(diào)用的狀態(tài)
- xhr - 包含 XMLHttpRequest 對象
$("button").click(function({
$("#div1").load("demo_test.txt",function(
responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部內(nèi)容加載成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
