jQuery练习八

最新推荐文章于 2022-10-13 09:14:07 发布

syh945

最新推荐文章于 2022-10-13 09:14:07 发布

阅读量119

点赞数

分类专栏： jQuery 文章标签： jQuery HTML ViewUI

本文链接：https://blog.csdn.net/syh945/article/details/83887464

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

ex-8.html



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
		<script type="text/javascript">

			$(function(){
				//给文本输入框增加聚焦函数
				$(":text").focus(function(){
					var val = $(this).val() ;

					if(val = this.defaultValue) {
						$(this).val("") ;
					}
					//给文本输入框增加失去（或移去）焦点函数
				}).blur(function(){
					var val = $.trim($(this).val()) ;

					if(val == "") {
						$(this).val(this.defaultValue) ;
					}
				}) ;

				$(":button:eq(1)").click(function(){
					//这样就表示单选下拉框选中
					//这里的val()中的值是指文本信息
					$("#single").val("选择3号") ;
				}) ;

				$(":button:eq(2)").click(function(){
					//这样就表示多选下拉框选中多个(多个就用数组表示)
					//这里val()中的值是指文本信息
					$("#multiple").val(["选择2号","选择4号"]) ;
				}) ;

				$(":button:eq(3)").click(function(){
					//同上,这里的val()中的值是指标签的属性value等于的值
					$(":checkbox").val(["check2","check4"]) ;
					//$(":checkbox").val(["check2"]) ;  checkbox 即使选择一个也是用数组表示
				}) ;

				$(":button:eq(4)").click(function(){
					//同上
					$(":radio").val(["radio2"]) ;
				}) ;

				$(":button:eq(5)").click(function(){

					alert($("#single").val()) ;
					alert($("#multiple").val()) ;
					alert($(":radio:checked").val()) ;

					//下面的方式只能打印被选中的 checkbox 的第一个值
					//alert($(":checkbox:checked").val());

					//若希望打印全部被选中的值, 需要遍历
					$(":checkbox:checked").each(function(){
						alert($(this).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>