DOM属性操作是对DOM元素的属性进行读取、设置和移除操作， 比如prop()、 removeProp().

1. prop()

1.1 使用prop()获取返回值

　　prop() 用于返回属性值时， 则返回第一个匹配元素的值。

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>prop() Demo</title>

     <script type="text/javascript" src="jquery.js"></script>

     <script>

         $(function () {

             var cla = $("div").prop("class");

             console.log(cla);

             var id = $("div").prop("id");

             console.log(id);

         })

     </script>

 </head>

 <body>

     <div class="divClass" id="divId"></div>

 </body>

 </html>

1.2 使用prop()设置属性值

　　1.2.1 使用prop() 设置单个属性值

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>removeAttr() Demo</title>

     <script type="text/javascript" src="jquery.js"></script>

     <script>

         $(function () {

             $("div").prop("class", "divClass");

             $("div").prop("id", "divId");

         })

     </script>

 </head>

 <body>

     <div></div>

 </body>

 </html>

执行结果为：

　　1.2.2 使用prop()设置多个属性值

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>prop() Demo</title>

     <script type="text/javascript" src="jquery.js"></script>

     <script>

         $(function () {

             $("div").prop({

                 "class": "divClass",

                 "id": "divId"

             })

         })

     </script>

 </head>

 <body>

     <div></div>

 </body>

 </html>

执行结果为：

2. removeProp()

返回值：jQuery

描述： 为集合中匹配的元素删除一个属性(property)。

语法格式为：

$(selector).remoceProp(propertyName)

其中：

　　 propertyName

　　类型： string

　　要移除的属性的名称　

$(selector).removeProp()方法用来删除由$(selector).prop()方法设置的属性值。

若尝试移除DOM元素或window对象上的一些内建的属性(property)， 浏览器可能会产生错误。

如果真的这么做了， 那么jQuery首先会将属性(property)设置成 undefined， 然后忽略任何浏览器产生的错误。

一般来说， 只需要移除自定义的属性(property)， 而不是移除内建的(原生的)属性(property)。

注意：

　　不要使用此方法来删除原生的属性(property)， 比如checked， disabled或者selected， 这将会完全移除该属性。一旦移除， 不能再次被添加到元素上。

2.1 代码示例

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>removeProp() Demo</title>

     <script type="text/javascript" src="jquery.js"></script>

     <script>

         $(function () {

             var $para = $("p");

             $para.prop("luggageCode", 1234);

             $para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ".");

             $para.removeProp("luggageCode");

             $para.append("Now the secret luggage code is:", String($para.prop("luggageCode")), ".");

         })

     </script>

 </head>

 <body>

     <p></p>

 </body>

 </html>

执行结果为：

jQuery属性操作之DOM属性操作的更多相关文章

  1. jQuery 源码分析(十三) 数据操作模块 DOM属性 详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第2个部分:DOM属性部分,用于修改DOM元素的属性的(属性和特性是不一样的,一般将property翻译为属性,attribute翻译为特性) DO ...

  2. 【Jquery系列】之DOM属性

    1   概述 本章将结合JQuery官方API,对Jquery属性进行分析与讲解.主要讲.addClass(),.attr(),,hasClass(),,html(),.prop(),.removeA ...

  3. js提取DOM属性和设置DOM属性值

    <style type="text/css"> #div1{width:100px;height:100px;} #div2{background} </styl ...

  4. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  5. JQuery操作元素的属性与样式及位置 复制代码

    <script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...

  6. JQuery操作元素的属性与样式及位置

    <script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...

  7. Jquery框架1.选择器|效果图|属性、文档操作

    1.JavaScript和jquery的对比 书写繁琐,代码量大 代码复杂 动画效果,很难实现.使用定时器 各种操作和处理 <!DOCTYPE html> <html lang=&q ...

  8. jQuery二——属性操作、文档操作、位置属性

    一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...

  9. 第二十课：js中如何操作元素的属性系统

    本章的内容有点复杂,我将用简单的方式来介绍重要的东西,不重要的东西,这里就不讲了,讲了也毛用. 通常我们把对象的非函数成员叫做属性.对元素节点来说,其属性大题分为两大类,固有属性和自定义属性.固有属性 ...

随机推荐

  1. Algorithm negotiation failed

    #用pycharm工具ssh client 报 algorithm negotiation failed#导致原因:是ssh升级后,为了安全,默认不再采用原来一些加密算法,我们手工添加进去即可#目前出 ...

  2. java都13了， 8的新特性你还没不会用吗

    前言 java13都已经来了,很多同学还停留在使用java5的东西.如果在日常开发中没有使用上java8的一些新特性或者不会用.这篇文章对你可能有帮助. lambda表达式 介绍 lambda表达式是 ...

  3. Java 8 Collectors 类的静态工厂方法

    摘自<<Java 8 实战>> Collectors 类的静态工厂方法 工厂方法 返回类型 用于 toList List<T>  把流中所有项目收集到一个 List ...

  4. Django rest-framework框架-请求数据校验

    验证实例: class UserInfoSerializer(serializers.Serializer): title = serializer.CharField(error_messages= ...

  5. Innosetup设置控制面版中的名称显示和图标

    //设置控制面板中程序图标UninstallDisplayIcon={app}\logo.ico //设置控制面板中程序的名称Uninstallable=yesUninstallDisplayName ...

  6. C语言编译过程及相关文件

    1,C程序编译步骤 C代码编译成可执行程序经过4步: 1)预处理:宏定义展开.头文件展开.条件编译等,同时将代码中的注释删除,这里并不会检查语法 2)编译:检查语法,将预处理后文件编译生成汇编文件 3 ...

  7. flask开发环境

    1. 创建虚拟环境flask_py3 虚拟环境是一个互相隔离的目录 mkvirtualenv flask_py3 2.安装flask包 pip install flask==0.10.1 其他:导入f ...

  8. WPF实战案例-在线程内同步集合数据到UI线程

    有这样一个场景,在vm中,我们为了ui的体验,会异步访问后端接口,获取数据集合,如果这个集合绑定到界面,并且在线程内,怎么处理? 有人讲:this.Dispatcher.Invoke,如果在vm内呢? ...

  9. 使用Google Thumbnails 压缩图片

    背景说明:最近项目中需要用到一些图片文件的上传 ,但是有些图片很大,比如轮播图,大有的有几兆,这样加载一个首页都要很久,显然这样对用户体验是非常不友好的,对服务器资源将是一种浪费. 为了解决这个问题, ...

  10. Windows7用VirtualBox虚拟Ubuntu共享文件夹的终极方式

    在Win7用VirtualBox虚拟机安装Ubuntu后,共享文件夹再也不用手工mount了 安装增强工具包 设置共享文件夹后 VB已经自动挂载Windows文件夹到 /media/sf_*** 目录 ...