jquery複習日記（1）

jquery封裝了JavaScript經常使用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操做、事件處理、動畫設計和Ajax交互。

核心關鍵字： 鏈式、多功能、高效靈活

 

1.安裝jquery

　　1)npm下：

npm install jquery

　　2)文件引入：

  <script src="./jquery/jquery.min.js"></script>

　　3）cdn在線引入

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

　　ps:平常demo使用jquery.js,這樣格式更清晰，而項目上線時則推薦使用迷你版，它精簡了大量空格，

提升了效率

2.在script中的使用

　　在script中，將「 $ 」(數字4鍵上的美圓符號)比做jquery,換句話說，$在JavaScript中指的就是jQuery，jQuery對象與JavaScript對象是不一樣的！

　　1）jq的入口函數

　　全部的jQuery語句都被包裹在一個$入口函數中

　　$(function() {
            // jq函數寫在這裏  
        })；

　　你也能夠像下面這樣寫，不過一般按照上面寫比較簡潔：

$(document).ready(function(){
 
   // jq函數寫在這裏
 
});

　　引入js的window.onload:

　　window.onload函數是指當html和css加載完畢後執行的js文件，這樣是爲了防止出現頁面還未加載完畢，js就出如今了頁面中的這種意外事故。一般寫在head標籤內，(固然要寫在script內)

　　$(document).ready()函數正是對標js的window.onload，然而，它 與window.onload也有幾點不一樣：

　　　　a:$(document).ready()函數能夠沒有加載限制，這意味着，你能夠將它寫在任意一個你喜歡的地方（前提是外面要有script包裹）

　　　　b:js的window.onload只能寫一次，而$(document).ready()能夠寫屢次。

3.jQuery的各類選擇器

　　　　jq的強項就是精於各類dom操做，這一點在選擇器上就能夠看出來

　　　　通用語法：

 $(function() {
            $(" 選擇器 ").method() //找到某個dom元素並對它進行操做
        })

　　

　

　　　　標籤選擇器：

 $(function() {
            $(" button ").method() //找到button僞數組並對它們進行操做
        })

　　請注意！除非保證只有一個，標籤選擇器一般找到的是一類僞數組，要想對某個標籤操做建議後加eq()

 $(function() {
            $(" button：eq(0) ").method() //此時選中了第0個button標籤
        })

　　　　類選擇器：

$(function() {
            $(".btn").method() //選擇了類名爲btn的元素並對其操做

})

　　　　id選擇器

$(function() {
            $("#btn").method() //選擇了id爲btn的選擇器並對其操做
        })

　若是你是初學者，瞭解了上面的選擇器就會發現--其實與css的選擇器是同樣的

4.各種方法

　　a.  on() 向被選元素添加事件處理程序   

　　

$(function() {
            $("#btn").on("click",function(){
                //找到#btn元素併爲它添加點擊事件
            }) 
        })

　　第一個參數是事件名，第二個是一個回調函數