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中如何操作元素的属性系统
本章的内容有点复杂,我将用简单的方式来介绍重要的东西,不重要的东西,这里就不讲了,讲了也毛用. 通常我们把对象的非函数成员叫做属性.对元素节点来说,其属性大题分为两大类,固有属性和自定义属性.固有属性 ...
随机推荐
- k8s之RBAC-基于角色的访问控制
一个在名称空间内的对象的完整url模板: Object_URL: /apis/<GROUP>/<VERSION>/namespaces/<NAMESPACE_NAME&g ...
- 论文阅读：《Bag of Tricks for Efficient Text Classification》
论文阅读:<Bag of Tricks for Efficient Text Classification> 2018-04-25 11:22:29 卓寿杰_SoulJoy 阅读数 954 ...
- BaseHandler的封装, 处理handler中的内存泄漏
package de.bvb.study.common; /** * 用于规范 Message.what此属性,避免出现魔法数字 */ public final class What { public ...
- [NOIP10.4模拟赛]2.y题解--折半搜索+状压计数
题目链接: 咕 闲扯: 这题暴力分似乎挺多,但是一些奇奇怪怪的细节没注意RE了,还是太菜了 分析: 首先我们考虑最naiive的状压DP ,\(f[u][v][state]\)表示u开头,v结尾是否存 ...
- js 中， set 与 数组 相互转换
主要用 Array.from 方法 1.array --> set (数组转set) let array = [1, 2, 3, 4]; let set = new Set(array); 2. ...
- debian上安装tmux
1.安装ncurses库 1.1.获取源码 wget https://invisible-island.net/datafiles/release/ncurses.tar.gz tar xvf ncu ...
- 原创js脚本实现百度网盘任意文件强制下载
代码: //get file list data var data=require("system-core:context/context.js").instanceForSys ...
- shell脚本读取文件值并进行比较
#!/bin/bash keyValue=$(cat /dev/mcu/keyValue) //从文件中获取键值,注意:变量名和等号之间不能有空格 if [ $keyValue == 9 ] //注意 ...
- 阿里云MySQL用Navicat连接问题
阿里云上装好MySQL用Navicat连接出现密码正确,Navicat连接测试失败.解决方案:网上众多方案,比如:放行3306端口啥子的,加入安全组啥子的.确认这些都没问题,还是出现密码正确,测试连接 ...
- Django ORM常用的字段和参数
ORM 常用字段 AutoField int自增列,必须填入参数 primary_key=True.当model中如果没有自增列,则自动会创建一个列名为id的列. IntegerField 一个整数类 ...