val(),val(val)方法atttr(name),atttr(key,value)方法和value属性

二、jQuery的prop()方法:

依然那样也能够:val = $(“#id”).attr(“value”);

jQuery中attr()与prop()函数用法实例详解(附用法分别),jqueryattr

本文实例陈述了jQuery中attr()与prop()函数用法。分享给大家供我们参谋,具体如下:

一、jQuery的attr()方法

jquery中用attr()方法来赢得和装置成分属性,attr是attribute(属性)的缩写,在jQuery
DOM操作中会平常使用attr(),attr()有4个表明式。

  1. attr(属性名)
    //获取属性的值(获得第一个相配成分的属性值。通过这几个点子能够实惠地从第多个相配元素中拿走叁个本性的值。借使成分未有对号入座属性,则赶回
    undefined )

  2. attr(属性名, 属性值) //设置属性的值
    (为全体相配的要素设置几个属性值。)

  3. attr(属性名,函数值) //设置属性的函数值 
    (为有着相配的因素设置二个计量的属性值。不提供值,而是提供三个函数,由那个函数总括的值作为属性值。)

4.attr(properties) //给钦定元素设置八个属性值,即:{属性名一: “属性值一”
, 属性名二: “属性值二” , … …
}。(那是一种在颇具相称成分中批量设置过多品质的极品方式。
注意,就算你要安装对象的class属性,你必须运用’className’
作为属性名。或然您能够直接使用’class’或许’id’。)

示范代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery中attr()方法</title>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>
<style>
p{color:red}
li{color:blue;}
.lili{font-weight:bold;color:red;}
#lili{font-weight:bold;color:red;}
</style>
</head>
<body>
<p title="你最喜欢的水果是。">你最喜欢的水果是?</p>
<ul>
<li title="苹果汁">苹果</li>
<li title="橘子汁" alt="123">橘子</li>
<li title="菠萝汁">菠萝</li>
</ul>
<script>
...
</script>
</body>
<html>

1.attr(name)//获取属性的值

1.1使用attr(name)获取title值:

<script>
alert($("ul li:eq(1)").attr("title"));
</script>

结果:

金沙糖果派对网站app 1

1.2使用attr(name)获取alt值:

<script>
alert($("ul li:eq(1)").attr("alt"));
</script>

结果:

金沙糖果派对网站app 2

  1. attr(name,value)   //设置属性的值

2.1接纳attr(name,value)修改title值为:不吃金橘

<script>
$("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>

结果:

金沙糖果派对网站app 3

  1. attr(name,fn)  //设置属性的函数值

3.1把alt属性的值设置为title属性的值。

<script>
$("ul li:eq(1)").attr("title",function(){ return this.alt});
alert($("ul li:eq(1)").attr("title"));
</script>

结果:

金沙糖果派对网站app 4

4.attr(properties)  //将一个“名/值”情势的对象设置为保有相称成分的属性

4.1获取<ul>里第2个<li>设置title和alt属性。

<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("alt"));
</script>

结果:

金沙糖果派对网站app 5金沙糖果派对网站app 6

4.2获取<ul>里第2个<li>设置class。

<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>

结果:

金沙糖果派对网站app 7

4.3获取<ul>里第2个<li>设置id。

<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>

结果:

金沙糖果派对网站app 8

4.4获取<ul>里第2个<li>设置style。

<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>

结果:

金沙糖果派对网站app 9

在li中加多alt是八花九裂的,它只可以用在img、area和input成分中(富含applet成分)。对于input成分,alt属性目的在于用来替换提交按键的图形。在这里为了很详细表明attr()方法,未有适度的特性,全部用了alt实行举例,只供就学参考attr()方法用法。

在此表达下alt和tite的界别。

alt:那是用于描述图形的文字,当图片非常的小概呈现时,这一个文字会代替图片而被显示。当鼠标移至图片上该些文字亦会展现。
title:是鼠标放上去之后,会展现出来的文字。

那么怎么删除属性呢?

jquery中剔除属性的基本点词是: removeAttr 注意A是大写的. 看看怎么用的:
同样是用法第一中学的html代码, 小编想删掉li的title属性, 那么就这么:

<script>
$("ul li:eq(1)").removeAttr ("title");
</script>

就那样简单, attr 其实正是原生js中 getAttribute 的简化完毕, 而removeAttr
便是 removeAttribute 的简写了。

那么是不是有跟attr()相似的属性呢?

jquery中val()与之周围
$(this).val();获取有些元秋日点的value值,也便是$(this).attr(“value”);
$(this).val(value);设置有个别成分节点的value值,相当于$(this).attr(“value”,value);

二、jQuery的prop()方法:

prop()函数用于安装或回到当前jQuery对象所相配的要素的属性值。

该函数属于jQuery对象(实例)。若是急需删除DOM成分的习性,请使用removeProp()函数。

语法

jQuery 1.6 新扩张该函数。prop()函数有以下三种用法:

用法一:

jQueryObject.prop( propertyName [, value
] )
设置或回到内定属性propertyName的值。假如钦赐了value参数,则意味设置属性propertyName的值为value;若无一点点名value参数,则表示回去属性propertyName的值。

参数value还足以是函数,prop()将凭仗相称的享有因素遍历施行该函数,函数中的this指针将本着对应的DOM成分。prop()还可能会为函数字传送入八个参数:第叁个参数便是该因素在相配成分中的索引,第3个参数正是该因素propertyName属性当前的值。函数的再次回到值就是为该因素的propertyName属性设置的值。

用法二:

jQueryObject.prop( object )
以指标情势同时设置肆意四个本性的值。对象object的各样属性对应propertyName,属性的值对应value。

小心:prop()函数的持有”设置属性”操作针对的是当前jQuery对象所相称的每三个因素;全部”读取属性”的操作只针对第叁个极度的成分。
参数

请依据前面语法部分所定义的参数名称查找对应的参数。

参数 描述
propertyName String类型指定的属性名称。
value 可选/Object/Function类型指定的属性值,或返回属性值的函数。
object Object类型指定的对象,用于封装多个键值对,同时设置多项属性。

参数value能够是归纳对象和数组在内的即兴档案的次序。

返回值

prop()函数的重返值是任性档期的顺序,再次回到值的种类取决于当前prop()函数实行的是”设置属性”操作依然”读取属性”操作。

一旦prop()函数奉行的是”设置属性”操作,则赶回当前jQuery对象自作者;借使是”读取属性”操作,则赶回读取到的属性值。

就算当前jQuery对象相称七个要素,返回属性值时,prop()函数只以内部第一个门户大概的成分为准。假若该因素未有一点点名的性格,则再次回到undefined。

prop()和attr()的关键分歧:prop()函数针对的是DOM成分(JS
Element对象)的品质,attr()函数针对的是DOM成分所对应的文档节点的习性。详细的情况请查看jQuery函数attr()和prop()的不相同。

注意事项

1、假设通过prop()函数改造<input>和<button>元素的type属性,在半数以上浏览器旅长会抛出二个张冠李戴,因为该属性一般不允许在前期退换。

2、假诺运用prop()函数操作表单成分的checked、selected、disabled等质量,假若该因素被入选(或剥夺),则赶回true,不然(意即HTML中绝非该属性)再次回到false。

3、prop()函数仍是可以安装或再次回到DOM成分的Element对象上的有些品质,譬如:tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等品质。

4、在IE9及更早版本中,倘使利用prop()函数设置的习性值不是三个简约的原始值(String、Number、Boolean),并且在相应的DOM成分被销毁此前,该属性没有被移除,则大概会促成内部存款和储蓄器泄漏难题。尽管您只是为了存款和储蓄数据,建议您接纳data()函数,避防止内存泄漏难题。

示例&说明

以上面这段HTML代码为例:

<div id="n1">
  <p id="n2" class="demo test" data-key="UUID" data_value="1235456465">CodePlayer</p>
  <input id="n3" name="order_id" type="checkbox" value="1">
  <input id="n4" name="order_id" type="checkbox" checked="checked" value="2">
</div>

作者们编辑如下jQuery代码:

var $n2 = $("#n2");
// prop()操作针对的是元素(Element对象)的属性,而不是元素节点(HTML文档)的属性
document.writeln( $n2.prop("data-key") ); // undefined
document.writeln( $n2.prop("data_value") ); // undefined
document.writeln( $n2.prop("id") ); // n2
document.writeln( $n2.prop("tagName") ); // P
document.writeln( $n2.prop("className") ); // demo test
document.writeln( $n2.prop("innerHTML") ); // CodePlayer
document.writeln( typeof $n2.prop("getAttribute") ); // function
// prop()设置的属性也是针对元素(Element对象),因此也可以通过元素本身直接访问
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer
// 以对象形式同时设置多个属性,属性值可以是对象、数组等任意类型
$n2.prop( { 
  prop_b: "baike",
  prop_c: 18,
  site: { name: "CodePlayer", url: "http://www.bkjia.com/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // http://www.bkjia.com/
// 反选所有的复选框(没选中的改为选中,选中的改为取消选中)
$("input:checkbox").prop("checked", function(index, oldValue){
  return !oldValue;
});

附:jquery中attr和prop的区别

在高版本的jquery引进prop方法后,哪天该用prop?何时用attr?它们多个以内有啥分别?这个标题就应时而生了。

至于它们多个的界别,网络的答案相当多。这里谈谈自身的体会,笔者的心得很简短:

对此HTML成分本身就带有的原有属性,在拍卖时,使用prop方法。
对此HTML成分大家通力合作自定义的DOM属性,在拍卖时,使用attr方法。

地点的描述恐怕有个别模糊,举多少个例子就明白了。

<a href=”” target=”_self”
class=”btn”>百度</a>

其一例子里<a>成分的DOM属性有“href、target和class”,那么些属性便是<a>成分本人就带有的个性,也是W3C规范里就含有有那多少个属性,或许说在IDE里能够智能提示出的质量,这么些就叫做固有质量。处理这几个属性时,提议接纳prop方法。

<a href=”#” id=”link1″ action=”delete”>删除</a>

以此事例里<a>成分的DOM属性有“href、id和action”,很显眼,前三个是原有属性,而前面二个“action”属性是我们自身自定义上去的,<a>元素本人是一贯不这么些脾性的。这种就是自定义的DOM属性。管理这么些属性时,建议使用attr方法。使用prop方法取值和装置属性值时,都会再次来到undefined值。

再举叁个例证:

<input id=”chk1″ type=”checkbox” />是还是不是可知
<input id=”chk2″ type=”checkbox” checked=”checked” />是或不是可知

像checkbox,radio和select那样的成分,选中属性对应“checked”和“selected”,这一个也属于固有属性,由此需求动用prop方法去操作才具获得不错的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

假使上边使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

愿意本文所述对大家jQuery程序设计具有匡助。

或者  $(“#id”)[0].value = “new value”;

<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("alt"));
</script>

val(val):设置每个相称成分的值。

你恐怕感兴趣的稿子:

  • jquery判定复选框选中状态以及界别attr和prop
  • jQuery中 prop() attr()使用详解
  • jquery中attr和prop的区分解析
  • jQuery中attr()和prop()在改变checked属性时的界别
  • jQuery学习之prop和attr的不同示例介绍
  • jQuery的attr与prop使用介绍
  • jquery中prop()方法和attr()方法的分别浅析
  • jquery获取自定义属性(attr和prop)实例介绍
  • jquery 获取自定义属性(attr和prop)的完结代码

本文实例陈诉了jQuery中attr()与prop()函数用法。分享给大家供大家参照他事他说加以考察,具体如下…

HTML 代码:
<input type="text"/>
jQuery 代码:
$("input").val("hello world!");

<a href=”#” id=”link1″ action=”delete”>删除</a>

取值:val = $(“#id”)[0].value;
赋值:
$(“#id”)[0].value = “new value”;
或者$(“#id”).val(“new value”);

描述:
为所有图像设置src属性。

HTML 代码:
<img/> 
<img/>
jQuery 代码:
$("img").attr("src","test.jpg");
结果:
[ <img src= "test.jpg" /> , <img src= "test.jpg" /> ]

金沙糖果派对网站app 10

jquery与之对应的是val

function saveConsumerValidate(){
     var cifNo =$("#cifNo").val(); //jquery获取文本框值方法1
     var cardType = $("#cardType").attr("value"); //jquery获取文本框值方法2
     var cardNo = document.getElementById("cardNo").value;//DOM获取值方法
<script>
alert($("ul li:eq(1)").attr("title"));
</script>

jquery取radio单选开关的值 $(“input[name=’items’]:checked”).val();
jquery
radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关
取得一组radio被选中项的值 var item = $(‘input[name=items][checked]’).val();
赢得select被选中项的文书 var item = $(“select[name=items] option[selected]”).text();
select下拉框的第三个因素为近日选中值
$(‘#select_id’)[0].selectedIndex = 1;
radio单选组的第2个元素为当前选中值 $(‘input[name=items]’).get(1).checked = true;

取值:$(“#id”).val();|$(“element元素”).val();/下同 

金沙糖果派对网站app 11金沙糖果派对网站app 12

后来好不轻易在高大的百度帮扶下,找到了难点的缘故:
$(“”)是多个jquery对象,并非叁个dom element

$(“#intro”)是三个jquery的采取器结果是id=”intro”
的率先个要素,实际不是HTML DOM getElementById() 方法的document.getElement

请依据后边语法部分所定义的参数名称查找对应的参数。

val() :获得第多个相配成分的当下值。

您可能感兴趣的小说:

  • jQuery动态拉长及删除表单上传成分的方法(附demo源码下载)
  • jQuery达成form表单成分种类化为json对象的点子
  • jQuery复制表单成分附源码分享成效演示
  • JQuery对表单成分的基本操作使用计算
  • jquery的attr方法禁止使用表单成分禁止使用输入内容
  • jquery系列化表单去除内定成分示例代码
  • 应用jQuery时Form表单元素ID和name命名避讳
  • jQuery获取和装置表单成分的章程
  • 实用jquery操作表单成分的简要代码
参数 描述
propertyName String类型指定的属性名称。
value 可选/Object/Function类型指定的属性值,或返回属性值的函数。
object Object类型指定的对象,用于封装多个键值对,同时设置多项属性。

单选组radio:
$(“input[type=radio]”).attr(“checked”,’2′);//设置value=2的花色为当前选中项
下拉框select:
$(“#sel”).attr(“value”,’-sel3′);//设置value=-sel3的品类为当前选中项
$(“<option value=’1′>1111</option><option
value=’2′>2222</option>”).appendTo(“#sel”)//增多下拉框的option
$(“#sel”).empty();//清空下拉框

或者  $(“#id”)[0].value;

用法二:

所以,代码应该这么写:

如上那篇jquery获取form表单input成分值的简便实例就是小编分享给我们的全体内容了,希望能给我们一个参阅,也可望大家多多协助脚本之家。

<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>

多选框checkbox: $(“#chk1”).attr(“checked”,”);//不打勾
$(“#chk2”).attr(“checked”,true);//打勾
if($(“#chk1”).attr(‘checked’)==undefined) //决断是不是业已打勾

$(“#id”).attr(“value”); 

3.1把alt属性的值设置为title属性的值。

调控表单成分: 文本框,文本区域:$(“#txt”).attr(“value”,”);//清空内容
$(“#txt”).attr(“value”,’11’);//填充内容

赋值:$(“#id”).attr(attribute,value);

该函数属于jQuery对象(实例)。若是急需删除DOM元素的习性,请使用removeProp()函数。

value是dom element的属性

相似取值方法

正文实例汇报了jQuery中attr()与prop()函数用法。分享给大家供大家参照他事他说加以考察,具体如下:

获取值:

赋值:$(“#id”).val(“new value”);   

附:jquery中attr和prop的区别

您只怕感兴趣的小说:

  • jQuery轻便兑现input文本框香柚罗兰色提醒文本效果的法门
  • 让input框完结类似百度的物色提醒(基于jquery事件监听)
  • 依照jQuery的input输入框下拉提醒层(自动邮箱后缀名)
  • jQuery达成表单input中提醒文字value随鼠标主旨移进移出而展现或隐敝的代码
  • jquery获取input的value难点求证
  • input
    输入框获得/失去核心时遮盖/呈现文字(jquery版)
  • jquery完毕input输入框实时输入触发事件代码
  • jQuery操作input值的各个格局总括
  • js与jquery实时监听输入框值的oninput与onpropertychange方法
  • jQuery制作input提醒内容(包容IE8之上)

val()方法:拿到第二个相配成分的前段时间值

这正是说怎么删除属性呢?

文本框,文本区域:$(“#txt”).attr(“value”);
多选框checkbox:$(“#checkbox_id”).attr(“value”);
单选组radio: $(“input[type=radio][checked]”).val();
下拉框select: $(‘#sel’).val();

在用$(“#id”)来赢得页面的input元素的时候,开掘$(“#id”).value不能够取到值

jQuery 1.6 新增加该函数。prop()函数有以下二种用法:

刚起首接触jquery,非常多事物不熟悉
在用$(“#id”)来猎取页面包车型大巴input元素的时候,发掘$(“#id”).value不能够取到值

 val(val)方法:设置每二个相称成分的值。

<script>
alert($("ul li:eq(1)").attr("alt"));
</script>

 

3、prop()函数还足以安装或再次来到DOM成分的Element对象上的一些质量,举例:tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等本性。

value是HTML DOM Text对象的两脾质量,设置或再次来到文本域的 value 属性的值。

4.3获取<ul>里第2个<li>设置id。

attr(key,value)方法:为具有相配的要素设置多少个属性值。

prop()函数的再次回到值是随机档期的顺序,重回值的类别取决于当前prop()函数实践的是”设置属性”操作仍旧”读取属性”操作。

HTML 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").attr("src");
结果:
test.jpg

jquery中val()与之临近
$(this).val();获取某些成分节点的value值,也便是$(this).attr(“value”);
$(this).val(value);设置某些成分节点的value值,也就是$(this).attr(“value”,value);

val()是jquery的获取或设置成分的 DOM 属性的操作方法。

用法一:

$(“#id”).val();

<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>
HTML 代码:
<input type="text" value="some text"/>
jQuery 代码:
$("input").val();

语法

attr(name)方法:取得第三个相配成分的属性值。通过那几个主意能够方便地从第多个相配成分中获得二个属性的值。假设成分未有对应属性,则赶回
undefined 。

亲自过问代码:

admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注