[閒聊] jQuery

看板mud_sanc (Sanctuary - 聖殿)作者laechan (揮淚斬馬雲)時間7年前 (2018/11/10 22:20)推噓0(0推 0噓 0→)

留言0則, 0人參與討論串1/4 (看更多)

這東西我剛摸，不是很懂，不過已經能寫一些東西。首先，可以先去下載以下的東西 http://code.jquery.com/jquery-2.2.3.min.js 或是以下的東西 http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js 它們其實大同小異，重點是下載下來之後，放到特定目錄，我通常就放在與寫 jQuery 的網頁檔相同的目錄，然後存檔為 jquery.min.js 這時網頁檔的前頭部份就可以這樣寫 <script src="jquery.min.js"></script> 可以當成是 #include "jquery.min.js" 或 import jquery.min.js 的意思，js 檔其實內容就一般的文字檔。 (這意思就是說，某些自己常用的東西其實也可以編成這類的檔案) 然後就可以寫以下的東西: <script type="text/javascript"> $(document).ready(function(){ $("#test").click(function(){ alert("hello world!"); }); }); <a id="test" href="">click me</a> </script> 上面的 html 檔以瀏覽器打開後，會看到 click me 的超連結，點擊它(click)，就會跳出一個 hello world! 的小視窗。上面那一大串其實可以用更直覺的寫法如下: <script type="text/javascript"> function clickme() { alert("hello world!"); } <a href="" onclick="clickme()'>click me</a> </script> 作用是一樣的，不過它們之間有著決定性的幾個微妙差異，而其差異之一就是我想要的東西--如何寫得讓人沒辦法一看就懂。結果知道怎麼看 jquery 的東西後，反而有個東西我可能也得搞熟才行就是 css，而搞熟 css 的好處，就是可以把包含 jquery 的 html 檔寫得更讓人看不懂XD (css 有很多屬性都符合這個特性) 這其實蠻有意思的，等我有寫出一支不錯的 html 時，我大概會找同事實驗看看呵... 以下是網路上找到的一支程式 https://gist.github.com/artlung/386498 <script src="" rel="nofollow">http://.../jquery.min.js"></script> <script type="text/javascript"> var new_num = 40; // global variable jQuery(document).ready(function(){ http://api.jquery.com/css/ $('p').css({border: '5px solid red', color: 'green', padding: '20px'}); // http://api.jquery.com/bind/ // http://api.jquery.com/css/ // http://api.jquery.com/text/ $('#countme').css({ margin: '0 auto', backgroundColor: '#ccc', textAlign: 'center', fontSize: '40px' }).bind('click mousemove', function(){ var current = parseInt($(this).text(), 10); new_num = new_num + 1 $(this).text(current+1).css({fontSize: new_num+'px'}) }); }); </script> </head> <body> <p>Hello</p> <p>World</p> <div id="countme">0</div> 以 id=countme 那個來說，上面相當於它有一個 onMove 的東西，當滑鼠在 <div>...</div> 那一區移動時就會觸發去做一些事情，例如會顯示"移動次數"，而且隨著移動次數越多，該次數顯示字樣的 fontSize 就會越大，光是 $(this) 可以這樣用就超猛了，更不用說連 .text(直接改內文).css(再直接改樣式) .. 我之前是看不懂上面在寫啥的，現在是稍微看得懂了，但是對 css 完全沒概念的人則保證看不懂科.. -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 122.117.106.224 ※ 文章網址: https://www.ptt.cc/bbs/mud_sanc/M.1541859623.A.0F3.html