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 ...
随机推荐
- Java JDBC 基础知识
一.JDBC常用接口.类介绍 JDBC提供对独立于数据库统一的API,用以执行SQL命令.API常用的类.接口如下: DriverManager 管理JDBC驱动的服务类,主要通过它获取Connect ...
- sql查询前后两位
SQL排名的问题,A这个人在数据库里排第十,怎么查询一个他前面两位,后面两位,包括自己的五条数据,各位有啥高招? DECLARE @table TABLE ( id INT PRIMARY KEY , ...
- Maximum Likelihood Method最大似然法
最大似然法,英文名称是Maximum Likelihood Method,在统计中应用很广.这个方法的思想最早由高斯提出来,后来由菲舍加以推广并命名. 最大似然法是要解决这样一个问题:给定一组数据和一 ...
- Maven中<dependencies>节点和<dependencyManagement>节点的区别
dependencyManagement只是插件管理,并不是真正的插件依赖,所以里面包含的插件在没有子项目使用的时候,并不会真正下载 1 ．使用项目继承 利用项目继承可以将结构信息,部署信息,共同的依 ...
- Largest Rectangle in Histogram leetcode java
题目: Given n non-negative integers representing the histogram's bar height where the width of each ba ...
- 【ES】elasticsearch学习笔记
ES学习 1 优势 1.1 简单 1.1.1 相比Solor配置部署等非常简单 1.2 高效 1.2.1 ES使用Netty作为内部RPC框架,Solor使用Jetty 1.3 插件化 1.3.1 E ...
- 直接修改class文件内容即使是文本会导致App异常，正确方式是修改java再用生成的class替换掉原有的class
前几天来了个小任务,把某项目中某人的邮件地址改了下. 由于对项目不熟悉,于是采用find方式找出app中所有包含某人邮件地址的文件都找出来了. xml,properties大约三四个,还有两个clas ...
- 100款免费的旅游素材（PSD）
本地下载 素材一直都是网页设计者们大爱,不同的类型和设计总能带给人们新鲜感.今天带来的这100个免费的旅行素材,PSD格式,可以自定义色彩.一定可以带给你们非常惊喜!
- 帝吧fb出征是什么原因？帝吧fb出征事情始末 帝吧出征FB打“台独” 台湾网民崩溃：巨人之墙爆了
帝吧出征FB打"台独" 台湾网民崩溃:巨人之墙爆了 发表时间:2016-01-20 21:08:10 字号:A-AA+ 关键字: 帝吧帝吧出征FB帝吧出征FB打台独台独脸书巨人之墙 ...
- less 命令(转)
原文:http://www.cnblogs.com/peida/archive/2012/11/05/2754477.html less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux ...