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的一點認識,如有錯誤,歡迎指出!