JQuery總結+執行個體

標籤：style   http   io   color   ar   os   使用   sp   java   

       JQuery是什嗎？

       Jquery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫 ，它相容CSS3，還相容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將不再支援IE6/7/8瀏覽器。jQuery使使用者能更方便地處理HTML（標準通用標記語言 (SGML)下的一個應用）、events、實現動畫效果，並且方便地為網站提供AJAX互動。jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的外掛程式可供選擇。jQuery能夠使使用者的html頁面保持代碼和html內容分離，也就是說，不用再在html裡面插入一堆js來調用命令了，只需要定義id即可。簡單的來說，我認為，jquery就是一個別人寫好了各種功能的javascript庫。

       JQuery的特點：

       視頻中給我們介紹了Jquery的特點，主要是支援各種主瀏覽器，以強大的css先擇器為基礎，幾乎所有的操作都先使用選取器尋找DOM對象，然後對其進行各種操作。（css的有好多功能只支援IE瀏覽器，甚至不支援IE10，jquery彌補了這個缺點）JQuery有強大的外掛程式機制。

      簡單瞭解JQuery之後，我們在執行個體中，去說明和使用JQuery。以功能表列的例子來說明。功能表列的例子是為了實滑鼠點擊豎向功能表列時，緩慢的出現對應子功能表，再次點擊，收合子功能表。橫向功能表列實現滑鼠停在某個主菜單上，顯示其子功能表。

      代碼如下（這裡不放JQuery的代碼，實在太多了，如想使用，可以直接去網上下載）：

HTML的代碼：

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>實戰3-菜單效果</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link typt="text/css" rel="stylesheet" href="css/menu.css" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/menu.js"></script></head><body><ul><li class="main"><a href="#">功能表項目1</a><ul><li><a href="#">子功能表項11</a></li><li><a href="#">子功能表項12</a></li></ul></li><li class="main"><a href="#">功能表項目2</a><ul><li><a href="#">子功能表項21</a></li><li><a href="#">子功能表項22</a></li></ul></li><li class="main"><a href="#">功能表項目3</a><ul><li><a href="#">子功能表項31</a></li><li><a href="#">子功能表項32</a></li></ul></li></ul><br /><br /><br /><ul><li class="hmain"><a href="#">功能表項目1</a><ul><li><a href="#">子功能表項11</a></li><li><a href="#">子功能表項12</a></li></ul></li><li class="hmain"><a href="#">功能表項目2</a><ul><li><a href="#">子功能表項21</a></li><li><a href="#">子功能表項22</a></li></ul></li><li class="hmain"><a href="#">功能表項目3</a><ul><li><a href="#">子功能表項31</a></li><li><a href="#">子功能表項32</a></li></ul></li></ul></body></html></span>

CSS的代碼：

<span style="font-size:18px;">ul, li{/*清除ul和li上預設的小圓點*/list-style:none;}ul{/*清除子功能表縮排值*/padding:0;margin:0;}.main, .hmain{background-image:url(../images/title.gif);background-repeat:repeat-x;width:120px;}li{background-color:#EEEEEE;}a{/*取消所有的底線*/text-decoration:none;padding-left:20px;display:block;display:inline-block;width:100px;padding-top:3px;padding-bottom:3px;}.main a, .hmain a{color:white;background-image:url(../images/collapsed.gif);background-repeat:no-repeat;background-position:3px center;}.main li a, .hmain li a{color:black;background-image:none;}.main ul, .hmain ul{display:none;}.hmain{float:left;margin-right:1px;}</span>

最後看看js的代碼：

<span style="font-size:18px;">$(document).ready(function(){//頁面中的主功能表項目已經轉載完成時，執行的代碼$(".main > a").click(function(){//找到主功能表項目所對應的子功能表項var ulNode = $(this).next("ul");/*if(ulNode.css("display") == "none"){ulNode.css("display","block");}else{ulNode.css("display","none");}*///ulNode.show("slow");//normal fast//ulNode.hide();//ulNode.toggle("slow");////ulNode.slideDown();//ulNode.slideUp();ulNode.slideToggle();changeIcon($(this));});$(".hmain").hover(function(){$(this).children("ul").slideDown();changeIcon($(this).children("a"));},function(){$(this).children("ul").slideUp();changeIcon($(this).children("a"));});   });/***修改主菜單的指示表徵圖*/function changeIcon(mainNode){if(mainNode){if(mainNode.css("background-image").indexOf("collapsed.gif") >= 0){mainNode.css("background-image","url('images/expanded.gif')");}else{mainNode.css("background-image","url('images/collapsed.gif')");}}}</span>

    之前我們都學過HTML和CSS，這裡我想主要說一下js的代碼。在本例中，show，hide方法可以用於顯示或隱藏元素，沒有參數時的效果和修改css的display屬性效果一樣。參數可以是單位為毫秒的數字，或者是slow , normal , fast 這三個文字，都可以來控制完成顯示或隱藏所需要的時間。這時動畫效果是靠不斷改變元素的寬度和高度來實現的。toggle方法更為強大，可以上去我們判斷元素是隱藏還是顯示的狀態，直接讓顯示的元素隱藏起來或者隱藏的元素顯示出來，使用方法和show，hide 相同；slideDown ，sildeUp可以實現鄉下或向上捲動的效果，實際上是通過指定時間內修改元素的高度來實現動畫效果。需要注意的是，這兩個方法參數為空白的情況和show，hide不同。sildetoggle和toggle達到的效果類似。

    小結：

      在實踐中不斷學習，用實實在在的例子協助我們學習，總體來說，我認為Jquery是非常強大的功能函數庫，如果想用好JQuery 建議多看看JqueryAPI，當然，在使用的時候先查，也是可以的。這篇簡單的在宏觀上總結了JQuery和jQuery的一些方法，以及我對JQuery的一點認識，如有錯誤，歡迎指出！

JQuery總結+執行個體