jQuery是JavaScript库中的优秀一员。

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

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

即可。

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6.  
  7. <script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js"></script>
  8.  
  9. <script type="text/javascript"> //以下三者基本等价,第二个最常用
  10. $(document).ready(function(){ //jQuery的写法
  11. //程序段 alert("hello ");
  12. })
  13.  
  14. $(function(){ //jQuery的写法
  15. //程序段
  16. })
  17.  
  18. window.onload=function(){ //JavaScript的写法
  19. //程序段
  20. }
  21. </script>
  22. </head>
  23.  
  24. <body>
  25.  
  26. </body>
  27. </html>

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

 

jQuery访问DOM对象(Document Object Model)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6.  
  7. <script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js"></script>
  8.  
  9. <script type="text/javascript">
  10. $(function(){
  11. var divTmp=document.getElementById("divTmp").innerHTML;//获取DOM对象中的内容
  12. var divTmp2=$("#divTmp").html();//获取jQuery对象中的内容 二者结果等价
  13. })
  14. </script>
  15.  
  16. </head>
  17. <body>
  18. <div class="divFrame">
  19. <div id="divTmp">测试文本</div>
  20. </div>
  21. </body>
  22. </html>

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

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

  1. JavaScript var divTmp=document.getElementById("divTmp").innerHTML;
  2. document.getElementById("divTip").innerHTML="hello";
  3. var oTxtValue=document.getElementById("Text1").value;
  1. jQuery var divTmp2=$("#divTmp").html(); //获取页面内容
  2. $("#divTip").html("hello"); //给页面赋予内容
  3. var oTxtValue2=$("#Text1").val();
  1. $("#id").val("world");

 

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

  1. JavaScript的方法:
  2. <head>
  3. <script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js"></script>
  4.  
  5. <script type="text/javascript">
  6. function btnClick(){
  7. //程序段
  8. }
  9. </script>
  10. </head>
  11. <body>
  12. <input type="button" value="提交" onclick="btnClick();"/>
  13. </body>
  1. jQuery的方法:
  2. <head>
  3. <script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js"></script>
  4.  
  5. <script type="text/javascript">
  6. $(function(){
  7. $("#btnSubmit").click(function(){
  8. //程序段
  9. })
  10. })
  11. </script>
  12. </head>
  13. <body>
  14. <input type="button" value="提交" id="btnSubmit"/>
  15. </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. Git使用技巧(2)-- 基本操作

    常用 Git 命令清单 作者: 阮一峰 编辑更新:shifu204 日期: 2016年9月 1日 我每天使用 Git ,但是很多命令记不住. 一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练 ...

  2. Redis 哈希槽

    Redis 集群中内置了 16384 个哈希槽,当需要在 Redis 集群中放置一个 key-value时,redis 先对 key 使用 crc16 算法算出一个结果,然后把结果对 16384 求余 ...

  3. 给linux操作系统安装中文环境

    如果设置的默认环境是英文,需要安装中文环境.最简答的方法如下: sudo apt-get install language-pack-zh-hant sudo apt-get install lang ...

  4. OC 内存管理-01

    创建对象 .分配内存空间,存储对象 .初始化成员变量 .反回对象的指针地址 //过程 ()对象在完成创建的同时,内部会自动创建一个引用计数器,这个计数器,是系统用来判断是否回收对象的唯一依据, 当我们 ...

  5. Web services 有两种类型的应用

    可重复使用的应用程序组件 有一些功能是不同的应用程序常常会用到的.那么为什么要周而复始地开发它们呢? Web services 可以把应用程序组件作为服务来提供,比如汇率转换.天气预报或者甚至是语言翻 ...

  6. 模式识别之概率分布---平均分布,正态分布,一阶滑动和,一阶线性回归 C语言编程

    http://wenku.baidu.com/view/11cb1669a98271fe910ef9c6.html

  7. vue 流程

    1.vue 项目搭建 2.监听 3.组件 4.路由

  8. Laravel5.1 Middleware中间件(初级)

    中间件?什么鬼? 大家第一次接触这个词都会有这么个疑问,但它其实没那么神秘. 一句话就可以解释它:过滤HTTP请求专用机制. 为什么要使用中间件? 过滤HTTP请求是可以写在别的地方,比如说控制器中 ...

  9. PowerDesigner 建模后如何导入到数据库

    from:https://jingyan.baidu.com/article/7f766daf465e9c4101e1d0d5.html 大家都知道PowerDesigner是一个数据库建模工具,但是 ...

  10. &quot;围观&quot;设计模式(7)--创建型之单例模式(Singleton Pattern)

    单例模式,也叫单子模式,是一种经常使用的软件设计模式.在应用这个模式时,单例对象的类必须保证仅仅有一个实例存在. 很多时候整个系统仅仅须要拥有一个的全局对象.这样有利于我们协调系统总体的行为.比方在某 ...