JQuery学习笔记-JQuery的html()方法和val()方法

JQuery学习笔记-JQuery的html()方法和val()方法

创新互联专注于宝兴企业网站建设,响应式网站设计,商城网站开发。宝兴网站建设公司,为宝兴等地区提供建站服务。全流程定制网站制作,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务



	
		
		Untitled Document
		
		
		
			$(function(){
				//1. 为 #address 添加 focus(获取焦点), blur(失去焦点) 响应函数
				$(":text").focus(function(){
					//2. 当获取焦点时, 若 #address 中是默认值
					//(defaultValue 属性, 该属性是 DOM 对象的属性), 就使其值置为 ""
					var val = $(this).val();
					
					if(val == this.defaultValue){
						$(this).val("");
					}
				}).blur(function(){
					//3. 失去焦点是, 若 #address 的值在去除前后空格后等于 ""
					//则为其恢复默认值. 
					var val = this.value;	
					if($.trim(val) == ""){
						this.value = this.defaultValue;
					}
				});
				
				//2. 使单选下拉框的'选择3号'被选中
				$(":button:eq(1)").click(function(){
					$("#single").val("选择3号");
				});
				//使多选下拉框选中的'选择2号'和'选择4号'被选中
				$(":button:eq(2)").click(function(){
					$("#multiple").val(["选择2号", "选择4号"]);				
				});
				//使多选框的'多选2'和'多选4'被选中				
				$(":button:eq(3)").click(function(){
					$(":checkbox[name='c']").val(["check2", "check4"]);
				});
				//使单选框的'单选2'被选中
				$(":button:eq(4)").click(function(){
					//即便是为一组 radio 赋值, val 参数中也应该使用数组. 
					//使用一个值不起作用。 
					$(":radio[name='r']").val(["radio2"]);
				});
				//打印已经被选中的值
				$(":button:eq(5)").click(function(){
					//val() 可以直接获取 select 的被选择的值. 
					alert($("#single").val());
					alert($("#multiple").val());
					
					//val 不能直接获取 checkbox 被选择的值
					//若直接获取, 只能得到第一个被选择的值. 
					//因为 $(":checkbox[name='c']:checked") 得到的是一个
					//数组. 而使用 val() 方法只能获取数组元素的第一个值
					//若希望打印被选择的所有制, 需要使用 each 遍历. 
					//alert($(":checkbox[name='c']:checked").val());
					$(":checkbox[name='c']:checked").each(function(){
						alert(this.value);
					});
					
					//而 raido 被选择的只有一个, 所以可以直接使用 val() 方法. 
					alert($(":radio[name='r']:checked").val());
				});
				
			})
		
		
	
	
		







 
           选择1号            选择5号

 多选1  多选2  多选3  多选4
 单选1  单选2  单选3

网站标题:JQuery学习笔记-JQuery的html()方法和val()方法
浏览路径:http://bzwzjz.com/article/pepjjd.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 自适应网站设计 手机网站制作 网站设计 成都网站制作 企业网站设计 网站建设开发 成都网站设计 成都营销网站建设 宜宾网站设计 成都网站建设 成都响应式网站建设公司 成都网站建设 成都网站设计 网站设计制作 成都网站建设公司 阿坝网站设计 成都网站建设流程 企业网站设计 成都网站建设公司 成都响应式网站建设 成都定制网站建设 成都网站制作