DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> jQuery教程:jQuery的核心
jQuery教程:jQuery的核心
編輯:關於JavaScript     

網頁制作poluoluo文章簡介:jQuery教程:jQuery的核心.

大家先不要看我的源代碼,看看使用js是否能夠做得出

【例子】
要求:
1)頁面上一個按鈕;
2)點擊後彈出窗口,我被點擊了;


如下圖:


JavaScript代碼如下:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>實例1</title>
  6. <script>
  7. function myClick()
  8. {
  9. alert("我被點擊了!");
  10. }
  11. </script>
  12. </head>
  13. <body>
  14. <input type="submit" value="請點擊我" onclick="myClick();" />
  15. </body>
  16. </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、鼠標點擊此紅色區域,彈出對話框,至於對話框什麼內容隨便。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved