Jquery能做什么
訪問和操作DOM元素
控制頁面樣式
對頁面事件進行處理
擴展新的jQuery插件
與Ajax技術完美結合
Jquery的優勢
體積小，壓縮后只有100KB左右
l強大的選擇器
出色的DOM封裝
l可靠的事件處理機制
出色的瀏覽器兼容性
使用隱式迭代簡化編程
豐富的插件支持
jQuery的知識的分解：
1.關于window.onload和$(function(){})區別
解析：window.onload等待頁面上所有資源（html標簽，css，img，js）都加載完成后，才執行，包括（文本素材，圖片，js，css）
$(function(){}):等待頁面上的標簽素材加載完成后就開始執行
第二點：
Window.onload只能調用一次
$(function(){})可以調用多次
2.怎么通過Jquery設置樣式
1）.通過$(“選擇器”).css(“屬性名”,”屬性值”);
//這里的書寫的屬性名和css中書寫的一致
2）.$(“選擇器”).html():獲取兩個標簽之間的html代碼
3）.$(“選擇器”).addClass(“屬性值”)
可以動態的改變dom文檔結構。進而設置樣式。
3.DOM對象和Jquery對象的轉換
jquery對象轉換成 dom對象
jquery提供了兩種方法將一個jquery對象轉換成一個dom對象，即[index]和get(index)。
ar cr= cr=("#cr"); //jquery對象
var cr = $cr[0]; //dom對象 也可寫成 var cr=$cr.get(0);
alert(cr.checked); //檢測這個checkbox是否給選中
dom對象轉換成jquery對象
對于一個dom對象，只需要用$()把dom對象包裝起來，就可以獲得一個jquery對象了，方法為$(dom對象);
代碼:
var cr=document.getElementById("cr"); //dom對象
var cr= cr=(cr); //轉換成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;//這里設置間距 var li = $("li");//這里是區塊名稱 var li_W = li[0].offsetWidth + margin;//取區塊的實際寬度（包含間距，這里使用源生的offsetWidth函數，不適用jQuery的width()函數是因為它不能取得實際寬度，例如元素內有pandding就不行了） function liuxiaofan() {//定義成函數便于調用 var h = [];//記錄區塊高度的數組 var n = document.documentElement.offsetWidth / li_W | 0;//窗口的寬度除以區塊寬度就是一行能放幾個區塊 for (var i = 0; i < li.length; i++) {//有多少個li就循環多少次 li_H = li[i].offsetHeight;//獲取每個li的高度 if (i < n) {//n是一行最多的li，所以小于n就是第一行了 h[i] = li_H;//把每個li放到數組里面 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);//取得數組中的最小值，區塊中高度值最小的那個 minKey = getarraykey(h, min_H);//最小的值對應的指針 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);//把區塊的序號和它的高度值寫入對應的區塊H3標題里面 } } /* 使用for in運算返回數組中某一值的對應項數(比如算出最小的高度值是數組里面的第幾個) */ function getarraykey(s, v) { for (k in s) { if (s[k] == v) { return k; } } } /*這里一定要用onload，因為圖片不加載完就不知道高度值*/ window.onload = function () { liuxiaofan(); }; /*瀏覽器窗口改變時也運行函數*/ window.onresize = function () { liuxiaofan(); };</script>JQuery選擇器
解析：為了更好的或者是更快的從復雜的DOM樹中找到我們需要的一類標簽
1.層次選擇器
<!-- 當點擊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');//索引值為偶數的元素 // $('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選擇器詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
