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 ...
随机推荐
- libubox组件（1）——usock
一:相关API介绍 1.相关源码文件:usocket.h usocket.c 2.类型标志 1: #define USOCK_TCP 0 2: #define USOCK_UDP 1 3: #defi ...
- Linux下printf函数显示不同的颜色（转）
Linux下printf函数显示不同的颜色 在学习Linux网络编程的时候做一个聊天系统,当时为了界面更漂亮点,于是搜索了下关于printf()函数的用法,给printf的输出加上些特效比如颜色,可以 ...
- Pairs Forming LCM 在a,b中(a,b<=n)(1 ≤ n ≤ 10^14),有多少组(a,b) (a<b)满足lcm(a,b)==n; lcm(a,b)=p1 ^ max(a1,b1) * p2 ^ max(a2,b2) *..........*pn ^ max(an,bn)
转自:http://www.cnblogs.com/shentr/p/5285407.html http://acm.hust.edu.cn/vjudge/contest/view.action?ci ...
- 基于springCloud的分布式架构体系
Spring Cloud作为一套微服务治理的框架,几乎考虑到了微服务治理的方方面面,之前也写过一些关于Spring Cloud文章,主要偏重各组件的使用,本次分享主要解答这两个问题:Spring Cl ...
- easyui最简单的左右布局实现，及tab的右键菜单实现
发现最近有些人问用JQuery easyui要怎么实现左右结构的布局.就是点击左边的菜单在右边的tab中打开.其实easyui要实现这种布局很简单,只需要简单的几行代码就ok了. 特意做了一个小小的d ...
- springmvc 环境配置图
- php 批量处理post数据
<?php header("Content-Type:text/html;charset=UTF-8"); include('ini.php'); foreach ($_PO ...
- Spring 入门之-dao使用jdbcTemplate（注入过程）
技巧:在为把dataSourc连接池注入到jdbcTemplate里面时,学到一招:按住CTRL 不松,点击相关类名,可以自动跳转或打开. 说明:主要过程, 1.创建UserDao和UserServi ...
- wpf数据绑定更新通知
类似于这样子的;大致的意思是:一个代码变量,通过改变变量的值,绑定这个变量的这个圆颜色也在变化 就是一种心跳效果 在网上数据触发的感觉不多,废了不少时间,这里做个总结 1:通知 class Notif ...
- eclipse 解决编译出现GBK或UTF8 编码错误的方法
eclipse由于开源所以支持了比较杂的编码方式,而这些一个工程导入时添加了不少的外来程序,由于不是同一工程一次编码带来了其中含有GBK和 UTF8 UTF16 ASCII等文件编译时就会出现错 ...