JQuery總結+例項
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（標準通用標記語言下的一個應用）、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的一點認識，如有錯誤，歡迎指出！