發表文章

目前顯示的是有「jQuery」標籤的文章

{jQuery}.get的範例

html <span>&nbsp;</span> <p>In this paragraph is an <span>important</span> section</p> <div><input type="text" /></div> <a href="#">not special</a> script $("*", document.body).click(function (e) {   e.stopPropagation();   var domEl = $(this).get(0);   $("span:first").text("Clicked on - " + domEl.tagName); }); 畫面上點到的東西都會顯示出他的標籤名稱, $("*", document.body).click(function (e) {   //當頁面上body裡的任一東西被按到之後,會執行以下   e.stopPropagation();   //此行會中止底下.get()的向上爬   var domEl = $(this).get(0);   //當東西被按到時,會由目前的選項開始逐一的往上爬並呈現   //當按到input就會顯示input 、div   //所以我們只取得第一個   $("span:first").text("Clicked on - " + domEl.tagName);   //將結果的'標籤'寫入第一個span當中, });

{jQuery心得}.map與.get取得數值的不同

html <div>One</div> <div>Two</div> <div>Three</div> map: 將目前相符集合中的每個元素傳入函式內 產生包含傳回值的新jquery物件 Script:map var cont = $('div').map(function(){ return $(this).text(); }); alert(cont) 會得到 [object Object] 因此,要將東西叫出來時,會使用 .get(),join() =================華麗的分隔線================= get: 取得jqyery物件所選取的dom元素 Script:get var cont = $('div').get(); alert(cont); 則會取得 [object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement] 將東西叫出來時,則使用 innerHTML

(jQuery)筆記-逐一代入同名稱不同數值

<div id="first">first</div> <div id="second">second</div> 出現的結果就是會有兩個div, 而點選每一個都有不同的結果, 要做出按不同的div,會有不同的訊息, 一般可以想到針對第一個,有msg1,第二個則是msg2 var msg1 = … 之類的 但是10個100個就累死人了, 可是在語法中,message只有一個, 表示每個按下去的div都有自己的message, 一般的想法會以為: var message = 'u click first';   //這裡定義 $('#first').bind('click',function(){  //這裡塞入     alert(message); }) var message = 'u click second';  //這裡定義新內容(同樣是message這個值) $('#second').bind('click',function(){  //這裡塞入     alert(message); }) 這樣的狀況下,並不如as當中一樣, 執行到哪就塞到哪並等著你, 因為, 最後按的時後,會去找到message(已經變second了) 因此,要塞入的方法就要改一下 Script var message = 'u click first'; $('#first').bind('click',{msg: message},function(event){     alert(event.data.msg); }) var message = 'u click second'; $('#second').bind('click', {msg: message} ,function(event){     alert( event.data.msg ); }) 如此一來,一定義就塞入,就各不相關, 跟as中,給物件一個值同道理...

{jQuery心得} - each

圖片
首先,這是一個 CSS p { margin: 4px; font-size:16px; font-weight:bolder; cursor:pointer; } .blue { color:blue; } .highlight { background:red; } Script <p class="blue">Click to toggle (<span>clicks: 0</span>)</p> <p class="blue highlight">highlight (<span>clicks: 0</span>)</p> <p class="blue">on these (<span>clicks: 0</span>)</p> <p class="blue">paragraphs (<span>clicks: 0</span>)</p> 在這樣的狀況下,設定點擊即會增加後面的數字 /////////////////////////////// Script script var count = 0; $('p').click(function(){ count++; $(this).find('span').text('clicks: ' + count); $(this).toggleClass("highlight", count % 3 == 0); }) 可是,count只有一個,那麼當每個都當時,卻是全部的累加 (以下是每個p都點一下的結果) /////////////////////////////// Script使用了each var count = 0; $("p").each(function() { var $thisParagraph = $(this); var count = 0; $thisParag...

Jquery queue, dequeue and clearQueue

queue 就象是as中陣列的push一樣,依序的一個個放進去容器當中; dequeue 就是一個個取出來用,放了多少東西就能取多少,但是每一個 dequeue 只會叫一次;而clearQueue則是直接刪去陣列中的內容。 $('div').queue(function(){    $('div').fadeIn(); }) 以上無法呈現東西,只是填入容器而已,欲呈現得有 $('div').dequeue(); 才行  

在iphone上的網站設計

Finally i start try to learn how to design web on iphone. A little difficult, but I think is useful.

20100510-彈跳圖片的fancybox(粉絲盒子)筆記-以彈跳照片為例

從fb的網站範例中摸索出的筆記-以彈跳照片為例 一般而言的fb使用方式, a 裡面包含了 img。 而js是用 $("選擇器").fancybox({ }); 'titleShow': false titleShow是圖片的title,預設是true會出現,要關掉就直接設false。 而title會出現的內容,以 a 的 title 為主,若沒有則是使用img裡的alt。 'transitionIn'    : 'elastic', 在開啟時使用elastic的效果彈跳視窗,亦有fade、與none的效果 'transitionOut'    : 'elastic' 在關閉時使用elastic的效果彈跳視窗,亦有fade、與none的效果 'titlePosition'    : 'inside' 設定說明文,以 a 的 title 為主,若沒有則是使用img裡的alt。 參數中,除了 inside 還包括了 outside 及 over。 outside:在彈跳視窗之外,另用背景呈現 inside:圖片會有背景呈現文字 over:直接在圖片上呈現一層色彩,文字覆蓋在圖片上。 以下為官方的設定說明: Key Default value Description padding 10 Space between FancyBox wrapper and content margin 20 Space between viewport and FancyBox wrapper opacity false When true, transparency of content is changed for elastic transitions modal false When true, 'o...

jQuery UI的筆記-draggable

$( ".block" ).draggable({   //helper: "clone", //拖動時克隆,默認是original   axis:"x", //定義拖動方向,x與y還有auto。   containment: "#contain" , //定義一個容器,div就只能在容器的範圍內活動了   cursor: "move" , //定義拖動時鼠標指針的狀態,參數類型詳見css中cursor配置   cursorAt:{top:10}, //定義拖動的時候鼠標指針的位置,此位置是相對被拖動對象的邊框,單位px   opacity: 0.40, //設置對像被拖動時的透明度   handle: "div" , //設置拖動控制器,也就是說當鼠標按住控制器的時候,才能拖動對象   distance: 20, //設置當鼠標拖動多少像素時對象才會移動   //delay: 1000, //設置延遲時間單位毫秒   grid:[50,50], //設置每次拖動的步進單位px ??(scroll: false , //設置當拖動超出整個瀏覽器窗口,是否滾動瀏覽器)   dragPrevention:[ 'input' , 'textarea' , 'button' , 'select' , 'option' ],//設置被拖動的div碰到那些dom元素時停止   start: function (e,ui){}, //開始拖動執行的函數   drag: function (e,ui){}, //拖動時執行的函數   stop: function (e,ui){} //拖動停止執行的函數 }) 來源:http://zhg-grj.spaces.live.com/blog/cns!ADA1FB08E190EBF4!221.entry