Nearth===>WEB前端--第25课/JQuery/设置和获取表单元素的value(方法：val()的使用)

最新推荐文章于 2022-04-10 15:25:09 发布

码字界陈冠希

最新推荐文章于 2022-04-10 15:25:09 发布

阅读量339

点赞数

分类专栏： WEB前端第三季/JQuery

本文链接：https://blog.youkuaiyun.com/ly1716/article/details/103100523

版权

WEB前端第三季/JQuery 专栏收录该内容

52 篇文章

订阅专栏

代码学习：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
		body{
					 background-image: url(0.jpg);
					 background-repeat: no-repeat;
					 background-attachment: fixed;
					 background-size: 100% 100%;
		} 
    </style>
    <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
	  $(function(){
		  $("#btn1").click(function(){
			  //要求,点击按钮,把所有的表单的value 属性值全部显示出来
			  console.log($(this).val);//显示按钮的属性值
			  console.log($("#txt").val());//显示文本框的value 属性值
			  console.log($("#rad").val());//显示单选框的value 属性值
			  console.log($("#ck").val());//显示复选框的value 属性值
			  console.log($("#sm").val());//显示提交按钮的value 属性值
		      /* //设置表单元素的value 属性值
		      $(this).val("这是一个按钮");
			  $("#txt").val("我是一个开心的按钮");
			  $("#rad").val("这是单选");
			  $("#ck").val("这是复选框");
			  $("#sm").val("这是sm提交按钮"); */
			 /* //获取文本域中的内容
			  console.log($("#tt").text());  */
		  });
		  //点击按钮,让下拉框中的上海选中
		  /* $("#btn1").click(function(){
			  $("#se").val(4);
		  }) */
	  })
    </script>
</head>
<body>
<h1>设置和获取表单元素的value</h1>
<hr >
<input type="button" name="" id="btn1" value="显示效果" />
<input type="text" id="txt" value="文本框" />
<input type="radio" name="sex" id="rad" value="man" />
<input type="checkbox" name="" id="ck" value="1" />
<input type="submit" name="" id="sm" value="提交" /><br>
<textarea rows="10" cols="30"id="tt">
	你真好看········
</textarea>
<select id="se">
	<option value="1">北京</option>
	<option value ="2">上海</option>
	<option value ="3">深圳</option>
	<option value ="4">重庆</option>
	<option value ="5">东京</option>
</select>
<hr >

</body>
</html>