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. JPA动态查询封装

    一.定义一个查询条件容器 /** * 定义一个查询条件容器 * * @param <T> */ public class Criteria<T> implements Spec ...

  2. 文件存储结构inode与RAM结构建立联系

    linux下一切皆文件,大致可分为以下几类:目录.普通文件.硬连接.软连接.字符设备.块设备.FIFO.Socket,其在物理存储体内存储按inode和数据块存储,inode代表元数据,是除实际数据外 ...

  3. hadoop_百科

    一.发音是:[hædu:p]. 二.简介:Hadoop是一个由Apache基金会所开发的分布式系统基础架构.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储 ...

  4. VMware虚拟机 Ubuntu 实用技巧 （1） -- 安装VMware Tool

    1.用VM安装Ubuntu后屏幕太小? 2.Ubuntu中的文本与window中的文本不能互相复制黏贴? 如果你遇到以上问题,可以通过在VMware里安装“VMware Tool”插件解决!! 安装步 ...

  5. jquery call 函数改变this作用域

    call的用法在许多地方都看到过介绍.可以用来改变函数的作用域. 在页面中我们在一个input中添加click事件 <input id="Button1" type=&quo ...

  6. hdu 4421(枚举+2-sat)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4421 思路:枚举32位bit,然后2-sat判断可行性,这里给出2-sat矛盾关系构图: 1.a&am ...

  7. Android开发：使用DialogFragment实现dialog自定义布局

    使用DialogFragment实现dialog的自定义布局最大的好处是可以更好控制dialog的生命周期. TestFragment的代码: public class TestFragment ex ...

  8. 三维空间直线最近点对hdu4741

    //求两条直线之间的关系(三维) //输入:两条不为点的直线 //输出:相交返回XIANGJIAO和交点p,平行返回PINGXING,共线返回GONGXIAN int LineAndLine(Line ...

  9. 【BZOJ3444】最后的晚餐 乱搞

    [BZOJ3444]最后的晚餐 Description [问题背景] 高三的学长们就要离开学校,各奔东西了.某班n人在举行最后的离别晚餐时,饭店老板觉得十分纠结.因为有m名学生偷偷找他,要求和自己暗恋 ...

  10. 1154 回文串划分(DP+Manacher)

    1154 回文串划分 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 有一个字符串S,求S最少可以被划分为多少个回文串. 例如:abbaabaa,有多种划分方式. ...