網頁制作poluoluo文章簡介:jQuery教程:jQuery的核心.
大家先不要看我的源代碼,看看使用js是否能夠做得出
【例子】
要求:
1)頁面上一個按鈕;
2)點擊後彈出窗口,我被點擊了;
如下圖:
JavaScript代碼如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>實例1</title>
- <script>
- function myClick()
- {
- alert("我被點擊了!");
- }
- </script>
- </head>
- <body>
- <input type="submit" value="請點擊我" onclick="myClick();" />
- </body>
- </html>
然而jQuery與此類似,但是在HTML頁中不必填寫onclick="myClick();" 事件調用myClick()方法,只需要引入jQuery類庫以及自己編寫的jQuery代碼即可。
下面是我的jQuery代碼實現的上圖方法
看完上面的jQuery例子以後,可以發現其實我們什麼都不用在HTML頁面中寫,只需引入相關的js文件即可,這樣做的優點可以使我們的HTML頁面更加簡單,不需要穿插復雜的js代碼,從而使頁面與腳本完美分離,是不是很神奇?
注:例題中的<script language="javascript" charset="GB2312" src="js/demo1.js"></script>加入了charset="GB2312"是為了使其能夠正確的顯示中文,因為jQuery是utf-8編碼。
同學們可能會問demo1.js中的“$”符號表示什麼呢?KwooShung建議大家不要小看了它喲~~~因為jQuery 的核心功能都是通過這個函數實現的,以後編寫的jQuery代碼都是構建在這個函數上的,簡單的說,就是都以某種方式在使用它。不過它為什麼是個函數呢,明明就一個符號而已啊?
在此案例中,我簡寫了代碼,他們的關系如下,區分大小寫:
$等同於jQuery
$(document).ready()等同於jQuery(document).ready()
他們在例題中的意思都等同於js中的
onload()方法
click()表示鼠標點擊事件,此事件日後會在詳細講解
本節課,只需要你明白“$”符號是什麼就OK了,在後面的學習中你會對他逐漸的熟悉~
怎麼樣,是不是很有意思?
【作業】
1、在頁面中使用css定義一個長寬均為100px DIV紅色區域
2、鼠標點擊此紅色區域,彈出對話框,至於對話框什麼內容隨便。