jQuery控制页面（二）

最新推荐文章于 2019-08-15 17:12:58 发布

fengxu0706

最新推荐文章于 2019-08-15 17:12:58 发布

阅读量145

点赞数

分类专栏： jQuery学习文章标签： jQuery ViewUI

本文链接：https://blog.csdn.net/fengxu0706/article/details/84223937

版权

jQuery学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、处理表单元素的值

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="#" οnclick="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="#" οnclick="listener();"><p>1.绑定监听事件</p></a>
	<a href="#" οnclick="one();"><p>2.one()方法，触发一次之后就失效（自动删除）</p></a>
	<input type="button" value="3.移除事件监听函数" οnclick="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>

fengxu0706

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery控制页面（二）

一、处理表单元素的值 1、val()方法，可以获取表单元素中被选中项的value值，如果没有设置value值则获取其显示的文本值，在处理&lt;select&gt;时，用val()可以直接获取value值，而不需要考虑是单选下拉菜单还是多选下拉菜单。&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt...
复制链接

扫一扫