jQuery开发入门
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开发入门的更多相关文章
- 从零开始学习jQuery (一) 入门篇
本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些 ...
- jQuery的入门与简介
jQuery的入门与简介<思维导图> <初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我 ...
- jQuery UI 入门之实用实例分享
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- jQuery UI 入门之实用实例
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- spring boot + vue + element-ui全栈开发入门——开篇
最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...
- 第一百九十一节,jQuery EasyUI 入门
jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...
- PHP Web开发入门流程
在学习WEB开发前,至少有一个对C或者计算机编程任何一种语言的基本学习,这会对你以后的开发有一定的启蒙作用. 一.Web开发入门 推荐学习网址: http://www.w3school.com.cn/ ...
- day 48 jQuery快速入门
jQuery快速入门 jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...
- openresty 前端开发入门五之Mysql篇
openresty 前端开发入门五之Mysql篇 这章主要演示怎么通过lua连接mysql,并根据用户输入的name从mysql获取数据,并返回给用户 操作mysql主要用到了lua-resty-my ...
随机推荐
- Git使用技巧(2)-- 基本操作
常用 Git 命令清单 作者: 阮一峰 编辑更新:shifu204 日期: 2016年9月 1日 我每天使用 Git ,但是很多命令记不住. 一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练 ...
- Redis 哈希槽
Redis 集群中内置了 16384 个哈希槽,当需要在 Redis 集群中放置一个 key-value时,redis 先对 key 使用 crc16 算法算出一个结果,然后把结果对 16384 求余 ...
- 给linux操作系统安装中文环境
如果设置的默认环境是英文,需要安装中文环境.最简答的方法如下: sudo apt-get install language-pack-zh-hant sudo apt-get install lang ...
- OC 内存管理-01
创建对象 .分配内存空间,存储对象 .初始化成员变量 .反回对象的指针地址 //过程 ()对象在完成创建的同时,内部会自动创建一个引用计数器,这个计数器,是系统用来判断是否回收对象的唯一依据, 当我们 ...
- Web services 有两种类型的应用
可重复使用的应用程序组件 有一些功能是不同的应用程序常常会用到的.那么为什么要周而复始地开发它们呢? Web services 可以把应用程序组件作为服务来提供,比如汇率转换.天气预报或者甚至是语言翻 ...
- 模式识别之概率分布---平均分布,正态分布,一阶滑动和,一阶线性回归 C语言编程
http://wenku.baidu.com/view/11cb1669a98271fe910ef9c6.html
- vue 流程
1.vue 项目搭建 2.监听 3.组件 4.路由
- Laravel5.1 Middleware中间件(初级)
中间件?什么鬼? 大家第一次接触这个词都会有这么个疑问,但它其实没那么神秘. 一句话就可以解释它:过滤HTTP请求专用机制. 为什么要使用中间件? 过滤HTTP请求是可以写在别的地方,比如说控制器中 ...
- PowerDesigner 建模后如何导入到数据库
from:https://jingyan.baidu.com/article/7f766daf465e9c4101e1d0d5.html 大家都知道PowerDesigner是一个数据库建模工具,但是 ...
- "围观"设计模式(7)--创建型之单例模式(Singleton Pattern)
单例模式,也叫单子模式,是一种经常使用的软件设计模式.在应用这个模式时,单例对象的类必须保证仅仅有一个实例存在. 很多时候整个系统仅仅须要拥有一个的全局对象.这样有利于我们协调系统总体的行为.比方在某 ...