Jquery重新学习之二[属性attr(),removeAttr(),prop(),removeProp()]
1:属性.attr(name|pro|key,val|key,fn)与removeAttr(name)
1.1 .attr(name) 参数name为属性名称
<a id="my_href" href="#">连接</a>
<input id="My_Cbox" type="checkbox" value="check1" checked="checked"/> $("#my_href").attr("href"); -->#
$("#My_Cbox").attr("checked"); //返回checked (或undefined)
1.2 .attr(pro) 参数pro为作为属性的“名/值对”对象
<img id="my_img"/> $("#my_img").attr({ src: "test.jpg", alt: "图片" }); --><img id="my_img" src="test.jpg" alt="图片"/>
1.3 .attr(key,value) 参数key value为属性跟其值
$("#my_img").attr("src","test.jpg");
1.4 .attr(key,fn) 参数key fn为属性跟回调函数
$("#my_img").attr("title", function() { return this.src });
1.5 .removeAttr(name) 参数name要删除的属性名
<img id="my_img" src="test.jpg"/> $("#my_img").removeAttr("src"); --> <img />
*1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);1.7版本在IE6下已支持删除disabled。
2:属性.prop(name|pro|key,val|key,fn)与.removeProp(name)
2.1 .prop(name) 参数name为属性名称
<input id="My_Cbox" type="checkbox" value="check1" checked="checked"/> $("#My_Cbox").prop("checked"); //返回true (或false)
alert($("#My_Cbox").prop("disabled")); //返回false (或true)
2.2 .prop(pro) 参数pro作为属性的“名/值对”对象
$("#My_Cbox").prop({ disabled: true });
$("#My_Cbox").prop({ checked: true });
2.3 .prop(key,val) 参数属性名称,属性值
$("#My_Cbox").prop("disabled", false);
$("#My_Cbox").prop("checked", true);
2.4 .prop(key,fn) 参数key fn(index,attr)属性名称,返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值
$("#My_Cbox").prop("checked", function( i, val ) {
return !val;
});
2.5 .removeProp(name) 参数要删除的属性名
<input id="My_Cbox" type="checkbox" value="check1" checked="checked"/> $("#My_Cbox").removeProp("checked"); --><input id="My_Cbox" type="checkbox" value="check1"/>
3: .attr()与.prop()的区别
jquer .y 1.6+增加了.prop()方法,因为在有些浏览器中比如说只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked"。所以,从1.6开 始,jq提供新的方法“prop”来获取这些属性。
以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
那么,什么时候使用attr,什么时候使用prop??
1.添加属性名称该属性就会生效应该使用prop.2.是有true,false两个属性使用prop.3.其他则使用attr
<div>
<input id="My_Cbox" type="checkbox" value="check1" checked="checked"/>
check1
</div> <script type="text/javascript">
$(function () {
alert($("#My_Cbox").attr("checked")); //返回checked (或undefined)
alert($("#My_Cbox").prop("checked")); //返回true (或false) })
</script>
下面这张图很好记录什么时候运用它们:
最近有个妹子弄的一个关于扩大眼界跟内含的订阅号,每天都会更新一些深度内容,在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣),当然可以关注后输入:github 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;
Jquery重新学习之二[属性attr(),removeAttr(),prop(),removeProp()]的更多相关文章
- 查找索引/ie滤镜/动态背景/属性attr和prop
1. 查找索引 查找当前元素在指定范围内的索引序号,示例: $('.right_newestState_con').find('em').index($(this)); 2. ie滤镜 利用ie的私有 ...
- jquery操作属性 attr()和 prop()兼容性问题
jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的 ...
- Jquery重新学习之四[核心属性与文档处理属性]
1:核心.each(callback),size(),length(),get([index]) 1.1 .each(callback)通过它可以遍历对象.数组的属性值并进行处理 <form i ...
- JQuery 1.6之后,获取属性推荐用prop
今天在做界面,要获取CheckBox的是否被选中, var ck=$("#id").attr("checked"); 但是这样取得的值是undefined, 查 ...
- jQuery基础学习
一.简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“Write ...
- jQuery源代码学习之八——jQuery属性操作模块
一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...
- jQuery中attr()、prop()、data()用法及区别
.attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...
- jQuery attr removeAttr 属性操作
jQuery attr removeAttr 属性操作 <%@ page language="java" import="java.util.*" pag ...
- jquery 学习(二) - 属性操作
html代码 <div class="n1" zdy="z1">AAA <p>1111111</p> <input t ...
随机推荐
- fpdf中文乱码,添加字符集
中文乱码 引入Olivier的chinese.php(点击下载) 支持中文,其中有Big5,GB两种 使用方法也很简单 $pdf->AddBig5Font(); $pdf->SetFont ...
- Codechef APRIL14 ANUCBC Cards, bags and coins 背包DP变形
题目大意 有n个数字,选出一个子集,有q个询问,求子集和模m等于0的方案数%1000000009.(n <= 100000,m <= 100,q <= 30) 假设数据很小,我们完全 ...
- noip200706字符串的展开
试题描述: 在初赛普及组的“阅读程序写结果”的问题中,我们曾给出一个字符串展开的例子:如果在输入的字符串中,含有类似于“d-h”或者“4-8”的字串,我们就把它当作一种简写,输出时,用连续递增的字母获 ...
- Rails -- 自动清除日志
在开发模式中,开发环境日志会越来越大,所以需要设置自动清理,省内存. 在 config/initializers中新建一个文件 clear_blog.rb 编写如下代码 if Rails.env.de ...
- Ext NumberField使用
Ext.onReady(function(){ Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget="side"; v ...
- HF Reader
- SLVA299A : Load Disconnect ( Input to Output Isolation ) for the TPS61040
http://www.ti.com/lit/an/slva299a/slva299a.pdf Many boost converters have an external rectifier diod ...
- 移动端 关于 键盘将input 框 顶上去的解决思路---个人见解
在移动端,经常会遇到input获得焦点时候弹出的虚拟键盘将整体页面布局打乱的情况. 比如说是这种 输入框未获得焦点键盘未抬起的时候: 输入框获得焦点键盘抬起的时候 这种情况下,不管是上面的textar ...
- pytest文档11-assert断言
前言 断言是写自动化测试基本最重要的一步,一个用例没有断言,就失去了自动化测试的意义了.什么是断言呢? 简单来讲就是实际结果和期望结果去对比,符合预期那就测试pass,不符合预期那就测试 failed ...
- matlab 图像常用函数
Canny function [ canny ] = canny( rgb ) temp=rgb2gray(rgb); canny=edge(temp,'canny'); end 灰度 temp=rg ...