jQuery是JavaScript库中的优秀一员。

下载完jQuery框架文件jquery-1.9.0.js 后，不需要任何安装，仅需使用<script>文件导入标记，将该框架文件导入页面中即可。假设该文件保存在项目文件夹WebContent的子文件js中，那么，在页面的<head></head>中加入如下代码：

<script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js"></script>

即可。

下面给出一个简单的jQuery程序。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Insert title here</title>

        <script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js"></script>

        <script type="text/javascript"> //以下三者基本等价，第二个最常用

            $(document).ready(function(){ //jQuery的写法

                //程序段   alert("hello ");

            })

            $(function(){ //jQuery的写法

                //程序段

            })

            window.onload=function(){ //JavaScript的写法

                //程序段

            }

        </script>

    </head>

    <body>

    </body>

</html>

前两个在页面框架下载完毕后就执行，而第三个必须在页面全部加载完毕后才能执行。

 

jQuery访问DOM对象（Document Object Model）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Insert title here</title>

        <script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js"></script>

        <script type="text/javascript">

            $(function(){

                var divTmp=document.getElementById("divTmp").innerHTML;//获取DOM对象中的内容

                var divTmp2=$("#divTmp").html();//获取jQuery对象中的内容      二者结果等价

            })

        </script>

    </head>

    <body>

        <div class="divFrame">

            <div id="divTmp">测试文本</div>

        </div>

    </body>

</html>

即，jQuery通过 $(“#id”) 获得相应对象。

对于获取对象中的内容或文本框的值等，JavaScript和jQuery采用的方法分别如下：

JavaScript：   var divTmp=document.getElementById("divTmp").innerHTML;

               document.getElementById("divTip").innerHTML="hello";

               var oTxtValue=document.getElementById("Text1").value;
jQuery：       var divTmp2=$("#divTmp").html();  //获取页面内容

               $("#divTip").html("hello");      //给页面赋予内容

               var oTxtValue2=$("#Text1").val();
               $("#id").val("world");

 

对于click函数，JavaScript和jQuery采用的方法分别如下：

JavaScript的方法：

<head>

    <script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js"></script>

    <script type="text/javascript">

        function btnClick(){

            //程序段

        }

    </script>

</head>

<body>

    <input type="button" value="提交" onclick="btnClick();"/>

</body>
jQuery的方法：

<head>

    <script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js"></script>

    <script type="text/javascript">

        $(function(){

            $("#btnSubmit").click(function(){

                //程序段

            })

        })

    </script>

</head>

<body>

    <input type="button" value="提交" id="btnSubmit"/>

</body>

jQuery开发入门的更多相关文章

  1. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  2. jQuery的入门与简介

    jQuery的入门与简介<思维导图>   <初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我 ...

  3. jQuery UI 入门之实用实例分享

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  4. jQuery UI 入门之实用实例

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  5. spring boot + vue + element-ui全栈开发入门——开篇

    最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...

  6. 第一百九十一节，jQuery EasyUI 入门

    jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...

  7. PHP Web开发入门流程

    在学习WEB开发前,至少有一个对C或者计算机编程任何一种语言的基本学习,这会对你以后的开发有一定的启蒙作用. 一.Web开发入门 推荐学习网址: http://www.w3school.com.cn/ ...

  8. day 48 jQuery快速入门

    jQuery快速入门   jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...

  9. openresty 前端开发入门五之Mysql篇

    openresty 前端开发入门五之Mysql篇 这章主要演示怎么通过lua连接mysql,并根据用户输入的name从mysql获取数据,并返回给用户 操作mysql主要用到了lua-resty-my ...

随机推荐

  1. PHP 高精度计算

    运行bcsub函数需要 php-bcmath的扩展. Php: BCMath bc是Binary Calculator的缩写.bc*函数的参数都是操作数加上一个可选的 [int scale],比如st ...

  2. 【转】Junit初体验

    Junit是用来做测试的,无论是单元测试,还是接口测试,都可以通过调用Junit来验证被调用方法的正确性.当然,要验证一个方法的正确性,还可以采用main方法,通过输出每一个result,人为比对其正 ...

  3. libsvm以概率输出单个test样例的判别结果

    在函数svmtrain和svmpredict的输入参数部分加入'-b 1'比如原先是 svmtrain -c 8.0 -g 0.0078125 a1a.scale 修改过后就是 svmtrain -b ...

  4. 在CentOS中安装输入法

    1.需要root权限,所以要用root登录 ,或su root 2.yum install "@Chinese Support" 3.exit 4.回到桌面,system-> ...

  5. java中訪问修饰符

    较之c++ 中 public,proctected, private 三种訪问控制, java多了默认訪问控制. java中四种訪问控制权限 简单描写叙述为一下四句: 1)private 仅本类可见 ...

  6. poj 1717==洛谷P1282 多米诺骨牌

    Dominoes Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6571   Accepted: 2178 Descript ...

  7. iOS响应超出View范围点击事件

    // 在view中重写以下方法,其中self.button就是那个希望被触发点击事件的按钮 - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent ...

  8. IOS开发复习笔记（4）-TableView

    总结几个TableView常用的代码 1.初始化方面 static string CellIndetifier=@"cellIndetifier"; -(NSInteger)num ...

  9. git的安装-环境变量配置

    windows安装git和环境变量配置 2015.10.12 评论(0) 10,729 点此嗨一下 Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git是一个开源 ...

  10. offset,scroll,client系列

    offsetHeight: 元素高,height+border+paddingoffsetWidth: 元素宽,width+border+paddingoffsetTop: 距离offsetParen ...