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 ...
随机推荐
- Python的open函数
打开一个文件并向其写入内容 Python的open方法用来打开一个文件.第一个參数是文件的位置和文件名称.第二个參数是读写模式.这里我们採用w模式,也就是写模式.在这样的模式下,文件原有的内容将会被删 ...
- PHPstorm配置远程及本地服务器
首先打开PHPStorm的设置. 找到如下页面 OPEN一个项目,路径为XAMPP的安装路径 选择Local or mounted folder 设置以上属性,upload/download proj ...
- python 类成员的修饰符
类的所有成员在上一步骤中已经做了详细的介绍,对于每一个类的成员而言都有两种形式: 公有成员,在任何地方都能访问 私有成员,只有在类的内部才能方法 私有成员和公有成员的定义不同:私有成员命名时,前两个字 ...
- hdu5334(2015多校4)--Virtual Participation（构造）
题目链接:pid=5334">点击打开链接 题目大意:给出一个数字k,要求做出一个长度小于等于10^5的序列.该序列中不同样的连续子序列有k个. 构造啊,.,,,,一点辙都没有 使用连 ...
- VS+mysql+EF搭建
2016年7月6日更新: vs2010只需要安装mysql的.net connector就可以 vs2012, vs2015都需要安装.net connector + ODBC connector才行 ...
- ios应用，64位问题，Missing 64-bit support
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmFyb25fYmxvZ3M=/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- Android开发：fragment将事件传递回activity
fragment触发事件后传递会给activity,可以通过在fragment中定义一个接口,让activity实现这个接口. 具体代码如下 public class AAFragment exten ...
- python学习【第二篇】初识python
python的安装 windows 1.下载安装包 https://www.python.org/downloads/ 2.安装 默认安装路径:C:\python27 3.配置环境变量 [右键计算机] ...
- Uva10972(RevolC FaeLoN)
题目链接:传送门 题目大意:给你一副无向图,问至少加多少条边使图成为边双联通图 题目思路:tarjan算法+缩点(如果已经是双连通图就直接输出0) #include <iostream> ...
- 32位Win7下安装与配置PHP环境（一）
运行PHP网站,主要需要安装.配置三个软件,Apache.PHP和MySQL.如果需要编辑调试PHP程序,还要安装一个编辑调试软件. 一. Apache Apache是和IIS类似的一个软件,是运行在 ...