作者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/cn.aspx?n=bbs/mud_sanc/M.1541859623.A.0F3.html