jQuery-案例常用功能

最新推荐文章于 2020-12-03 18:00:10 发布

a_worm

最新推荐文章于 2020-12-03 18:00:10 发布

阅读量550

点赞数

本文链接：https://blog.csdn.net/cuigaochong/article/details/48419843

版权

技能-前台专栏收录该内容

17 篇文章 0 订阅

订阅专栏

/*案例：
实现需求：
		两个文本框中，如果有输入 则显示输入值，没有值或者去除前后空格后仍未"".则设置为默认值
		<input type="button" value="使单选下拉框的'选择3号'被选中"/>
		<input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br>
		<input type="button" value="使多选框的'多选2'和'多选4'被选中"/>
		<input type="button" value="使单选框的'单选2'被选中"/><br>
		<input type="button" value="打印已经被选中的值"><br>
*/
	
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	
	<script type="text/javascript" src="jquery-1.7.2.js"></script>
	<script type="text/javascript">
	
	$(function()
	{
		//添加获取焦点 focus，失去焦点 blur相应函数
		$(":text").focus(function()
		{
			//当获取焦点时，若文本中时默认值，（defaultValue属性，该属性是Dom对象的属性），
			//就将该值设置为""
			var val = $(this).val();
			if(this.defaultValue==val)
			{
				$(this).val("");
			}
		}).blur(function()
		{
			//失去焦点时，若#address的值在去除前后空格后等于"",则恢复默认值
			var val = this.value;
			if(""==val.trim())
			{
				$(this).val(this.defaultValue);
			}
		});
		
		
		$(":button:eq(1)").click(function()
		{
			$("#single").val("选择3号");
		});
		
		$(":button:eq(2)").click(function()
		{
			$("#multiple").val(["选择2号","选择4号"]);
		});
		
		$(":button:eq(3)").click(function()
		{
			$(":input[name='c']").val(["check2","check4"]);
		});
		
		$(":button:eq(4)").each(function()
		{
			$(":input[name='r']").val(["check2"]);
		});
		
		$(":button:eq(5)").click(function()
		{
			alert($("#single").val());
			alert($("#multiple").val());
			
			//val不能直接获取checkbox()被选择的值，
			//多选框$(":input[name='c']:checked")得到的是一个数组，需要遍历获取；
			//.val智能获取一个值
			$(":input[name='c']:checked").each(function()
			{
				alert(this.value);
			});
			//单选框只有一个值，可以直接用val()
			alert($(":input[name='r']:checked").val());
		});
		
	});
	
	</script>


</head>
<body>
		<input type="text" id="address" value="请输入邮箱地址"><br>
		<input type="text" id="password" value="请输入邮箱密码"><br>
		<input type="button" value="登录">
		
		<br><br><br>
		
		<input type="button" value="使单选下拉框的'选择3号'被选中"/>
		<input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br>
		<input type="button" value="使多选框的'多选2'和'多选4'被选中"/>
		<input type="button" value="使单选框的'单选2'被选中"/><br>
		<input type="button" value="打印已经被选中的值"><br>
 
		<br/>
		
		<select id="single">
		  <option>选择1号</option>
		  <option>选择2号</option>
		  <option>选择3号</option>
		</select>
		
		<select id="multiple" multiple="multiple" style="height:120px;">
		  <option selected="selected">选择1号</option>
		  <option>选择2号</option>
		  <option>选择3号</option>
		  <option>选择4号</option>
		  <option selected="selected">选择5号</option>
		</select>
		
		<br/><br/>

		<input type="checkbox" name="c" value="check1"/> 多选1
		<input type="checkbox" name="c" value="check2"/> 多选2
		<input type="checkbox" name="c" value="check3"/> 多选3
		<input type="checkbox" name="c" value="check4"/> 多选4
		
		<br/>
		
		<input type="radio" name="r" value="radio1"/> 单选1
		<input type="radio" name="r"  value="radio2"/> 单选2
		<input type="radio" name="r"  value="radio3"/> 单选3

</body>
</html>

a_worm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-案例常用功能

/*案例：实现需求：两个文本框中，如果有输入则显示输入值，没有值或者去除前后空格后仍未"".则设置为默认值 */ Insert title here $(function() { //添加获取焦点 focus，失去焦点 blur相应函数 $(":text").focus(function() { //当获取
复制链接

扫一扫

专栏目录