作者laechan (揮淚斬馬雲)
看板mud_sanc
標題[閒聊] jQuery
時間Sat Nov 10 22:20:20 2018
這東西我剛摸，不是很懂，不過已經能寫一些東西。
首先，可以先去下載以下的東西
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="
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://webptt.com/m.aspx?n=bbs/mud_sanc/M.1541859623.A.0F3.html