html、text、val、attr、prop区别。this.value和$(this).val()区别以及return用法
html():
html() 方法返回或设置被选元素的内容 (inner HTML)。
当使用该方法读取多个值时,它会返回第一个匹配元素的内容。
当使用该方法设置一个值时,它会覆盖所有匹配元素的内容。
取元素内容的时候会把指定元素下面的代码标签也能获取到
text()
读取多个返回多个
和html()类似,但是只获取指定元素纯文本内容
val():
返回或设置被选元素的值(读取多个只返回第一个),这点和html()类似
通过value属性设置和获取,常用于input元素,只能用在表单元素上
attr():
$().attr(属性名,属性值)→$(selector).attr(attribute,value)
也可设置多个$(selector).attr({attribute:value, attribute:value ...})
返回或设置被选元素属性值,value的属性值
一共有四种写法:
attr(属性名),获取第一个属性值,如果没有返回undefined
attr(属性名,属性值),设置所以匹配元素的属性值
attr(属性名,函数值),设置属性的函数值
attr({属性名一: “属性值一” , 属性名二: “属性值二” , … … }),批量设置属性值
prop()
当该方法用于返回属性值时,则返回第一个匹配元素的值。
当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。
四种用法和attr一样。
attr(),prop()的使用和区别:
| Attribute/Property | .attr() |
.prop() |
|---|---|---|
| accesskey | √ | |
| align | √ | |
| async | √ | √ |
| autofocus | √ | √ |
| checked | √ | √ |
| class | √ | |
| contenteditable | √ | |
| draggable | √ | |
| href | √ | |
| id | √ | |
| label | √ | |
| location ( i.e. window.location ) | √ | √ |
| multiple | √ | √ |
| readOnly | √ | √ |
| rel | √ | |
| selected | √ | √ |
| src | √ | |
| tabindex | √ | |
| title | √ | |
| type | √ | |
width ( if needed over .width() ) |
√ |
获取状态表达不同:
attr('checked'): checked(没选中时,attr获取的是undefined)
prop('checked'): true(统一返回true和false)
添加属性名称立即生效的用prop;
有true和false两个属性的可以用prop;
固有属性的可以考虑使用prop;
其他情况可考虑用attr,比如自定义的dom属性action处理时使用attr
this.value是JS原生态写法,$(this).val()是JQ的写法
html、text、val、attr、prop区别。this.value和$(this).val()区别以及return用法的更多相关文章
- jQuery笔记三——text/html/val/attr/prop
1.获得内容 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() ...
- jQuery 属性操作attr().prop().text().html().val()
这些方法用于获取和设置 DOM 元素的属性. 一.attr(): <!--样式:在style里面写的,用css来操作.--> <!--属性:在元素里面写的,用attr方法操作.--& ...
- jquery中选择器的 html() text() val() attr() 方法的区别与使用方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery.attributes源码分析(attr/prop/val/class)
回顾 有了之前的几篇对于jQuery.attributes相关的研究,是时候分析jQuery.attr的源码了 Javascript中的attribute和property分析 attribute和p ...
- jQuery07源码 (3803 , 4299) attr() prop() val() addClass()等 : 对元素属性的操作
var nodeHook, boolHook, rclass = /[\t\r\n\f]/g, rreturn = /\r/g, rfocusable = /^(?:input|select|text ...
- jquery13 attr() prop() val() addClass()等 : 对元素属性的操作
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- jquery之 css()方法。用法类似的有attr(),prop(),val()
[注]attr(),prop(),val()的用法结构和css()一致,可参考 css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值. 该函数属于jQuery对象(实例).如 ...
- jquery中attr() & prop() 的区别与其实现方法
$(function(){ $('#check').attr('checked'); // undefind ???一头雾水 }) 在jquery中 attr 本来就是用来设置或者获取属性的,可是上面 ...
- attr(),prop()二者区别和最佳实践
attr(),prop()二者区别和最佳实践 最近使用到attr()来获取自定义属性值,我印象中是有一个方法可以获取到自定义属性值,进而我又想到了另一个方法prop(). 查看了手册发现并没有对二者 ...
随机推荐
- 日历插件——laydate.js
laydate是一款很好用的日历控件,兼容了包括IE6在内的所有主流浏览器,默认有三种皮肤,如需其它皮肤可去官网下载http://www.layui.com/laydate/ 一.核心方法:layd ...
- 【转】一些常用的Vi命令,可帮助脱离鼠标
使用Vi编写代码时,如果想脱离鼠标,需要使用一些命令快捷键,下面罗列了一些常用的并且容易记住的: 1. 命令模式下,移动光标或跳转 0到行首 ^到行首第一个非空字符 $到行尾非空字符 fx向后移动光标 ...
- 不免费的PacMan
课程内容介绍: 本套课程适合以下人士: - 免费资料没教会你游戏开发的: - 学了Unity基础不知道怎么用在游戏项目里的: - 想快速开发一款好玩的游戏的: - 想学游戏不知道如何入门的: - 对游 ...
- CSS中的选择器之html选择器和伪类选择器
1.html选择器(标签选择器) 基本语法: html标签名称{ 属性名:属性值; 属性名:属性值; } 继续在上面的代码中做修改,实例代码: <!DOCTYPE html> <ht ...
- Selenium UI自动化解决iframe定位问题
更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6735116.html 一个阴雨霏霏 ...
- bind,apply,call区别总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 【非原创】C++类成员函数的重载、覆盖和隐藏
链接:https://www.nowcoder.com/questionTerminal/266d3a6d4f1b436aabf1eff3156fed95来源:牛客网 题目:类成员函数的重载.覆盖和隐 ...
- Java并发编程Semaphore
信号量 信号量类Semaphore,用来保护对唯一共享资源的访问.一个简单的打印队列,并发任务进行打印,加入信号量同时之能有一个线程进行打印任务 . import java.util.concurre ...
- Dagger2 使用全解析
Dagger2 使用全解析 Dagger是一个注入工具,何为注入,我们要生产一批机器人,每个机器人都有一个控制器,我们可以在机器人内部 new 出一个控制器: class Robot { val co ...
- centos出现“FirewallD is not running”怎么办
最近在阿里云服务器centos上安装了mysql数据库,默认是不开启远端访问功能,需要设置一下防火墙,在开放默认端口号 3306时提示FirewallD is not running,经过排查发现是防 ...