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. BAT-使用BAT方法设置IP地址

    ::------以下为批处理文件内容---- @echo off ::set slection1= set/p slection1=请输入IP地址: netsh interface ip set ad ...

  2. Extjs中设置只读的样式问题

    废话不多说,直接上代码:   view.down('#imageFile').hide(); view.down('#save_button').hide(); view.show(); view.d ...

  3. Spring MVC多项单选按钮

    以下示例显示如何在使用Spring Web MVC框架的表单中使用多选按钮(RadioButton).首先使用Eclipse IDE来创建一个WEB工程,实现一个让用户可选择自己喜欢的数字的功能.并按 ...

  4. Java NIO(1)：迟迟登场的NIO

    Java NIO的出现 Java语言发展至今,优点大家有目共睹:面向对象的语言.简洁有效.高移植性等等.但是同样也存在很多缺点,C语言程序员口中Java太慢了,.net程序员口中Java太开放了,ph ...

  5. Android处理图片工具（转载）

    内容来源于http://www.cnblogs.com/TerryBlog/archive/2012/01/08/2316482.html package com.wireme.activity; i ...

  6. Laravel5.1 路由 -基础

    什么是路由? 大K简单的说下,路由是用户访问我们程序的一个入口,比方说 你在浏览器输入:www.myblogs.com/create 就会打开一个页面,我们接收到这一个请求后后台需要做一些事儿来反馈给 ...

  7. [Oracle] - Create DB on Oracle 12c for an Application

    Let's say we are going to develop a application for a bank, or any other enterprise, this applicatio ...

  8. CGI FastCGI PHP-CGI PHP-FRM

    CGI(Common GateWay Interface )通用网关接口,CGI可以让一个客户端,从网页浏览器向执行在Web服务器上的程序请求数据.CGI描述了客户端和这个程序之间传输数据的一种协议标 ...

  9. Unique Encryption Keys

    The security of many ciphers strongly depends on the fact that the keys are unique and never re-used ...

  10. 图片上传JS插件梳理与学习

    项目的oper端和seller端,用了两个不同插件,简单了解一下: 一.seller端:AjaxUpload.js seller端使用的是 AjaxUpload.js ,封装好的一个库.调用时传入参数 ...