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()]的更多相关文章

  1. 查找索引/ie滤镜/动态背景/属性attr和prop

    1. 查找索引 查找当前元素在指定范围内的索引序号,示例: $('.right_newestState_con').find('em').index($(this)); 2. ie滤镜 利用ie的私有 ...

  2. jquery操作属性 attr()和 prop()兼容性问题

    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的 ...

  3. Jquery重新学习之四[核心属性与文档处理属性]

    1:核心.each(callback),size(),length(),get([index]) 1.1 .each(callback)通过它可以遍历对象.数组的属性值并进行处理 <form i ...

  4. JQuery 1.6之后,获取属性推荐用prop

    今天在做界面,要获取CheckBox的是否被选中, var ck=$("#id").attr("checked"); 但是这样取得的值是undefined, 查 ...

  5. jQuery基础学习

    一.简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“Write ...

  6. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

  7. jQuery中attr()、prop()、data()用法及区别

    .attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...

  8. jQuery attr removeAttr 属性操作

    jQuery attr removeAttr 属性操作 <%@ page language="java" import="java.util.*" pag ...

  9. jquery 学习(二) - 属性操作

    html代码 <div class="n1" zdy="z1">AAA <p>1111111</p> <input t ...

随机推荐

  1. fpdf中文乱码,添加字符集

    中文乱码 引入Olivier的chinese.php(点击下载) 支持中文,其中有Big5,GB两种 使用方法也很简单 $pdf->AddBig5Font(); $pdf->SetFont ...

  2. Codechef APRIL14 ANUCBC Cards, bags and coins 背包DP变形

    题目大意 有n个数字,选出一个子集,有q个询问,求子集和模m等于0的方案数%1000000009.(n <= 100000,m <= 100,q <= 30) 假设数据很小,我们完全 ...

  3. noip200706字符串的展开

    试题描述: 在初赛普及组的“阅读程序写结果”的问题中,我们曾给出一个字符串展开的例子:如果在输入的字符串中,含有类似于“d-h”或者“4-8”的字串,我们就把它当作一种简写,输出时,用连续递增的字母获 ...

  4. Rails -- 自动清除日志

    在开发模式中,开发环境日志会越来越大,所以需要设置自动清理,省内存. 在 config/initializers中新建一个文件 clear_blog.rb 编写如下代码 if Rails.env.de ...

  5. Ext NumberField使用

    Ext.onReady(function(){ Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget="side"; v ...

  6. HF Reader

  7. 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 ...

  8. 移动端 关于 键盘将input 框 顶上去的解决思路---个人见解

    在移动端,经常会遇到input获得焦点时候弹出的虚拟键盘将整体页面布局打乱的情况. 比如说是这种 输入框未获得焦点键盘未抬起的时候: 输入框获得焦点键盘抬起的时候 这种情况下,不管是上面的textar ...

  9. pytest文档11-assert断言

    前言 断言是写自动化测试基本最重要的一步,一个用例没有断言,就失去了自动化测试的意义了.什么是断言呢? 简单来讲就是实际结果和期望结果去对比,符合预期那就测试pass,不符合预期那就测试 failed ...

  10. matlab 图像常用函数

    Canny function [ canny ] = canny( rgb ) temp=rgb2gray(rgb); canny=edge(temp,'canny'); end 灰度 temp=rg ...