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 ...
随机推荐
- Maintenance Plans(维护计划)详解【转】
最近试用了下 Sql Server 2008 的 Maintenance Plans( 维护计划 ),感觉很不错很不错.一贯的延续了微软的风格,图形化界面操作,保准你掌握了这个,就能成为半个DB ...
- OpenCV学习(35) OpenCV中的PCA算法
PCA算法的基本原理可以参考:http://www.cnblogs.com/mikewolf2002/p/3429711.html 对一副宽p.高q的二维灰度图,要完整表示该图像,需要m = ...
- Navicat Premium 12全系列
Navicat 是香港卓软数码科技有限公司生产的一系列 MySQL.MariaDB.Oracle.SQLite.PostgreSQL 及 Microsoft SQL Server 的图形化数据库管理及 ...
- Android数据适配-ExpandableListView
Android中ListView的用法基本上学的时候都会使用,其中可以使用ArrayAdapter,SimpleAdapter,BaseAdapter去实现,这次主要使用的ExpandableList ...
- vue-router路由模式详解
一.路由模式解析 要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置. 如果有进行过服务器开发或者对http协议有所了解就会知 ...
- [置顶] hdu 4418 高斯消元解方程求期望
题意: 一个人在一条线段来回走(遇到线段端点就转变方向),现在他从起点出发,并有一个初始方向, 每次都可以走1, 2, 3 ..... m步,都有对应着一个概率.问你他走到终点的概率 思路: 方向问 ...
- Service具体解释（二）：Service生命周期
< Service具体解释(一):什么是Service> < Service具体解释(二):Service生命周期> <Service具体解释(三):Service的使用 ...
- （LeetCode74）Search a 2D Matrix
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
- Python批量处理CSV文件
#encoding: utf-8 __author__ = 'DELL' import csv import glob import datetime import sys import os rel ...
- cpu访址能力和内存
这里有两个概念:cpu访址能力和提供的内存.举例来说,有个灯泡,可以照亮100立方米的空间,只有照亮的空间才可以工作.假如现在的空间只有50立方米,只要增加空间,可工作的空间就增加了.如果当前已经是1 ...