html、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

  

value:是html标签value属性

this.value是JS原生态写法,$(this).val()是JQ的写法

return,把控制权返回给页面。

return false,终止处理

return true,继续执行

时间: 2024-08-07 21:34:14

html、val、attr、prop区别。this.value和$(this).val()区别以及return用法的相关文章

jQuery笔记三——text/html/val/attr/prop

1.获得内容 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 <p id="test">This is some <b>bold</b> text in a paragraph.</p> <p>Name: <input type="text&quo

jQuery .attr() .prop() .data()区别及全选等问题

DOM的attribute和property 今天讲一个JS的小话题,就是DOM节点的attribute和property的区别,这个点看起来很小,其实背后别有洞天.如果面试一个前端,听他讲讲对这个问题的理解,基本能分辨是不是菜鸟.下面的内容请各位细心体会. 页面有一个INPUT输入框   这个比较简单,没什么好说的,两个值都是’1′.现在我把输入框的值改成100,然后重新取一遍值: 为什么两个值不同了?这就是attribute和property在作怪. Attibute 这 个INPUT节点有

jquery13 attr() prop() val() addClass()等 : 对元素属性的操作

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="jquery-2.0.3.js"></script> <script> jQu

jQuery07源码 (3803 , 4299) attr() prop() val() addClass()等 : 对元素属性的操作

var nodeHook, boolHook, rclass = /[\t\r\n\f]/g, rreturn = /\r/g, rfocusable = /^(?:input|select|textarea|button)$/i; jQuery.fn.extend({ attr: function( name, value ) { //遍历this //arguments.length > 1,jQuery.attr(this[i],name,value),返回this //arguments

jQuery.attributes源码分析(attr/prop/val/class)

回顾 有了之前的几篇对于jQuery.attributes相关的研究,是时候分析jQuery.attr的源码了 Javascript中的attribute和property分析 attribute和property兼容性分析 jQuery.access源码分析 结构 jQuery.fn.extend({ attr: function (name, value) { }, removeAttr: function (name) { }, prop: function (name, value) {

jquery中attr() &amp; prop() 的区别与其实现方法

$(function(){ $('#check').attr('checked'); // undefind ???一头雾水 }) 在jquery中 attr 本来就是用来设置或者获取属性的,可是上面的方法却返回给 undefined ? 然后我尝试用 $('#check').prop('checked'); 发现可以正常运行!! 在jquery中prop是相对来说版本比较新的一个方法,乍一看它的功能好像和attr没有什么很大的差别,的确,它们都可设置或者来获取属性,比如 $('#div').a

jQuery中attr,prop区别

前2篇jQuery笔记中,分别总结了jQuery中attr()和prop()的用法,大家可能会发现这两个方法在使用起来非常类似 没有看过的童鞋可移步:attr()用法  http://www.cnblogs.com/zwwhnly/p/7383960.html   prop()用法 http://www.cnblogs.com/zwwhnly/p/7389295.html 本篇笔记主要总结下attr(),prop()之间的区别 假使页面上如如下Html标签: <input type="ch

jquery中选择器的 html() text() val() attr() 方法的区别与使用方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html() text() val() attr()</title> <script src="./js/jquery-1.12.4.min.js"></script> <script> $(funct

[ jquery 方法 removeAttr(name) | removeProp(name) ] 此方法用来删除对应的由.attr() | .prop()方法设置的属性集

用来删除由.attr() | .prop()方法设置的属性集: 随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误.jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='descrip