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 ...
随机推荐
- eclipse 开发web程序，启动tomcat插件服务器的时候。部署目录在那里？
不在tomcat-home/webapps/下面, 你做一个文件上传功能看看就知道了,临时目录一般是你的工作区间workspace\.metadata\.plugins\org.eclipse.wst ...
- 解决Sqoop报错Could not load db driver class: com.intersys.jdbc.CacheDriver
报错栈: // :: INFO tool.CodeGenTool: Beginning code generation // :: ERROR sqoop.Sqoop: Got exception r ...
- EasyUI 常规用法
(function () { // 获取树的路径,如 组织分类 > YHBH > 湖南省卫生厅 > 湖南省长沙市 var getBreadcrumbs = funct ...
- OpenCV教程(41) 人脸特征检测
在OpenCV中,自带着Harr分类器人脸特征训练的文件,利用这些文件,我们可以很方面的进行人脸,眼睛,鼻子,表情等的检测. 人脸特征文件目录: ../opencv2.46/op ...
- 第二章 Jackson属性名转换+属性忽略
@Data @JsonIgnoreProperties(ignoreUnknown = true) public class MyRecord { private boolean succeed; p ...
- 微信小程序Nginx环境配置
环境配置概述 主要内容: SSL免费证书申请步骤 Nginx HTTPS 配置 TLS 1.2 升级过程 微信小程序要求使用 https 发送请求,那么Web服务器就要配置成支持 https,需要先申 ...
- OkHttp 官方Wiki【设计思想】
官方Wiki之Calls 原文位置:https://github.com/square/okhttp/wiki/Calls The HTTP client's job is to accept you ...
- 请教如何改善C#中socket通信机客户端程序的健壮性
我是做Socket的新手,最近做了一个Socket客户端程序,连接Server的时候,如果server存在,并且允许连接的话,程序无错,正常执行:但是如果Server不存在,或者拒绝连接,程序就会卡住 ...
- bind原理图释
(原文:http://blog.think-async.com/2010/04/bind-illustrated.html) 本文解释了bind 是如何工作的.为了清晰,我对图中的语法作了一些简化(例 ...
- statickeyword
static词义:静态的,可以用于修饰变量和方法,static方法块可以优先于构造函数运行. 被static修饰的变量,叫静态变量,静态变量在内存中仅仅有一份拷贝 public static Stri ...