zoukankan      html  css  js  c++  java
  • JQuery从头学起第一讲

    作者:绝地苍狼 

      JQuery的重要性对一个coder来说应该是不言而喻的,  多少次在应聘的时候被问及是否会JQuery;多少次在写脚本的时候因为浏览器的不兼容而吐血;多少次因为需要用脚本做一个简单的效果而写到手抽筋。JQuery出现后,很多问题都被轻易解决了。

       每学一样东西的时候,我们总是喜欢去了解下它的历史。既然是从头学起,我们也来稍微了解下它的历史。

     jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer, 罗马尼亚的Stefan Petre等等。

      jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是—— WRITE LESS,DO MORE,写更少的代码,做更多的事情。

      它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。

      jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

      jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有 许多成熟的插件可供选择。

      jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html 里面插入一堆js来调用命令了,只需定义id即可。

    下面开始我们第一个DEMO,我们根据DEMO来讲解,第一讲我们只做简单的介绍,不做深入的讲解分析。如果需要提供源码的网友可以加入群:34979719

    代码
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery_1._Default" %>

    <!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 runat="server">

    <title></title>

    <script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>

    <script type="text/javascript">

    alert(
    "hello world");

    </script>

    <script type="text/javascript">

    $(document).ready(function(){

    alert(
    "hello world again");

    });

    </script>

    <script type="text/javascript">

    function f1() {

    alert(
    "hello world again again");}

    </script>

    </head>

    <body onload="f1();">

    <form id="form1" runat="server">

    <div>



    </div>

    </form>

    </body>

    </html>

          从上面的DEMO1中可以看出要用JQuery必须先引用一个JQuery包,JQuery包的下载地址附上

    压缩版:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=<SPAN>Download<%2FSPAN>

    未压缩版:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js 

         以上下载的JQuery包版本是1.3.2的,最新的JQuery的包已经到1.42了,各位网友如果想尝鲜可以自己去下载。目前我们讲的主要还是1.3.2版本的

            引入JQuery包后,我们可以开始写我们的脚本程序了,从例子的运行效果可以看出,页面在加载后会依次弹出:“hello world”、“hello world again”、“hello world again again”,效果相同。第一个和第三个是传统的JS,第二个是JQuery程序。如果把<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>这行去掉,运行后会提示:$ is not defined。

    $号是 jQuery “类”(jQuery "class")的一个别称,因此$()构造了一个新的jQuery 对象(jQuery object)。$()是选择器,$(document)构造了一个JQuery的document对象。函数 ready () 是这个jQuery对象的一个方法,DOM载入后开始执行该方法的事件,DEMO中该事件触发时执行了它所提供的alert方法。JQuery的方法都以一对小括号()括起来,括号后面加分号。

    今天就讲这么多,不好的地方希望各位网友可以谅解,也希望各位网友踊跃讨论,及时指正。下一讲我们会讲JQuery的选择器,JQuery是如何来获得控件值的。

  • 相关阅读:
    LInux 安装 MySQL
    JS BUG 传递数字过大,数据值会变化
    tabs 标签样式
    【异常】IOException parsing XML document from class path resource [xxx.xml]
    云服务器启动tomcat巨慢,很慢
    Linux修改/etc/profile配置错误command is not found自救方法
    linux 安装 vsftpd服务
    为什么说 Vue 的响应式更新比 React 快
    在idea中使用git拉去最新代码并merge到本地代码中
    解决重新打开一个项目,idea需要重新配置maven的问题
  • 原文地址:https://www.cnblogs.com/_fyz/p/1770369.html
Copyright © 2011-2022 走看看