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. iOS_25_彩票骨架搭建+导航栏适配

    终于效果图: Main.storyboard 初始化的控制器是:导航控制器 它的根控制器是:TabBarController TabBarController的底部是一个自己定义的TabBar 里面加 ...

  2. socket demo程序

    package cn.example.socket; import java.io.BufferedReader; import java.io.IOException; import java.io ...

  3. socket心跳检测

    一.什么是心跳检测 判断对方(设备,进程或其它网元)是否正常动行,一般采用定时发送简单的通讯包,如果在指定时间段内未收到对方响应,则判断对方已经当掉.用于检测TCP的异常断开. 基本原因是服务器端不能 ...

  4. Python 安装 MaxMind GeoLite City

    1.先安装 geoip c library  geoip c library >= 1.4.6 installed on your machine. >= 1.4.6 installed ...

  5. DJI SDK iOS 开发之二：搭建主要的开发环境

    本文想介绍搭建主要的DJI SDK iOS下的开发环境,只是DJI官方已经给出了非常具体的执行其demo的教程.网址例如以下: https://dev.dji.com/cn/guide 我这里总结一下 ...

  6. 关于LNMP服务器 Thinkphp5验证码不显示问题

    关于LNMP服务器 Thinkphp5验证码不显示问题   浏览:246 发布日期:2017/09/20 分类:ThinkPHP5专区 关键字: thinkphp验证码不显示 nginx下验证码不显示 ...

  7. Oracle----oracle编程总结

    1,SEQUENCE的使用 问题:在MSSQL中,我们可以通过设置自增长来作为主键,但是oracle里面没有这个 解决方案:使用SEQUENCE来实现,具体步骤如下 (1)首先建立一个序列(就是每次查 ...

  8. svn备份一般采用三种方式

    http://www.cnblogs.com/itech/archive/2011/10/11/2206988.html 备份策略 ============== svn备份一般采用三种方式:1)svn ...

  9. 桥接模式和NAT模式差别

    bridged networking(桥接模式)      在这样的模式下.VMWare虚拟出来的操作系统就像是局域网中的一台独立的主机,它能够訪问网内不论什么一台机器. 在桥接模式下.你须要手工为虚 ...

  10. IOS 关于取消延迟执行函数的种种。performSelector与cancelPreviousPerformRequestsWithTarget

    本文非本人撰写     @interface NSObject (NSDelayedPerforming) - (void)performSelector:(SEL)aSelector withObj ...