jquery api 常见 事件操作
change.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ready.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<select>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select> <script type="text/javascript">
//当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值
$("select").change(function(){
var $option = $("select option:selected");
var value = $option.val();
var html = $option.html();
alert(value+":"+html);
}); </script>
</body>
</html>
focus.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>focus.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<input type="text" value="加载页面时获取光标并选中所有文字" size="50"/>
<script type="text/javascript">
//加载页面时获取光标并选中所有文字
$(function(){
//将光标定位于文本框
var $text = $(":text");
//选中文本框中的内容
$text.select();
});
</script>
</body>
</html>
keyup.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>focus.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<script type="text/javascript">
//当按键弹起时，显示所按键的code码
$(document).keyup(function(){
//获取浏览器产生的事件对象，该事件对象，无需程序员代码创建，
//是每个浏览器自已产生的，即IE和firefox浏览器产生的事件
//对象可以不同。
var code = event.keyCode;
alert(code);
});
</script>
</body>
</html>
mousemove.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>focus.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body> X=<input type="text" id="xID"/>
<br/>
Y=<input type="text" id="yID"/> <script type="text/javascript">
$(document).mousemove(function(){
//显示鼠标移动时的X和Y座标
var x = event.clientX;
var y = event.clientY;
//将x和y坐标设置到文本框中
$("#xID").val(x);
$("#yID").val(y);
});
</script> </body>
</html>
mouseover_mouseout.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>focus.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<table border="2" align="center" width="80%" id="tableID">
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>26</td>
</tr>
<tr>
<td>周六</td>
<td>男</td>
<td>28</td>
</tr>
</table>
<hr/>
<img height="120px" src="../images/zgl.jpg" style="position:absolute;left:30%"/>
<img height="120px" src="../images/lb.jpg" style="position:absolute;left:60%"/>
<script type="text/javascript">
//鼠标移到某行上，某行背景变色，字体加租
$("table tr").mouseover(function(){
$(this).css("background-color","#AABBCC");
});
//鼠标移出某行，某行还原
$("table tr").mouseout(function(){
$(this).css("background-color","white");
});
//鼠标移到某图片上，为图片加边框
$("img").mouseover(function(){
$(this).css("border-style","ridge");
});
//鼠标移出图片，图片还原
$("img").mouseout(function(){
$(this).css("border-style","none");
});
</script>
</body>
</html>
ready.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ready.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<script type="text/javascript">
//定义a()和b()二个方法
function a(){
alert("a");
}
function b(){
alert("b");
}
/*使用DOM方式加载a()和b()二个方法
window.onload = function(){
a();
}
window.onload = function(){
b();
}
*/
/*使用jQuery方式加载a()和b()二个方法
$(document).ready(function(){
a();
});
$(document).ready(function(){
b();
});
*/ //使用jQuery最简方式加载a()和b()二个方法
$(function(){
a();
});
$(function(){
b();
});
</script>
</body>
</html>
submit.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ready.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<form action="submit.html" method="post">
<select>
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
</select>
<input type="submit" value="表单提交"/>
</form>
<script type="text/javascript">
//当表单提交前检测
$("form").submit(function(){
//..
return false;
});
</script>
</body>
</html>
jquery api 常见 事件操作的更多相关文章
- Jquery基础之事件操作
事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事 ...
- jquery api 常见api 元素操作例子
append_prepend.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
- jquery api 常见api 效果操作例子
addClass_removeClass_toggleClass_hasClass.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...
- jquery键盘常见事件
一.在看jquery的时候有几个常见的键盘事件,我写在这里: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来 ...
- selenium 常见事件操作
1.文本框输入内容 from selenium import webdriverdriver = webdriver.Chrome(r"C:\Users\Administrator\Desk ...
- Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- jQuery事件操作
bind绑定事件 bind(type,data,fn) [参数描述] type (String) : 事件类型 data (Object) : (可选) 作为event.data属性值传递给事件对象的 ...
- Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
- Hadoop基础-HDFS的API常见操作
Hadoop基础-HDFS的API常见操作 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本文主要是记录一写我在学习HDFS时的一些琐碎的学习笔记, 方便自己以后查看.在调用API ...
随机推荐
- 使用线程安全的 MSWeakTimer ，它不会对目标进行retain操作，避免循环引用
MSWeakTimer 简易翻译:该timer没有runloop概念,线程安全,没有循环引用现象. https://github.com/mindsnacks/MSWeakTimer Descript ...
- 操作系统的启动与引导问题 BIOS、UEFI、MBR、GPT
关于ISO.WIM.GHO三者的正确理解. ISO(Isolation)文件一般以ISO为扩展名,是复制光盘上全部信息而形成的镜像文件. WIM是英文Microsoft Windows Imaging ...
- oracle 表空间自己主动扩展大小
select a.FILE_NAME,a.AUTOEXTENSIBLE,a.MAXBYTES,a.INCREMENT_BY from dba_data_files a; --AUTOEXTENSI ...
- 数据库实例: STOREBOOK > 用户 > 编辑 用户: DBSNMP
ylbtech-Oracle:数据库实例: STOREBOOK > 用户 > 编辑 用户: DBSNMP 编辑 用户: DBSNMP 1. 一般信息返回顶部 1.1, 1.2, 2 ...
- 基于zabbix 的memached 多实例监控
基于zabbix 的memached 多实例监控 zabbix agentd 配置文件新增配置: UserParameter=memcached.server.discovery[*],ps uax ...
- [leetcode]Valid Number @ Python
原题地址:http://oj.leetcode.com/problems/valid-number/ 题意:判断输入的字符串是否是合法的数. 解题思路:这题只能用确定有穷状态自动机(DFA)来写会比较 ...
- 按示例学python：使用python抓取网页正文
平时打开一个网页,除了文章的正文内容,通常会有一大堆的导航,广告和其他方面的信息.本博客的目的,在于说明如何从一个网页中提取出文章的正文内容,而过渡掉其他无关的的信息. 这里先看看 demo : ht ...
- Quartz2D-二维画图引擎 、自己定义UI控件
// // MyDraw.m // 绘图 #import "MyDraw.h" @implementation MyDraw //Quartz2D 是一个二维绘图引擎 //自己定义 ...
- Terminix:基于 GTK3 的平铺式 Linux 终端模拟器
现在,你可以很容易的找到大量的 Linux 终端模拟器,每一个都可以给用户留下深刻的印象.但是,很多时候,我们会很难根据我们的喜好来找到一款心仪的日常使用的终端模拟器.这篇文章中,我们将会推荐一款叫做 ...
- CentOS 7.0 安装 ZCS 8.6.0
简介 Zimbra的核心产品是Zimbra协作套件(Zimbra Collaboration Suite,简称ZCS).除了它的核心功能是电子邮件和日程安排服务器,当然还包括许多其它的功能,就象是下一 ...