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能做什么
訪問和操作DOM元素
控制頁面樣式
對頁面事件進行處理
擴展新的jQuery插件
與Ajax技術完美結合
Jquery的優勢
體積小，壓縮后只有100KB左右
強大的選擇器
出色的DOM封裝
可靠的事件處理機制
出色的瀏覽器兼容性
使用隱式迭代簡化編程
豐富的插件支持
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是否給選中3.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值為0li.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選擇器及jquery案例的相關知識，希望對大家有所幫助，如果大家想了解更多有關jquery的知識敬請關注武林網網站！
新聞熱點
疑難解答
