收藏本站投递资讯前端导航

前端资讯

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 1426|回复: 1

【一起学jQuery】第1节 jQuery核心!

[复制链接]
发表于 2012-12-19 15:12:11 | 显示全部楼层 |阅读模式
作者:bluewind
出处: http://qianduan.cc/
本文版权归作者和前端.CC共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。
本站JS讨论QQ群:11037109 ;如果你也对jQuery有着浓厚的兴趣或者有与JS有关的问题,请加入!

jQuery的核心是大家必须要学习的内容,下图是我写了一个简单的例子,大家先不要看我的源码,看看使用js是否能够做得出。

要求:
1)页面上有个按钮;
2)点击后弹出窗口,显示“我被点击了”;




JavaScript代码如下:

  1. <!DOCTYPE html>
  2. <html>
  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代码实现的上图方法
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>实例1</title>
  6.         <script language="javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  7.         <script language="javascript">
  8.                 $(function(){
  9.                         $("input").click(function(){
  10.                                 alert("前端.CC")
  11.                         })
  12.                 })
  13.                 </script>
  14.     </head>

  15.     <body>
  16.             <input type="submit" value="请点击我"/>
  17.     </body>
  18. </html>
复制代码
同学们可能会问demo1.js中的“$”符号表示什么呢?bluewind建议大家不要小看了它哟~~~因为jQuery 的核心功能都是通过这个函数实现的,以后编写的jQuery代码都是构建在这个函数上的,简单的说,就是都以某种方式在使用它。不过它为什么是个函数呢,明明就一个符号而已啊?


在此案例中,我简写了代码,他们的关系如下,区分大小写:
$等同于jQuery
$(document).ready()等同于jQuery(document).ready()
他们在例题中的意思都等同于js中的
onload()方法
click()表示鼠标点击事件,此事件日后会在详细讲解

看完上面的jQuery例子以后,可以发现其实我们可以把中的脚本独立拿出来,放在一个独立的js文件中,页面里引入这个js文件即可,这样做的优点可以使我们的HTML页面更加简单,不需要穿插复杂的js代码,从而使页面与脚本完美分离,是不是很神奇?

本节课,只需要你明白“$”符号是什么就OK了,在后面的学习中你会对他逐渐的熟悉~怎么样,是不是很简单?

【作业】
1、在页面中使用css定义一个长宽均为100px DIV红色区域
2、鼠标点击此红色区域,弹出对话框,至于对话框什么内容随便。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

发表于 2013-3-29 15:59:51 | 显示全部楼层
我终于找到一个可以真正的详细讲解Jquery的地方了.非常好,非常详细.以后就来学习了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则