第83天:jQuery中操作form表单

简介: 操作form表单1、 属性操作设置属性:// 第一个参数表示:要设置的属性名称// 第二个参数表示:该属性名称对应的值$(selector).attr(“title”, “传智播客”);获取属性:// 参数为:要获取的属性的名称,改操作会返回指定属性对应的值$(selector).attr(“title”);此时,返回指定属性的值移除属性:// 参数为:要移除的属性的名称$(selector).removeAttr(“title”);注意:checked、selected、disabled要使用.prop()方法。

操作form表单

1、 属性操作

设置属性:

// 第一个参数表示:要设置的属性名称

// 第二个参数表示:该属性名称对应的值

$(selector).attr(“title”, “传智播客”);

获取属性:

// 参数为:要获取的属性的名称,改操作会返回指定属性对应的值

$(selector).attr(“title”);

此时,返回指定属性的值

移除属性:

// 参数为:要移除的属性的名称

$(selector).removeAttr(“title”);

注意:checkedselecteddisabled要使用.prop()方法。

prop方法通常用来影响DOM元素的动态状态,而不是改变的HTML属性。例如:inputbuttondisabled特性,以及checkboxchecked特性。

细节参考:http://api.jquery.com/prop/

2、 值和内容

val()方法:

作用:设置或返回表单元素的值,例如:input,select,textarea的值

// 获取匹配元素的值,只匹配第一个元素

$(selector).val();

// 设置所有匹配到的元素的值

$(selector).val(“具体值”); 

text() 方法:

作用:设置或获取匹配元素的文本内容

//获取操作不带参数(注意:这时候会把所有匹配到的元素内容拼接为一个字符串,不同于其他获取操作!)

$(selector).text();

//设置操作带参数,参数表示要设置的文本内容

// 如果设置的内容包含html标签(<span>我要动态创建span,这时候行吗?</span>),那么text这个方法会把他们当作文本内容输出,而不会创建元素。这个text()和html()方的主要区别

$(selector).text(“我是内容”);

3、val()、text()和html()的区别

 1 <script>
 2         $(function(){
 3             //val()
 4             alert($("input").val());//val(),获取标签中的value值的内容
 5             $("input").val("我是刚刚赋值的input");
 6             //text()
 7             alert($("div").text());//获取双闭合标签中的文本,不识别标签
 8             $("div").text("我是刚刚赋值的div");
 9             //html()
10             alert($("div").html());//获取双闭合标签中的文本值,识别标签
11             $("div").html("<li>我是html赋值的</li>")
12 
13         })
14     </script>

 

相关文章
|
9月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
|
9月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
70 1
|
9月前
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
|
9月前
|
缓存 JavaScript
|
4月前
|
移动开发 JSON 数据可视化
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
80 0
|
5月前
|
存储 JavaScript 前端开发
使用jQuery实现Form表单提交
【9月更文挑战5天】
141 5
|
6月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
363 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
6月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
55 0
|
8月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
7月前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$(&quot;p&quot;)`、`$(&quot;#myDiv&quot;)`、`$(&quot;.myClass&quot;)`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
52 0