jQuery系列(五):jQuery操作input的value值
表单控件是重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等。
jQuery操作表单控件的方法:
$(selector).val()//设置值和获取值
1、实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
<input type="radio" name="sex" value="112"/>男
<!-- 设置cheked属性表示选中当前选项 -->
<input type="radio" name="sex" value="11" checked=""/>女
<input type="radio" name="sex" value="11"/>gay <input type="checkbox" value="a" checked=""/>吃饭
<input type="checkbox" value="b"/>睡觉
<input type="checkbox" value="c" checked=""/>打豆豆 <!-- 下拉列表 option标签内设置selected属性 表示选中当前 -->
<select name="timespan" id="timespan" class="Wdate">
<option value="1">8:00-8:30</option>
<option value="2" selected="">8:30-9:00</option>
<option value="3">9:00-9:30</option>
</select>
<input type="text" name="" id="" value="111"/>
</form> <script type="text/javascript" src="../jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
// 一、获取值
//1.获取单选框被选中的value值
console.log($('input[type=radio]:checked').val());
//2.复选框被选中的value,获取的是第一个被选中的值
console.log($('input[type=checkbox]:checked').val());
//3.下拉列表被选中的值
let obj = $("#timespan option:selected");
// 获取被选中的值
let time = obj.val();
console.log(time);
// 获取文本
let time_text = obj.text();
console.log("val:" + time + " text" + time_text);
//4.获取文本框的value值
console.log($("input[type=text]").val());//获取文本框中的值
// 二.设置值
//1.设置单选按钮和多选按钮被选中项
$('input[type=radio]').val(['112']);
$('input[type=checkbox]').val(['a', 'b']);
//2.设置下拉列表框的选中值,必须使用select
/*因为option只能设置单个值,当给select标签设置multiple。
那么我们设置多个值,就没有办法了,但是使用select设置单个值和多个值都可以
*/
$('select').val(['3', '2']);
//3.设置文本框的value值
$('input[type=text]').val('试试就试试')
})
</script>
</body>
</html>
jQuery系列(五):jQuery操作input的value值的更多相关文章
- jquery系列教程3-DOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
- 从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- jQuery系列:DOM操作
1. 访问元素 在访问页面时,需要与页面中的元素进行交互式的操作.在操作中,元素的访问主要包括对元素属性.内容.值.CSS的操作. 1.1 元素属性操作 1.1.1 设置或返回被选元素的属性值 语法格 ...
- 05-使用jQuery操作input的value值
表单控件是我们的重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等 那么通过上节知识点我们了解到,我们在使用jquery方法操作表单控件的方法: $(selector ...
- 使用jQuery操作input的value值
表单控件是我们的重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等 那么通过上节知识点我们了解到,我们在使用jquery方法操作表单控件的方法: $(selector ...
- jquery 学习(五) - CSS 操作
HTML + CSS 样式 /*CSS样式*/<style> body{ margin: 0; } div{ width: 100%; height: 2000px; background ...
- Jquery系列:textarea常用操作
1.textarea内容的读取与设置 读textarea文本值可以用name和id.而写入文本值只能用id. <textarea name="content" id=&quo ...
- JQuery实现获取多个input输入框的值,并存放在一个数组中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- jupyter的控件交互
jupyter实现控件交互 jupyter notebook 是一个交互式IDE 直接上jupyter notebook界面截图
- 某康x电视去广告
开启adb 信源选择进入模拟电视 然后按菜单键输入2008 找到其他选项,进去把adb root打开 删除对应广告视频(短暂方法) 可以下载tvbox,利用文件管理功能 进入/data/misc/ko ...
- JavaScript基本使用
基本使用 1.JavaScript组成 ECMAScript+BOM+DOM BOM的思想(重点) DOM的思想(重点) 2.使用<script></script>标签 doc ...
- ES6入门六:class的基本语法、继承、私有与静态属性、修饰器
基本语法 继承 私有属性与方法.静态属性与方法 修饰器(Decorator) 一.基本语法 class Grammar{ constructor(name,age){ //定义对象自身的方法和属性 t ...
- java实现判定新旧版本号
废话不多说,直接上代码 /** * 判断是否为最新版本方法 将版本号根据.切分为int数组 比较 * * @param localVersion 本地版本号 * @param onlineVersio ...
- 使用百度echarts仿雪球分时图(四)
这章节来收拾一下一些小BUG,顺便把各个小提示信息也补上,分时图也就完成了. 上章节末尾提到的一个bug,就是第一个grid跟第三个grid之间是断开的,折线并没有连在一起,所以先来收拾这个问题.没有 ...
- js面向对象的几种方式
对象的字面量 var obj={}:创建实例对象 var obj=new Object();构造函数模式 function fn(){}, new fn();工厂模式:用一个函数,通过传递参数返回对象 ...
- STM32点亮LED
原理图 测试灯,接GPIO外设B,Pin 12 举例 前提,工程模版建立好 #include "stm32f10x.h" void delay(u32 i) { while(i-- ...
- 【python+selenium】截取某个元素
一. selenium截图1.selenium提供了几个截取全屏的方法- get_screenshot_as_file(self, filename) --这个方法是获取当前window的截图,出现I ...
- 手写走通HTTP server 第二版本
HTTP server 2.0 1 接收客户请求 2 解析客户端请求 3 组合数据,形成HTTP response 4 将数据发送给客户端 升级 : 1 多线程接收客户端请求 2 基本的请求解析,根据 ...