1、jQuery入門
1.1、什么是jQuery?
jQuery是一個JavaScript函數(shù)庫。jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。jQuery庫包含以下功能：HTML 元素選取、HTML 元素操作、CSS 操作、HTML 事件函數(shù)、JavaScript 特效和動畫、HTML DOM 遍歷和修改、AJAX、Utilities
1.2、jQuery的優(yōu)勢極大地簡化了JavaScript編程
舉個栗子
以下是javascript和jQuery對比
<!-- 首先使用script標(biāo)簽引入jQuery文件 -->
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript">
//普通JavaScript處理
/*window.onload=function(){
var p = document.getElementById('yxt');
p.innerHTML="青山本無憂，因雪白頭";
p.style.color="pink";
}*/
//jQuery處理
$(document).ready(function(){
var $p = $('#yxt');
$p.html('青山本無憂，因雪白頭').css('color','pink');
})
1.3、下載和使用jQuery
從jquery.com下載
jQuery有兩個版本的 jQuery 可供下載：
Production version - 用于實際的網(wǎng)站中，已被精簡和壓縮。Development version - 用于測試和開發(fā)（未壓縮，是可讀的代碼）
還可從 CDN （內(nèi)容分發(fā)網(wǎng)絡(luò)）中載入 jQuery。
jQuery 庫是一個 JavaScript 文件，您可以使用 HTML 的標(biāo)簽引用它：
<script src="jquery-3.1.0.js"></script>
提示： 將下載的文件放在網(wǎng)頁的同一目錄下，就可以使用jQuery。您是否很疑惑為什么我們沒有在您是否很疑惑為什么我們沒有在標(biāo)簽中使用 type="text/javascript" ？
2、jQuery的核心基礎(chǔ)
2.1、$和jQuery的說明
$是jquery中的一個對象，jquery中所有方法和屬性都添加在這個對象中，$等價于jQuery,是其簡寫形式。
2.2、jQuery對象和DOM節(jié)點的相互轉(zhuǎn)換
//DOM節(jié)點 和 jQuery對象 不能混用對方的方法、屬性。
//jquery對象轉(zhuǎn)化成DOM對象
$(function(){
//1、數(shù)組下標(biāo)的方式（數(shù)組的索引是從0開始的，也就是第一個元素下標(biāo)是0）
var $div = $('div') //jQuery對象
var div = $div[0] //轉(zhuǎn)換成DOM對象
div.style.color = 'red' //操作DOM對象的屬性
//2、通過jQuery自帶的get()方法
var div = $div.get(0);
})
相比較jQuery轉(zhuǎn)化成DOM，開發(fā)中更多的情況是把一個dom對象加工成jQuery對象。$(參數(shù))是一個多功能的方法，通過傳遞不同的參數(shù)而產(chǎn)生不同的作用。如果傳遞給$(DOM)函數(shù)的參數(shù)是一個DOM對象，jQuery方法會把這個DOM對象給包裝成一個新的jQuery對象.
//DOM對象轉(zhuǎn)化成jQuery對象
var div = document.getElementsByTagName('div');//DOM對象
var $div = $(div)//jQuery對象
var $first = $div.first();//找到第一個div元素
$first.css('color','red');//給第一個元素設(shè)置樣式
下面談?wù)劊簑indow.onload和$(document).ready()的區(qū)別.
1、執(zhí)行時機：onload事件必須等頁面加載完畢后才能執(zhí)行；ready當(dāng)頁面dom節(jié)點加載完畢就可以執(zhí)行。比onload早
2、添加個數(shù)：onload添加多個，只執(zhí)行最后一個 會覆蓋前面的onload事件；ready事件可以添加多個，互相之間不會覆蓋
(onload事件和ready事件之間也不會互相覆蓋)
3、簡化寫法：onload沒簡化寫法；ready事件可以簡化為$(function(){});
jQuery選擇器
id選擇器、類選擇器、元素(標(biāo)簽)選擇器
$('#yxt')；$('.yxt')；$('div')
通配選擇器
$('*')
層級選擇器
子選擇器、后代選擇器和、相鄰兄弟選擇器、一般兄弟選擇器
$("parent > child");$("ancestor descendant");$("prev + next"); $("prev~siblings");
基本過濾選擇器（基本篩選選擇器）
該選擇器的用法與CSS中的偽類選擇器相似，選擇器用冒號":"開始
$(":first") //匹配第一個的元素
$(":last") //匹配最后一個的元素
$(":not(selector)") //用來過濾的選擇器
$(":even") //選擇索引值為偶數(shù)的元素，從0開始計數(shù)
$(":odd")// 奇數(shù)（說明同上）
$(":eq(index)") //在匹配的集合中選擇索引值為index的元素
$(":gt(index)") //索引值大于index
$(":lt(index)") //小于
$(":header") //選擇所有標(biāo)題元素，如h1,h2,h3等
$(":focus") //選擇獲取焦點的元素 、、擴(kuò)充下autofocus知識點
$(":animated") //選擇所有正在執(zhí)行動畫效果的元素
內(nèi)容選擇器
$(":contains(text)") //選擇所有包含指定文本的元素
$(":parent") //選擇含有子元素或者文本的元素
$(":empty") //選擇沒有子元素或者文本的元素
$(":has(selector)") //選擇包含有選擇器選擇元素的元素
可見性(篩選)選擇器
$(":visible") //選擇所有顯示的元素
$(":hidden") //選擇所有隱藏的元素
屬性選擇器（篩選）
$(":[attribute]") //擁有該元素的屬性
$(":[attribue='value']") //屬性值為value的元素
$(":[attribute!='value']") //屬性值不是value的元素
$(":[attribue^='value']") //屬性值以value開頭的元素
$(":[attribue$='value']") //屬性值以value結(jié)尾的元素
$(":[attribue*='value']") //屬性值含有value的元素
子元素(篩選)選擇器
jQuery實現(xiàn) :nth-child(index)是嚴(yán)格來自CSS規(guī)范。index從1開始計數(shù)
$(":first-child") //選擇所有父級元素下的第一個子元素
$(":last-child") //最后一個子元素
$(":nth-child(index)")//index從1開始計數(shù)
$(":nth-child(even)")//偶
$(":nth-child(odd)")//奇
$(":nth-child(xn)") //如3n 3..6..9 n取不到0 因為索引從1計
$(":nth-child(xn+1)") //3n+1 1..4..7
表單元素選擇器
$(":input") //選擇所有input,textarea,select和button元素
$(":text") //匹配所有文本框
$(":password") //匹配所有密碼框
$(":radio") //匹配所有單選按鈕
$(":checkbox") //匹配所有復(fù)選框
$(":submit") //匹配所有提交按鈕
$(":image") //匹配所有圖像域
$(":reset") //匹配所有重置按鈕
$(":button") //匹配所有按鈕
$(":file") //匹配所有文件域
表單對象屬性選擇器
$(":enable") //選取可用的表單元素
$(":disabled") //不可用的
$(":checked") //選取被選中的<input>元素
$(":selected") //選取被選中的<option>元素
