• JQuery获取与设置HTML元素的值value


    JQuery获取与设置HTML元素的值value

    服务器君一共花费了13.221 ms进行了6次数据库查询,努力地为您提供了提供了这个页面。
     

    val()方法

    此方法类似于JavaScript中的value属性,可以用来设置和获取元索的值。无论元素是文本框,下拉列表还足单选框,它都可以返回元素的值。如果元素为多选,则返回一个包含所有选择的值的数组。先看看下面的效果演示:

    欢迎访问简明现代魔法图书馆

    • 简单易懂的PHP魔法
    • 简单易懂的JavaScript魔法
    • 简单易懂的JQuery魔法

    上面效果的实现很简单,如下面代码:

    $(function(){
    	
    	$("#btn_1").click(function(){
    		// 获取按钮的value值
    		alert( $(this).val() );
    	});
    	
    	$("#btn_2").click(function(){
    		// 设置按钮的value值
    		$(this).val("我被点击了!");
    	});
    });
    

    比如网站的邮箱登录界面,默认状态下,邮箱地址文本框和邮箱密码框内分别有“请输入邮箱地址”和“请输入邮箱密码”的提示。当将鼠标聚焦到邮箱地址文本框时,文本框内的“请输入邮箱地址”文字将被清空。

    如果此时未在邮箱地址框中输入任何内容,而将鼠标焦点直接聚焦到密码输入框,则会发现密码框内的提示文字被清空了,同时邮箱地址输入框的提示也被还原了。





    如何实现上面的效果呢?

    第1步:设计网页的基本结构。在页面中添加两个文本框,分别对两个文本框设置id,同时设置它们的默认值为“请输入邮箱地址”和“请输入邮箱密码”。

    	<div>
    		<input type="text" id="address" value="请输入邮箱地址"/>   <br/><br/>
    		<input type="text" id="password" value="请输入邮箱密码"/>  <br/><br/>
    		<input type="button" value="登陆"/>
    	</div>
    

    第2步:对“地址框”进行操作。

    当地址框获取鼠标焦点时,如果地址框的值为“请输入邮箱地址”,则将地址框中的值清空。可以使用如下的JQuery代码:

    // 地址框获得鼠标焦点 
    $("#address").focus(function(){      
    	// 得到当前文本框的值     
    	var txt_value =  $(this).val();    
    	if(txt_value=="请输入邮箱地址"){
    		// 如果符合条件,则清空文本框内容        
      		$(this).val("");              
    	}    
    });
    

    当地址框失去鼠标焦点时,如果地址框的值为空,则将地址框的值设置为“清输入邮箱地址”。可以使用如下的JQuery代码:

    // 地址框失去鼠标焦点   
    $("#address").blur(function(){     
    	// 得到当前文本框的值     
    	var txt_value =  $(this).val();    
    	if(txt_value==""){   
    		// 如果符合条件,则设置内容
         	$(this).val("请输入邮箱地址");   
    	}    
    })
    

    PS:focus()方法相当于JavaScript中的onfocus()方法,作用是处理获得焦点时的事件。blur()方法相当于JavaScript中的onblur()方法,作用是处理失去焦点时的事件。

    第3步:对“密码框”进行操作,实现过程与“地址框”相同。此时,类似于YAHOO邮箱登录框的提示效果就完成了。

    也可以使用表单元素的defaultValue属性来实现同样的功能,defaultValue属性包含该表单元素的初始值。代码如下:

    $("#address").focus(function(){         // 地址框获得鼠标焦点   
    	var txt_value =  $(this).val();   // 得到当前文本框的值   
    	if(txt_value==this.defaultValue){     
    		$(this).val("");              // 如果符合条件,则清空文本框内容   
    	}    
    });   
     
    $("#address").blur(function(){        // 地址框失去鼠标焦点   
    	var txt_value =  $(this).val();   // 得到当前文本框的值   
    	if(txt_value==""){   
    		$(this).val(this.defaultValue);// 如果符合条件,则设置内容   
    	}    
    })
    

    注意:this指向当前的文本框,“this.defaultValue”就是当前文本框的默认值。通过上面的例子可以发现val()方法不仅能设置元素的值,同时也能获取元素的值。

     

     

  • 相关阅读:
    Yii UI 小部件
    Sketch Measure 产品图例和标注工具
    使用 redis “捕捉” “用户登录过期” 事件
    后端判断用户是否关闭浏览器(关闭网站相关的全部tab)
    js精准时间迭代器(定时器)
    chm只看到目录,看不到内容解决办法
    form提交表单没接收到$_POST
    旺店通erp系统
    DokuWiki 开源wiki引擎程序
    kohana 简单使用
  • 原文地址:https://www.cnblogs.com/leo388/p/4484845.html
Copyright © 2020-2023  润新知