1. 什么是jQuery以及學習的意義等
jQuery是一個js庫
JS庫是什么？
把常用的方法，進行封裝，封裝到一個單獨的js文件當中，要用的時候直接調用。
學習jQuery主要學什么？
學習jQuery提供給我們的方法
2.jQuery的使用步驟
1）引入jQuery包
2）寫進入口函數
入口函數的兩種書寫方式：
方式一： $(document).ready(function(){
});
方式二：
$(function(){
});
3)
寫入需要實現的功能
例：
<script src="jquery-1.12.4.js"></script>//引入jQuary包 <script> $(document).ready(function(){ //入口函數 $("#btn1").click(function(){//需要執行的功能 $("div").show(400,500); }); $("#btn2").click(function(){ $("div").text("我是文字內容"); }) }); </script>
jQuery的版本
大版本：
1.x (1.1-1.12) ie 6/7/8 支持的
2.x (2.1-2.12) 不支持ie 678
3.x 不支持ie 678
小版本：
每個大版本又分兩個小版本：
compressed(壓縮版): 將變量名盡可能的變為單個字母，把注釋和換行空格全部去掉用以減小體積
uncompressed(未壓縮版): 注釋全部保留，變量名盡可能的語義化
根據小版本體積大小不同，使用環境不同
項目上線，使用壓縮版
開發過程當中使用未壓縮版
擴展：
3.x之后的版本，出現一個 slim 版 削減版
移除了 effects ajax 模塊
入口函數的注意事項
//1. 在使用jQuery之前未引包 $ is not defined
//2. 引包的順序一定要注意，在使用之前引包 $ is not defined
//3. 引包的路徑一定要寫對！
$符號是什么
//$本質 就是一個函數,根據所給的參數不同 功能不同
//第一種用法：
//傳入字符串css選擇器
//功能：獲取頁面上的元素
//栗子：$("#id")
//語法：$(selector)
//第二種用法：
//傳入DOM對象
//功能：把DOM對象轉成jQuery對象
//栗子：$(document)
//語法：$(DOMObj)
//第三種用法：
//傳入一個fucntion
//功能：入口函數
//$(function)
JQuery對象和DOM對象
<script> $(document).ready(function(){ // dom對象通過js方法獲取到的元素 就是DOM對象 var son1=document.getElementById("son1"); son1.style.backgroundColor="pink"; // son1.css("backgroundColor","green");//錯誤 dom也不能調用jauary方法 //jquary對象通過jQuery方法獲取到的元素 就是jQuery對象 var $lis=$("li"); $lis.css("backgroundColor","green"); // $lis.style.backgroundColor="pink";//錯誤 jquary不能調用dom方法 }); </script>
jQuery和JavaScript
//jQuery對象其實就是DOM對象的包裝集。
//dom對象以偽數組的形式存放在jQuery對象中
基本選擇器（id選擇器、類選擇器、標簽選擇器、交集/並集選擇器）
//基礎選擇器 //id選擇器 $("#id") //類選擇器 $(".className") //標簽選擇器 $("TagName") //交集選擇器 $(selector1selector2) //並集選擇器 $(selector1,selector2)
層級選擇器（子代、后代）
//層級選擇器 //后代選擇器 $(selector1 selector2) //子代選擇器 $(selector1>selector2)
案例：
<script src="jquery-1.12.4.js"></script> <script> $(function(){ // $(".hf,.wsy").css("backgroundColor","pink"); //並集選擇器 // $("li.nj").css("backgroundColor","grey"); //交集選擇器 // $("#dlt>li").css("backgroundColor","red"); //子代選擇器 $("#dlt li").css("backgroundColor","blue"); //后代選擇器 }); </script> <ul id="sl"> <li>聯合司令官</li> </ul> <ul id="dlt"> <li class="tz">李雲龍</li> <li>狙擊手</li> <li>士兵</li> <ul class="fl"> <li>俘虜1</li> <li>俘虜2</li> <li>俘虜3</li> </ul> <li>士兵</li> <li>士兵</li> <li class="hf">伙夫</li> <li class="wsy">衛生員</li> </ul> <ul id="tfe"> <li class="tz">楚雲飛</li> <li>狙擊手</li> <li>士兵</li> <li class="nj">士兵</li> <li>士兵</li> <li class="hf">伙夫</li> <li class="wsy">衛生員</li> </ul> <ul id="bx"> <li>百姓</li> <li>百姓</li> </ul>
過濾選擇器（odd，even，eq）
<script> $(document).ready(function () { $("li:odd").css("backgroundColor","lightblue");//奇數過濾選擇器 $("li:even").css("backgroundColor","red");//偶數過濾選擇器 $("li:eq(5)").text("改變的文字");//序號過濾選擇器 }); </script> <body> <ul> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> <li>哈哈哈</li> </ul>
篩選選擇器(children(selector)、find(selector)、next()、siblings(selector)、parent()、eq(index))
$(this).children(selector)獲取當前元素的子代標簽
$(this).find(selector) //在當前元素的后代元素中尋找和selector對應的元素
$(this).next() //獲取當前元素的下一個元素
$(this).siblings(selector) //獲取當前元素的兄弟元素
$(this).parent() //獲取當前元素的父級元素
$(this).eq(index)) //獲取當前元素的索引位置