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 ...
随机推荐
- [翻译] FreeStreamer 在线流媒体播放
FreeStreamer https://github.com/muhku/FreeStreamer Introduction FreeStreamer is an audio player engi ...
- html调用servlet（JDBC在Servlet中的使用）（1）
1.页面的数据表单 在使用Servlet处理用户请求之前,先准备一个页面,该页面用来提供数据表单.数据表单就是HTML中的<form>...</form>部分,当用户单击Sub ...
- libjson 编译和使用 - 1. 编译
以下转自:http://blog.csdn.net/laogong5i0/article/details/8212511 最近想用box2dEdit来编辑一下比较复杂的图形然后倒入到自己有游戏里,但b ...
- VueJS如何引入css或者less文件的一些坑
我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢? 首先,引入公共样式时,我们在“main.js”里使用AMD的方式引入,即 requir ...
- Objective-C面向对象之实现类
一般涉及到面向对象都会C#,Java都不可避免的涉及到类,C#中类的后缀名是.cs,Java中是.java,Object-C中一般用两个文件描述一个类,后缀名为.h为类的声明文件,用于声明成员变量和方 ...
- Lambda表达式 简介 语法 示例 匿名内部类
在AS中使用 Lambda 表达式 Demo地址:https://github.com/baiqiantao/MultiTypeTest.git Gradle(Project级别)中添加classpa ...
- Loadrunner视频教程汇总
小布老师视频:测试工具概述,兼LoadRunner介绍 -1-4http://www.boobooke.com/v/bbk1046http://www.boobooke.com/v/bbk1046.z ...
- 让两个DIV的高度隐式同步
以前遇到两个相临近的块,高度要一样,但是内容多少又不定时,我都是通过把这两块封装在TD里面实现,但今天在CSDN上面看到有人要通过JS来实现这个,我尝试了一下.http://topic.csdn.ne ...
- http://www.cnblogs.com/snake-hand/p/3206655.html
1 public class MainActivity extends Activity { 2 3 private ListView listView; 4 private ArrayList< ...
- 【statistics】理想论坛2018-4-25日统计
说明:利用理想论坛爬虫1.07版(http://www.cnblogs.com/xiandedanteng/p/8954115.html) 下载了前十页主贴及子贴,共得到359619条数据,以此数据为 ...