下面小編就為大家?guī)硪黄猨Query的實例及必知重要的jQuery選擇器詳解。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。

Jquery能做什么:

訪問和操作DOM元素

控制頁面樣式

對頁面事件進行處理

擴展新的jQuery插件

與Ajax技術(shù)完美結(jié)合

Jquery的優(yōu)勢:

體積小，壓縮后只有100KB左右

l強大的選擇器

出色的DOM封裝

l可靠的事件處理機制

出色的瀏覽器兼容性

使用隱式迭代簡化編程

豐富的插件支持

jQuery的知識的分解：

1.關(guān)于window.onload和$(function(){})區(qū)別

解析：window.onload等待頁面上所有資源（html標簽，css，img，js）都加載完成后，才執(zhí)行，包括（文本素材，圖片，js，css）

$(function(){}):等待頁面上的標簽素材加載完成后就開始執(zhí)行

第二點：

Window.onload只能調(diào)用一次

$(function(){})可以調(diào)用多次

2.怎么通過Jquery設(shè)置樣式

1）.通過$(“選擇器”).css(“屬性名”,”屬性值”);

//這里的書寫的屬性名和css中書寫的一致

2）.$(“選擇器”).html():獲取兩個標簽之間的html代碼

3）.$(“選擇器”).addClass(“屬性值”)

可以動態(tài)的改變dom文檔結(jié)構(gòu)。進而設(shè)置樣式。

3.DOM對象和Jquery對象的轉(zhuǎn)換

jquery對象轉(zhuǎn)換成 dom對象

jquery提供了兩種方法將一個jquery對象轉(zhuǎn)換成一個dom對象，即[index]和get(index)。

ar cr= cr=("#cr"); //jquery對象

var cr = $cr[0]; //dom對象 也可寫成 var cr=$cr.get(0);

alert(cr.checked); //檢測這個checkbox是否給選中

dom對象轉(zhuǎn)換成jquery對象

對于一個dom對象，只需要用$()把dom對象包裝起來，就可以獲得一個jquery對象了，方法為$(dom對象);

代碼:

var cr=document.getElementById("cr"); //dom對象

var cr= cr=(cr); //轉(zhuǎn)換成jquery對象

光棒效果案例：

js代碼：

$(function () {

        var lis = document.getElementsByTagName('li');

        for (var i = 0; i < lis.length; i++) {

          lis[i].onmouseover = function () {

            this.style.background = 'red';

          };

          lis[i].onmouseout = function () {

            this.style.background = '';

          }

        }

      });

jQuery的代碼：

$(function () {

        $('li').mouseover(function () {

          $(this).css('background','red');

        }).mouseout(function () {

          $(this).css('background', '');

        })

      });

jQuery瀑布流案例：

<script>

  var margin = 10;//這里設(shè)置間距

  var li = $("li");//這里是區(qū)塊名稱

  var li_W = li[0].offsetWidth + margin;//取區(qū)塊的實際寬度（包含間距，這里使用源生的offsetWidth函數(shù)，不適用jQuery的width()函數(shù)是因為它不能取得實際寬度，例如元素內(nèi)有pandding就不行了）

  function liuxiaofan() {//定義成函數(shù)便于調(diào)用

    var h = [];//記錄區(qū)塊高度的數(shù)組

    var n = document.documentElement.offsetWidth / li_W | 0;//窗口的寬度除以區(qū)塊寬度就是一行能放幾個區(qū)塊

    for (var i = 0; i < li.length; i++) {//有多少個li就循環(huán)多少次

      li_H = li[i].offsetHeight;//獲取每個li的高度

      if (i < n) {//n是一行最多的li，所以小于n就是第一行了

        h[i] = li_H;//把每個li放到數(shù)組里面

        li.eq(i).css("top", 0);//第一行的Li的top值為0

        li.eq(i).css("left", i * li_W);//第i個li的左坐標就是i*li的寬度

      }

      else {

        min_H = Math.min.apply(null, h);//取得數(shù)組中的最小值，區(qū)塊中高度值最小的那個

        minKey = getarraykey(h, min_H);//最小的值對應(yīng)的指針

        h[minKey] += li_H + margin;//加上新高度后更新高度值

        li.eq(i).css("top", min_H + margin);//先得到高度最小的Li，然后把接下來的li放到它的下面

        li.eq(i).css("left", minKey * li_W);  //第i個li的左坐標就是i*li的寬度

      }

      $("h3").eq(i).text("編號：" + i + "，高度：" + li_H);//把區(qū)塊的序號和它的高度值寫入對應(yīng)的區(qū)塊H3標題里面

    }

  }

  /* 使用for in運算返回數(shù)組中某一值的對應(yīng)項數(shù)(比如算出最小的高度值是數(shù)組里面的第幾個) */

  function getarraykey(s, v) { for (k in s) { if (s[k] == v) { return k; } } }

  /*這里一定要用onload，因為圖片不加載完就不知道高度值*/

  window.onload = function () { liuxiaofan(); };

  /*瀏覽器窗口改變時也運行函數(shù)*/

  window.onresize = function () { liuxiaofan(); };

</script>

JQuery選擇器

 解析：為了更好的或者是更快的從復(fù)雜的DOM樹中找到我們需要的一類標簽

1.層次選擇器

<!-- 當(dāng)點擊h2元素時，為#menu下的<span>元素添加色為#09F的顏色背景 -->

  <!-- <script type="text/javascript">

    $(function () {

      $('h2').click(function () {

        $('#menu span').css('background-color','#09F');

      });

    });

  </script>-->

2.基本選擇器

<!-- 為標簽選擇器添加樣式 -->

  <script type="text/javascript">

    $(function () {

      $('h2').click(function () {

        $('h3').css('background-color', '#09F');

      });

    });

  </script>

3.基本過濾選擇器

<script type="text/javascript">

    $(function () {

      $('h2').click(function () {

        //$('li:first').css('background-color', '#09F');//第一個

        //$('li:last').css('background-color', '#09F');//最后一個

        //$('li:not(.three)').css('background-color', '#09F');//class不為three的元素

        // $('li:even').css('background-color', '#09F');//索引值為偶數(shù)的元素

        // $('li:eq(1)').css('background-color', '#09F');//索引值為1的元素

         //$('li:gt(1)').css('background-color', '#09F');//索引值大于1的元素

        //$('li:lt(1)').css('background-color', '#09F');//索引值小于1的元素

        //$(':header').css('background-color', '#09F');//所有標題的元素

        $(':focus').css('background-color', '#09F');//獲取焦點的元素

      });

    });

  </script>

4.可見性過濾選擇器

<script src="js/jquery-1.8.3.js"></script>

  <script type="text/javascript">

    $(function () {

      // $('p:hidden').show();//顯示文字

      $('p:visible').hide();//隱藏文字

    });

  </script>

  <style type="text/css">

    #txt_show

    {

      display:none;color:#00C;

    }

    #txt_hide

    {

      display:block;color:#F30;

    }

  </style>

</head>

<body>

  <p id="txt_hide">點擊按鈕，我會被隱藏哦~</p>

   <p id="txt_show">隱藏的我，被顯示了，嘿嘿~</p>

  <input type="button" name="show" value="點擊顯示文字 " />

   <input type="button" name="hide" value="點擊隱藏文字 " />

</body>

5.屬性選擇器

<!--改變class屬性的值為odds的元素的背景顏色 -->

   <script type="text/javascript">

     $(function () {

       $("h2").click(function () {

         $("[class=odds]").css("background-color", "#FFFFFF");

       })

     });

  </script>

以上這篇jQuery的實例及必知重要的jQuery選擇器詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考