首頁 > 開發者 > JavaScript
1.在每次學習相同的內容時都會有不同的理解，就好像我們每次從同一個地方走過的感覺的不同的一樣，JQuery只是JavaScript架構中的一種，在層層眾生當中脫穎而出，我們來看一下使用JQuery架構的趨勢圖。 2.我們可以看出，使用JQuery的人越來越多，這是由於它輕鬆級而且功能強大的原因。對於一種架構不僅僅要學會使用，還要學會如何寫架構，可以做出架構的人要比只是使用架構的人更牛B,所以，我們要學著寫架構。 3. 同樣，技術也離不開生活，當你用一種思維方式去解決問題時，一般是生活中解決問題的過程，學會把技術融入到生活中去，技術和生活相結合，可能會更好的應用技術，可以說生活思想的創新是優於技術的，舉個例子來說：AJAX不知道的人就會覺的這是產生的一種新技術，其實，不是這樣，它只是一種新的思想，新的方式，如果沒有人提出來這樣的想法，那怎麼會差生這種技術的普及和應用呢，學會生活。 4. 下面實現了一個氣泡提示功能，並不是某個元素標籤的“Title”屬性，元素內建提示反應很慢，不能適應每一種情況，提示會跟隨滑鼠移動而變化，再稍微改一改就會變成，很多購物網站上那種，滑鼠移動到圖片上自動放大的效果。www.2cto.com 先看一下 實現代碼 CSS代碼（表現）[css] <span style="font-size:18px;">/* CSS Document */ /*設定提示DIV的樣式*/ #tooltip{ /*絕對位置*/ position:absolute; border:1px solid balck; background:#333; color:#fff; } p{ /*無項目符號*/ list-style:none; float:left; display:inline; border:1px solid #AAAAAA; }</span> JQuery代碼（行為）[javascript] <span style="font-size:18px;">// JavaScript Document $(function(){ //儲存滑鼠位置座標 var x=10; var y=20; //註冊圖片的滑鼠移動事件 $('a.tooltip').mouseover(function(e){ //把圖片的title屬性值儲存起來 this.myTitle=this.title; this.title="" //放大後圖片上的提示資訊 var imgTitle=this.myTitle ? "<br/>"+this.myTitle:""; //建立一個現實大圖片的DIV var tooltip = "<div id='tooltip'><img src='"+ this.href +"'alt='品牌預覽'/>"+imgTitle+"</div>"; //將建立的DIV添加到表單中去 $('body').append(tooltip); //設定顯示出來的圖片的位置 $('#tooltip') .css({ "top":(e.pageY+y)+"px", "left":(e.pageX+x)+"px"}) .show('fast'); //滑鼠移出事件 }).mouseout(function(){ //設回title值 this.title=this.myTitle; $('#tooltip').remove(); }).mousemove(function(e){ $('#tooltip') .css({ "top":(e.pageY+y)+"px", "left":(e.pageX+x)+"px"}); ; }); });</span> HTML代碼（結構）[html] <span style="font-size:18px;"><body> <p> <a href="images/apple_1_bigger.jpg" class="tooltip" title="蘋果 iPod"> <img src="images/apple_1.jpg" alt="蘋果 iPod"" /> </a> </p> <p> <a href="images/apple_2_bigger.jpg" class="tooltip" title="蘋果 iPod nano"> <img src="images/apple_2.jpg" alt="蘋果 iPod nano""/> </a> </p> <p> <a href="images/apple_3_bigger.jpg" class="tooltip" title="蘋果 iphone"> <img src="images/apple_1.jpg" alt="蘋果 iphone" </a> </p> <p> <a href="images/apple_4_bigger.jpg" class="tooltip" title="蘋果 Mac"> <img src="images/apple_4.jpg" alt="蘋果 Mac" /> </a> </p> </body></span> PS：1.在想得到元素pageX,pageY座標時，要先把元素的position設定absolute或relate，否則元素不會移動。 2.html()、text()、val()關係 我覺的應該一般是html()>text()>val()這樣的關係，它們都可以既擷取值又可以設定值，html()讀取設定元素整體值，text()為元素文本值，val()為元素value屬性值。 3.this指的是當前操作的DOM對象，它不能使用JQueryfangfa ,$(this)即把this由DOM轉為JQuery。 一個美觀的使用者互動介面，一般是由表現、結構、行為這三部分組成，CSS給一個固定、死板的結構化的HTML設計了美麗的外表，而JavaScript又給他們錦上添花，增加了動態效果，從而形成了動態網頁面。 一個網站往往是由很多個相互聯絡的動態網頁面以及資料庫伺服器組成，Web程式中與使用者直接互動的只是Web前台即頁面。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
