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(). 查看了手册发现并没有对二者 ...
随机推荐
- 小白成长系列--HTTP协议(一)
序:小白成长系列是笔者使用最简单易懂的逻辑来解释常见的计算机相关知识,不仅理解,还让你记忆深刻\(^o^)/ 先理解什么是协议? 协议就是双方要做某件事情而制定的规则,而且双方必须要遵从协议所约定的内 ...
- 小z的袜子
传送门 题目描述 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命-- 具体来说,小Z把这N只袜子从 ...
- 6.Ray-消息订阅器编写
消息订阅器: Ray是基于Event Sourcing设计的ES/Actor框架,消息发布后需要订阅处理,订阅器主要有以下两类: CoreHandler消息订阅器=RabbitSub+SubHandl ...
- angular js $post,$get请求传值
困扰了我好几天的问题!!! 刚开始学play框架,在向后台传值时,一直不成功! 当你用$POST传递一个参数时: HTML: <button ng-click=test()>测试</ ...
- 17_Python装饰器
一.什么是装饰器 目的:给func()方法,增加一个功能,在fun()执行期间,同时把fun()执行速率机算出来 import time def func(): print('嘻嘻哈哈') start ...
- 利用多进程获取猫眼电影top100
猫眼电影top100 是数据是在加载网页时直接就已经加载了的,所以可以通过requests.get()方法去获取这个url的数据,能过对得到的数据进行分析从而获得top100的数据, 把获取的数据存入 ...
- react native 常用组件汇总
react-native-uploader //文件上传https://github.com/aroth/react-native-uploader jpush-react-native //官方版本 ...
- 【模板小程序】求第n个质数
#include <iostream> #include <vector> using namespace std; int nth_prime(int n) { vector ...
- nodejs http post 请求带参数
// We need this to build our post string var querystring = require('querystring'); var http = requir ...
- PHP生成图片验证码、点击切换实例
http://www.jb51.net/article/51506.htm 现在让我们来看下 PHP 代码 复制代码代码如下: <?php session_start();function ra ...