jQuery基礎(一)——樣式篇（認識jQuery）

tinywan1227發表於2016-09-17
jQuery

一、認識

//等待dom元素載入完畢.
$(document).ready(function(){
    alert("Hello World!");
});

二、jQuery物件與DOM物件是不一樣的

普通處理，通過標準JavaScript處理：

<!-- 使用JS原生語法 -->
    <script type="text/javascript">
        window.onload = function(){
            // 通過原生JS語法獲取id為imooc1的元素p
            var p = document.getElementById(`imooc1`);
            // 將元素p在html中內容改變
            p.innerHTML = `P1：您好！通過慕課網學習jQuery才是最佳的途徑`;
            // 將元素p的內容顏色改為紅色
            p.style.color = `red`;    
        }
    </script>

jQuery的處理：

<!-- 使用jQuery語法 -->
    <script type="text/javascript">
        $(document).ready(function() {
            /**
             * 通過jQuery語法獲取id為imooc2的元素獲得一個jQuery物件
             * 呼叫該物件的html()方法進行更改內容
             * 呼叫該物件的css()方法進行更改顏色樣式
             */   
            var $p = $(`#imooc2`);
            $p.html(`P2：您好！通過慕課網學習jQuery才是最佳的途徑`).css(`color`,`red`);
        });
    </script>

通過標準的JavaScript操作DOM與jQuyer操作DOM的對比，我們不難發現：

  1. 通過jQuery方法包裝後的物件，是一個類陣列物件。它與DOM物件完全不同，唯一相似的是它們都能操作DOM。
  2. 通過jQuery處理DOM的操作，可以讓開發者更專注業務邏輯的開發，而不需要我們具體知道哪個DOM節點有那些方法，也不需要關心不同瀏覽器的相容性問題，我們通過jQuery提供的API進行開發，程式碼也會更加精短。

三、jQuery物件轉化成DOM物件

注意：

【1】jQuery物件是一個類似陣列的物件，可以通過[index]的方法得到相應的DOM物件.

【2】通過get(index)方法得到相應的DOM物件.

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
<script type="text/javascript">
    $(function(){
        var $div = $(`div`);
      var div = $div[0];
      var div2 = $div.get(2);
      div.style.color = `red`; //第一種方法
      div2.style.color = `blue`;  //第二種方法
    });
</script>

實際案例1：判斷核取方塊是否被選中【DOM物件】

<input type="checkbox" name="" id="argee"><label>argee</label>
<script type="text/javascript">
    $(function(){
      var $div = $(`#argee`);  //Jquery 物件
      var inputDom = $div[0];  //DOM 物件
      $div.click(function(){
        if(inputDom.checked){
            alert(`this is checked`);
        }
      });
    });
</script>

實際案例2：判斷核取方塊是否被選中【jQuery物件】

<script type="text/javascript">
    $(function(){
      var $div = $(`#argee`);  //Jquery 物件
      $div.click(function(){
        if($div.is(`:checked`)){  // 返回布林值boolean
            alert(`this is checked`);
        }
      });
    });
</script>

 

四、DOM物件轉化成jQuery物件

如果傳遞給$(DOM)函式的引數是一個DOM物件，jQuery方法會把這個DOM物件給包裝成一個新的jQuery物件
通過$(dom)方法將普通的dom物件加工成jQuery物件之後，我們就可以呼叫jQuery的方法了：
    <script type="text/javascript">
            var div = document.getElementsByTagName(`div`); //dom物件
            //將dom節點div轉化為$div的jquery物件
            // $div =  
            var $first = $div.first(); //找到第一個div元素
            $first.css(`color`, `red`); //給第一個元素設定顏色
    </script>

 



 










相關文章