jQuery属性操作之DOM属性操作
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属性操作的更多相关文章
- jQuery 源码分析(十三) 数据操作模块 DOM属性 详解
jQuery的属性操作模块总共有4个部分,本篇说一下第2个部分:DOM属性部分,用于修改DOM元素的属性的(属性和特性是不一样的,一般将property翻译为属性,attribute翻译为特性) DO ...
- 【Jquery系列】之DOM属性
1 概述 本章将结合JQuery官方API,对Jquery属性进行分析与讲解.主要讲.addClass(),.attr(),,hasClass(),,html(),.prop(),.removeA ...
- js提取DOM属性和设置DOM属性值
<style type="text/css"> #div1{width:100px;height:100px;} #div2{background} </styl ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- JQuery操作元素的属性与样式及位置 复制代码
<script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...
- JQuery操作元素的属性与样式及位置
<script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...
- Jquery框架1.选择器|效果图|属性、文档操作
1.JavaScript和jquery的对比 书写繁琐,代码量大 代码复杂 动画效果,很难实现.使用定时器 各种操作和处理 <!DOCTYPE html> <html lang=&q ...
- jQuery二——属性操作、文档操作、位置属性
一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...
- 第二十课:js中如何操作元素的属性系统
本章的内容有点复杂,我将用简单的方式来介绍重要的东西,不重要的东西,这里就不讲了,讲了也毛用. 通常我们把对象的非函数成员叫做属性.对元素节点来说,其属性大题分为两大类,固有属性和自定义属性.固有属性 ...
随机推荐
- linux系统安全设置加固
描述 设置SSH空闲超时退出时间,可降低未授权用户访问其他用户ssh会话的风险 检查提示 -- 加固建议 编辑/etc/ssh/sshd_config,将ClientAliveInterval ...
- PowerDesigner最基础的使用方法
1:入门级使用PowerDesigner软件创建数据库(直接上图怎么创建,其他的概念知识可自行学习) 我的PowerDesigner版本是16.5的,如若版本不一样,请自行参考学习即可.(打开软件即是 ...
- npm无法安装node-sass的解决方法
使用npm install 命令安装node-sass时,经常出现安装失败的情况.原因在于npm服务器在美国,还有就是某强大的防火墙作用.导致模块无法下载. npm install node-sass ...
- 基于MFC对话框的2048游戏
在之前一篇<简单数字拼板游戏学习>基础上修改,地址:http://www.cnblogs.com/fwst/p/3706483.html 开发环境:Windows 7/ Visual St ...
- JS数组去掉重复元素
JS数组去掉重复元素,这里提供3中写法. var arr =[1,2,3,4,5,6,3,4,7,2,4,1,8]; 输出:[1,2,3,4,5,6,7,8]; 1.使用indexOf() arr.i ...
- ADF简单介绍
1.ADF也是用的MVC的分层模式,如下图所示 2.Model层代理数据服务将数据关联在View层,用户则是在View层的UI界面上的操作来更改Model层代理的数据,Controller控制层执行用 ...
- php-amqplib库操作RabbitMQ
RabbitMQ基本原理 首先,建议去大概了解下RabbitMQ(以下简称mq)的基本工作原理,可以参考这篇文章最主要的几个对象如下 对象名称 borker 相当于mq server channe ...
- js 扁平化输出数组
1.使用数组的flat方法 [1,2,[3,[4,5]]].flat(Infinity) //[1, 2, 3, 4, 5] 2.实现方式二: var arr = [[1, 2, 23], [13, ...
- uuid:全局唯一标识符
uuid1:IEEE 802 MAC地址 import uuid ''' UUID1值使用主机的MAC地址计算.uuid模块使用getnode函数来获取当前系统的MAC值 ''' print(uuid ...
- python : import详解。
用户输入input() input()函数: 用于从标准输入读取数值. >>> message = input('tell me :') tell me :hahah >> ...