您當前位置：首頁 > web前端 > jquery > 給設計師的jQuery教程（第一部分）

給設計師的jQuery教程（第一部分）

來源：程序員人生發布時間：2013-12-10 23:24:42 閱讀次數：3022次

　　這篇文章包含10個形象的例子，目的是給web設計師或者是入門的新人介紹如何使用jQuery實現javascript效果。jquery是一個“寫得少，做的多”的非常優秀的一個javascript類庫。它包含了很多Ajax以及javascript的特性，語義化編程，提高用戶體驗。因為這是一篇關于jQuery使用的教程，所以CSS從簡。

　　jQuery是如何工作的？

　　先下載jQuery.js文件的一份拷貝，將它插入你的html源碼中(最好插在中)。然后你就可以寫代碼調用jQuery了。下圖顯示了jQuery如何工作的:

jquery-how-it-works

　　jQuery選擇器

　　寫jQuery代碼相對比較容易(多虧其優秀的文檔)。關鍵點在于學會如何運用jQuery選擇器獲得你想要添加效果的元素。

$(“#header”)=獲得id=”header”的元素

$(“h3”)=獲得所有的<h3>元素

$(“div#content.photo”)=獲得所有在<div id=”content”>中的class=“photo”的元素

$(“ul li”)=獲得在<ul>中的<li>所有元素

$(“ul li:first”)=只選擇在<ul>中的<li>所有元素集合中的第一個元素

　　1.簡單的滑動面板

　　從一個簡單的滑動面板開始，你應該看到很多這樣的例子吧，當點擊一個鏈接的時候一個面板滑動下來(Demo)。

sample1

$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});
});

　　當被點擊的話，

　　就會上下滑動，外加添加或者刪除CSS class：active。.active是用來開關改變箭頭圖片位置的CSS，達到箭頭上下轉化的效果。

　　2.簡單的消失效果

　　點擊圖片按鈕，文本塊就消失了(Demo)。

sample2

$(document).ready(function(){
$(".pane .delete").click(function(){
$(this).parents(".pane").animate({ opacity: "hide" }, "slow");
});
});

　　當<img class=”delete”>被單擊，jQuery找到<div class=”pane”>并修改其opacity值，慢速（slow）漸變到消失（hide）。

　　3.鏈式連續的轉換效果

　　來看看jQuery鏈式效果的魅力。簡簡單單幾行代碼，就可以讓藍色的盒子淡入淡出放大或者縮小的飛來飛去（Demo）。

　　3.鏈式連續的轉換效果

　　來看看jQuery鏈式效果的魅力。簡簡單單幾行代碼，就可以讓藍色的盒子淡入淡出放大或者縮小的飛來飛去(Demo)。

multi-animation

$(document).ready(function(){
$(".run").click(function(){
$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
.animate({top: "0"}, "fast")
.slideUp()
.slideDown("slow")
return false;
});
});

　　每一行實現如下

　　1.當<a class=”run”>被單擊
　　2.驅動<div id=”box”>透明度變為0.1+左邊距left增加到400px。
　　3.驅動box變為opacity=0.4，相對于默認位置下移160px，變為20px的正方形，以slow的速度
　　4.然后同理：opacity=1, left=0, height=100, width=100, with speed "slow"
　　5.同理：opacity=1, left=0, height=100, width=100, with speed "slow"
　　6.top=0, with speed "fast"
　　7.向上滑動影藏（默認speed=“mormal”）
　　8.最后下滑顯示出來 speed=“slow”

　　翻譯自：web designer wall　翻譯：http://www.cnblogs.com/island205/

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 最精辟的解釋：什么是XHTML語言？

下一篇 Javascript實現不同編碼之間的URL提交

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

給設計師的jQuery教程（第一部分）