fengxu0706
- 浏览: 15696 次
-
最新评论
一、处理表单元素的值
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>
分享到：
发表评论
相关推荐
"jQuery 实现的等待加载页面"就是一种为了优化用户交互而设计的技术方案。jQuery，一个强大的JavaScript库，简化了DOM操作、事件处理和动画效果，使得创建这种功能变得更加简单。 首先，我们来看`jquery....
"jQuery页面加载效果"是指利用JavaScript库jQuery实现的动态加载动画，它能够以吸引人的视觉方式展示网页内容正在加载的过程，使用户在等待期间不会感到乏味。这种效果在现代网页设计中被广泛应用，尤其在内容分块...
5. **样式控制**：通过jQuery，我们可以方便地改变子页面中的元素样式。例如，`$("#iframeID").contents().find(".className").css("property", "value")`将修改子页面中所有`.className`类元素的`property`属性为`...
本教程将详细讲解如何使用jQuery库来模拟页面加载进度条。 首先，jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互。jQuery的易用性和丰富的功能使其成为创建动态网页的强大...
标题中的“jquery控制滚动条下拉后DIV容器在页面中的位置”是指利用jQuery库来实现一个功能，即在用户滚动网页时，使指定的DIV元素始终保持在屏幕的某个固定位置，这种效果通常被称为“粘性导航”或“固定定位”。...
通过学习和实践这些示例，你可以更好地掌握jQuery控制页面的方法和技巧，提升网页开发效率。 总结，jQuery作为前端开发的重要工具，以其简洁的语法和强大的功能，让开发者能够更轻松地控制和美化网页。了解并熟练...
**jQuery实现网页打开页面即弹窗** 在网页设计中，弹窗是一种常见的交互方式，用于显示重要的信息或者引导用户操作。jQuery，一个广泛使用的JavaScript库，提供了简洁的API来简化DOM操作，使得创建动态和交互性的...
3. **JavaScript**：插件的核心逻辑由JavaScript编写，通过jQuery库与HTML元素进行交互，实现页面元素的可见性控制。 ### 文件结构 - **block_demo.html**：这是一个示例文件，演示了插件的使用方法，包括如何引入...
在jQuery中，我们可以使用`.fadeIn()`和`.fadeOut()`方法实现logo的动态显示效果，配合`.delay()`和`.queue()`可以控制动画的时间间隔和执行顺序。同时，`.on('click', function() {...})`可以绑定点击事件，当用户...
在这款特效中，jQuery被用来监听页面滚动事件，以及控制元素的动画展示。通过使用jQuery，开发者可以更方便地实现复杂的页面交互功能，而无需编写大量原生JavaScript代码。 ### 2. 页面滚动事件 页面滚动事件是...
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局，那些图片是动态加载出来的，效果很好，对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果：进入qq空间，向下拉动空间，...
【标题】"漂亮的jquery后台管理页面"所涉及的知识点主要集中在使用jQuery技术构建美观的后台管理系统界面。jQuery是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript代码的编写，使得网页动态交互...
在提供的源码中，可能包含了用于创建和管理这些portlets的JavaScript代码，以及相关的CSS样式文件，用于控制页面布局和视觉效果。 "可拖拽"特性是通过jQuery UI库中的Draggable组件实现的。jQuery UI 是 jQuery 的...
在构建一个基于jQuery的炫酷登录页面时，我们需要关注几个核心知识点，这些知识点将帮助我们实现用户界面的交互性和视觉吸引力。在这个项目中，我们主要会涉及到以下技术： 1. **jQuery库**：jQuery是一个轻量级的...
本项目“jquery注册页面”利用jQuery的功能创建了一个具有幻灯片效果的用户注册界面，该界面支持左右滚动，为用户提供了一种流畅且吸引人的交互体验。下面我们将深入探讨这个项目的相关知识点。 首先，jQuery的核心...
在这个项目中，jQuery用于控制404页面中的元素动态行为，如元素的淡入淡出、移动或旋转等动画效果。 CSS3是CSS的最新版本，引入了许多新的样式和功能，其中包括动画（Animations）和过渡（Transitions）。这些特性...
CSS可以控制div的大小、位置、边距等属性，使其能够在页面上正确显示并能被拖动。 5. **事件处理**：jQuery UI的Draggable组件支持多种事件，如`start`、`drag`和`stop`，开发者可以监听这些事件来执行自定义操作。...
在这个项目中，jQuery被用来控制二级导航的显示和隐藏，以及处理各种自定义内容的展示。 响应式设计是确保网站在不同屏幕尺寸（如桌面、平板、手机）上都能正常显示和使用的必备技术。这个二级导航方案采用了媒体...
总的来说，"jquery页面跳转loading加载"是一个关于提升用户体验的技术点，它通过jQuery来控制页面跳转前后的交互，同时结合CSS来创建视觉反馈，让用户知道页面正在处理请求。理解和掌握这一技术能帮助开发者构建更加...