fengxu0706
- 浏览: 15636 次
-
最新评论
一、处理表单元素的值
1、val()方法，可以获取表单元素中被选中项的value值，如果没有设置value值则获取其显示的文本值，在处理<select>时，用val()可以直接获取value值，而不需要考虑是单选下拉菜单还是多选下拉菜单。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>val()方法</title>
<style type="text/css">
<!--
select, p, span{
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function displayVals(){
//直接获取选中项的value值
var singleValues = $("#constellation1").val();
var multipleValues = $("#constellation2").val() || []; //因为存在不选的情况
$("span").html("<b>Single:</b> " + singleValues + "<br><b>Multiple:</b> " + multipleValues.join(", "));
}
$(function(){
//当修改选中项时调用
$("select").change(displayVals);
displayVals();
});
//2.设置表单元素的值
function setVal(){
$("input[type=button]").click(function(){
var buttonValue = $(this).val();
$("input[type=text]").val(buttonValue);
});
}
</script>
</head>
<body>
<span></span><br>
<form method="post" name="myForm1">
<p>
<select id="constellation1">
<option value="Aries">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">双子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">狮子</option>
<option value="Virgo">处女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">双鱼</option>
</select>
<select id="constellation2" multiple="multiple" style="height:120px;">
<option value="Aries">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">双子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">狮子</option>
<option value="Virgo">处女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">双鱼</option>
</select>
</p>
</form>
<p><input type="button" value="Feed">
<input type="button" value="the">
<input type="button" value="Input"></p>
<p><input type="text" value="click a button"></p>
<a href="#" onclick="setVal();"><p>2.设置表单元素的值</p></a>
</body>
</html>
二、处理页面中的事件
1、绑定事件监听
bind()方法的通用语法为：bind(eventType,[data],Listener)，其中eventType为事件的类型，可以是blur，focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,
mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error。data为可选参数，用来传递一些特殊的数据供监听函数使用，而Listener为事件监听函数。对于多个事件类型，可以同时添加在eventType中，事件之间用空格分离。
$("p").bind("mouseenter mouseleave",function(){
$(this).toggleClass("over");
});
一些特殊的事件类型可以直接利用事件名称作为绑定函数，如
$("p").click(function(){
.......
});
其通用语法为：eventTypeName(fn);可以使用eventTypeName包括blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,
change,select,submit,keydown,keypress,keyup,error等。
（2）one()方法，该方法绑定的事件触发了一次之后会自动删除，不再生效。
2.移除事件监听
unbind()方法，移除事件监听
$("div").unbind();移除<div>标记的所有事件。
$("p").unbind("click");删除<p>标记的所有单击事件。
$("p").unbind("click",fn);移除某个指定事件。
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>bind()</title>
<style type="text/css">
<!--
img{
border:1px solid #000000;
}
div{
border:1px solid #000000;
background:#fffd77;
height:50px; width:50px;
padding:8px; margin:5px;
text-align:center;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
float:left;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
//1.绑定监听事件
function listener(){
$("img").bind("click",fn = function(){
$(document.body).append("<div>点击事件1</div>");
}).bind("click",function(){
$(document.body).append("<div>点击事件2</div>");
}).bind("click",function(){
$(document.body).append("<div> 点击事件3</div>");
});
}
//2.one()方法，触发一次之后就失效（自动删除）
function one(){
for(var i = 0; i < 10; i++)
$(document.body).append("<div>Chick<br>Me!</div>");
var count = 1;
$("div").one("click",function(){
$(this).css({background:"#8f0000", color:"#FFFFFF"}).html("Clicked!<br>" + (count++));
});
}
//3.移除事件监听函数
function removeListener(){
$("img").unbind("click",fn);
}
</script>
</head>
<body>
<img src="11.jpg">
<a href="#" onclick="listener();"><p>1.绑定监听事件</p></a>
<a href="#" onclick="one();"><p>2.one()方法，触发一次之后就失效（自动删除）</p></a>
<input type="button" value="3.移除事件监听函数" onclick="removeListener();">
</body>
</html>
3.传递事件对象
| 属性/方法 | 说明 |
| altKey | 按下Alt键则为true，否则为false |
| ctrlKey | 按下Ctrl键则为true，否则为false |
| keyCode | 对于keyup和keydown事件，返回按键的值（即“a”和“A”的值是一样的，都是65） |
| pageX，pageY | 鼠标指针在客户端区域的坐标，不包括工具栏、滚动条等 |
| relatedTarget | 鼠标事件中鼠标指针所进入或离开的元素 |
| screenX，screenY | 鼠标指针相对于整个计算机屏幕的坐标值 |
| shiftKey | 按下Shift键则为true，否则为false |
| target | 引起事件的元素/对象 |
| type | 事件的名称，如click、mouseover等 |
| which | 键盘事件中为按键的Unicode值，鼠标事件中代表按键的值（1为左键、2为中键、3为右键） |
| stopPropagation() | 阻止事件向上冒泡 |
| preventDefault() | 阻止事件的默认行为 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>事件对象</title>
<style type="text/css">
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin:0px; padding:5px;
}
p{
background:#ffe476;
margin:0px; padding:5px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("p").bind("click",function(e){
var sPage = "(" + e.pageX + "," + e.pageY + ")";
var sScreen = "(" + e.screenX + "," + e.screenY + ")";
$("span").html("<br>Page:" + sPage + "<br>Screen:" + sScreen);
});
});
</script>
</head>
<body>
<p>Click Me!</p>
<span></span>
</body>
</html>
4.触发事件
trigger(eventType)方法来实现事件的触发，其中参数eventType为合法的事件类型，例如click、submit等。对于特殊的事件类型，如blur、change、click、focus、select和submit等还可以直接以事件名称作为触发函数 $("input:eq(0)").click();
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>事件触发</title>
<style type="text/css">
<!--
input{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin:0px; padding:4px;
border:1px solid #002b83;
}
div{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; margin:2px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function Counter(oSpan){
var iNum = parseInt(oSpan.text()); //获取span中本身的值
oSpan.text(iNum + 1); //点击次数加1
}
$(function(){
$("input:eq(0)").click(function(){
Counter($("span:first"));
});
$("input:eq(1)").click(function(){
Counter($("span:last"));
$("input:eq(0)").trigger("click"); //触发按钮1的点击事件
});
});
</script>
</head>
<body>
<input type="button" value="Button 1">
<input type="button" value="Button 2"><br><br>
<div>按钮1点击次数：<span>0</span></div>
<div>按钮2点击次数：<span>0</span></div>
</body>
</html>
5.实现单击事件的动态交替
toggle()方法，该方法接受两个参数，这两个参数均为监听函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>toggle()</title>
<style type="text/css">
<!--
body{
/* 设置背景图片，以突出透明度的效果 */
background:url(bg1.jpg);
margin:20px; padding:0px;
}
img{
border:1px solid #FFFFFF;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("img").toggle(
function(oEvent){
$(oEvent.target).css("opacity","0.5");
},
function(oEvent){
$(oEvent.target).css("opacity","1.0");
}
);
});
</script>
</head>
<body>
<img src="07.jpg">
</body>
</html>
6.实现感应鼠标
hover(over,out)方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>hover()方法</title>
<style type="text/css">
<!--
body{
/* 设置背景图片，以突出透明度的效果 */
background:url(bg1.jpg);
margin:20px; padding:0px;
}
img{
border:1px solid #FFFFFF;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("img").hover(
function(oEvent){
//第一个函数相当于mouseover事件监听
$(oEvent.target).css("opacity","0.5");
},
function(oEvent){
//第二个函数相当于mouseover事件监听
$(oEvent.target).css("opacity","1.0");
}
);
});
</script>
</head>
<body>
<img src="12.jpg">
</body>
</html>
分享到：
发表评论
相关推荐
基于springboot+Javaweb的二手图书交易系统源码数据库文档.zip
Linux课程设计.doc
课程考试资源描述 本资源是为应对各类课程考试而精心准备的综合性学习包。它包含了多门学科的考试指南、历年真题、模拟试题以及详细的答案解析。这些资源旨在帮助学生系统复习课程内容，理解考试要点，提高解题技巧，从而在考试中取得优异成绩。 资源中不仅包含了基础的考试资料，还特别加入了考试技巧讲解和备考策略分析。学生可以通过这些资源了解不同题型的解题方法和思路，学会如何在有限的时间内高效答题。此外，还有针对弱项科目和难点的专项训练，帮助学生攻克学习瓶颈。 为了确保资源的时效性和准确性，我们会定期更新考试资料和模拟试题，及时反映最新的考试动态和趋势。同时，也提供了在线交流平台，方便学生之间互相讨论、分享学习心得。 项目源码示例（简化版，Python） 以下是一个简单的Python脚本示例，用于生成包含选择题和答案的模拟试题： python import random # 定义选择题题库 questions = [ {"question": "Python的创始人是谁？", "options": ["A. 林纳斯·托瓦兹", "B. 巴纳姆", "C. 比尔·盖茨", "D.
基于 MySQL+Django 实现校园食堂点餐系统。 主要环境： PowerDesigner MySQL Workbench 8.0 CE Python 3.8 Django 3.2.8 BootStrap 3.3.7 Django-simpleui
基于SpringBoot的同城宠物照看系统源码数据库文档.zip
GEE训练教程
基于springboot+Web的心理健康交流系统源码数据库文档.zip
微信小程序 kotlin 实践微信插件助手, 目前支持抢红包（支持微信最新版本 7.0.0及7.0.3）.zip
N32G45X运放电路检测电压
梦幻西游道人是梦幻西游里面的一个NPC，主要是刷全服最实惠的高级兽决和其他很好用的比较贵的东西，在长安城、傲来国、长寿村中的任意一个场景出现，一般会出现30分钟，不过东西一般都被秒刷。 梦幻西游道人出现时间解析如下： 1.梦幻西游道人出现时间一直都保持着一年出现两次的规律，即2、3月份的元宵节期间来一次，9月份的教师节期间出现一次。 2.云游道人每个整点(0:00至7:00不出现)会在长安城、傲来国、长寿村中的任意一个场景出现,每次出现后停留时间为30分钟。
tables-3.7.0-cp38-cp38-win_amd64.whl
基于springboot旧物回收管理系统源码数据库文档.zip
MariaDB数据库管理系统是MySQL的一个分支，主要由开源社区在维护，采用GPL授权许可 MariaDB的目的是完全兼容MySQL，包括API和命令行，使之能轻松成为MySQL的代替品。在存储引擎方面，使用XtraDB（英语：XtraDB）来代替MySQL的InnoDB。 本文档介绍了MariaDB 10.1的集群部署，至少三台机器做成集群，每台可以同时提供读和写，感兴趣的小伙伴们可以参考一下
内容概要：本文档全面介绍了JavaScript作为一种轻量级的、解释型的语言及其在前端开发中的广泛应用。从JavaScript的基本概念出发，详尽讲解了基础语法（如变量、数据类型、运算符、流程控制）、函数和闭包、对象和原型、DOM操作（如获取、修改、添加和删除元素）、事件处理（如事件监听器、事件对象）、AJAX与Fetch API、ES6+的新特性（如箭头函数、模板字符串、解构赋值）以及前端框架和库（React、Vue、Angular）。除此之外，文章还涉及了代码优化技巧（如减少DOM操作、选择适当的算法和数据结构、使用工具提升代码性能），并对JavaScript的应用场景和发展趋势进行了展望。 适用人群：适用于初学者或具有少量编程经验的学习者，旨在帮助他们系统掌握JavaScript基础知识和前沿技术。 使用场景及目标：通过本教程的学习，读者不仅可以学会基本语法，还能理解并掌握高级概念和技术，如DOM操纵、事件处理机制、异步编程及最新的ECMAScript规范。这不仅有助于改善用户体验、增强网站互动性和响应速度，也能有效提升自身的编码水平和项目开发能力。 其他说明：此文档不仅涵盖了JavaScript的传统功能，还有现代前端技术和最佳实践指导，确保读者能够紧跟行业发展步伐，成为合格甚至优秀的Web开发人员。
该资源内项目源码是个人的课程设计、毕业设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过严格测试运行成功才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
基于springboot高考志愿智能推荐系统源码数据库文档.zip
经典-FPGA时序约束教程
mcu交互实验整体文件
Collins COBUILD (CN).mdx
自定义springboot starter