標籤：
1. 什麼是jQuery以及學習的意義等
jQuery是一個js庫
JS庫是什嗎？
把常用的方法，進行封裝，封裝到一個單獨的js檔案當中，要用的時候直接調用。
學習jQuery主要學什嗎？
學習jQuery提供給我們的方法
2.jQuery的使用步驟
1）引入jQuary包
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)) //擷取當前元素的索引位置
jQuary學習-什麼是jquary? Js與jquary之間的關係 Jquary選取器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
