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

1、認識

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

2、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進行開發，代碼也會更加精短。

3、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>

 

4、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>