学习jquery基础的一点笔记

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-02 05:20 点击:

最近用到了jquery 就自己学习了一下,这里是入门的时候自己做的一些笔记(参考3wschool)。还有一些自己写的简单的练习代码

一、三种不同的加载jquery文件的方法
1.本地文件(要提前将js文件下载下来)加载<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  一般有两份 jQuery 拷贝可供下载,一是缩小版(由 Google Closure Compiler),另一个是未压缩版(供 debugging 或 reading)

可以到http://download.csdn.net/source/3561704下载
2.加载Google 的 CDN<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
3.加载Microsoft 的 CDN<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
二、jquery的使用(推荐格式)
1.把所有 jQuery 代码置于事件处理函数中
2.把所有事件处理函数置于文档就绪事件处理器中
3.若文件很大把 jQuery 代码置于单独的 .js 文件中

如下一段代码(将这段代码保存一个html后缀名的文件就可以看到他的效果了):
<html>
   <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
      <script type="text/javascript">
          $(document).ready(function(){  --文档就绪事件处理器,防止文档在完全加载(就绪)之前运行 jQuery 代码。这个是以后都要用到的
              $("p").click(function(){  --事件处理函数,根据自己的需要去调用相应的函数
                  $(this).hide();  --具体要执行的动作
       });
          });
      </script>
   </head>
   <body>
      <p>If you click on me, I will disappear.</p>
   </body>
</html>

三、jquery使用的语法
基础语法是:$(selector).action()
    1.美元符号定义 jQuery
    2.选择符(selector)“查询”和“查找” HTML 元素
    3.jQuery action() 执行对元素的操作
例如:$(this).hide() - 隐藏当前元素


四、jquery的选择器:$()
  1.元素选择器
  2.属性选择器
  3.css选择器

 

五、jquery的事件
  1.jQuery 事件处理函数是 jQuery 中的核心函数。事件处理函数是当 HTML中发生事件时自动被调用的函数
  2.事件添加的不同,如上面的例子对<p>元素的单击事件的调用
  3.记着要特别注意将事件处理放在文档就绪事件处理器中

 

然后自己写了一些练习的代码,都是最基础的。


Html代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=gbk"> 
        <title>Selector</title> 
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
        <link href="select.css" rel="stylesheet" type="text/css"> 
        <script type="text/javascript"> 
            $(document).ready(f

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • Gb2312转utf-8编码的方法(vbs+js)
    • 如何使用Ajax技术开发Web应用程序(1)
    • js跳转路径问题
    • JavaScript模仿桌面窗口
    • 用js检测两个线段是否相交
    • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
    • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
    • 我是如何去了解jquery的(六),案例之幻灯片轮换
    • Jquery封装幻灯片效果
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1