jQuery之DOM属性
1. .addClass()方法：为每个匹配的元素添加指定的样式类名。值得注意的是设个方法不会替换一个样式类名。他只是简单的添加一个样式类名到元素上。对所有匹配的元素可以一次添加多个用空格隔开的样式类名。像这样：
$("p").addClass("myClass yourClass");
这个方法通常个.removeClass()方法一起使用，用来切换样式，像这样：
$("p").removeClass("myClass noClass").addClass("yourClass");
这是一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<style type="text/css">
.colorBlue{
color: blue;
}
.colorRed{
color: red;
}
</style>
</head>
<body>
<p id="p1">这是段落1</p>
<p id="p2">这是段落2</p>
<p id="p3">这是段落3</p>
</body>
<script type="text/javascript">
$(function(){
$("#p2").addClass("colorBlue");
$("#p3").addClass("colorRed");
})
</script>
</html>
例子显示图片：
2. .attr()方法：获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。注意: 除少数属性意外，属性值都是字符串，如value和tabindex。
当属性值没有被设置的时候（这里的设置是在元素里面必须有声明这个属性，而且属性可以自己定义，例如给一个input元素一个“ahref”属性），.attr()方法将返回undefined。还有一个方法是.prop()方法，这个方法可以获取元素的的属性（property）值，一般.prop()方法里面说的是元素的特性，也就是说这里的属性是元素本来就有的，用户自己定义的使用这个方法会返回undefined，下面举一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
</head>
<body>
<input type="checkbox" id="swim" ahref="111" value="111"/>游泳<br />
<input type="button" id="getVal" value="确定" />
<div id="textDiv"></div>
</body>
<script type="text/javascript">
$(function(){
$("#getVal").click(function(){
$("#textDiv").html("<table border='1px solid black'>"
+"<tr><th>属性名</th><th>.attr()方法</th><th>.prop()方法</th></tr>"
+"<tr><td>checked</td><td>"+$("#swim").attr("checked")+"</td><td>"+$("#swim").prop("checked")+"</td></tr>"
+"<tr><td>ahref</td><td>"+$("#swim").attr("ahref")+"</td><td>"+$("#swim").prop("ahref")+"</td></tr>"
+"<tr><td>value</td><td>"+$("#swim").attr("value")+"</td><td>"+$("#swim").prop("value")+"</td></tr>"
+"</table>");
});
})
</script>
</html>
例子显示图片：
3. .hasClass(className)方法：确定任何一个匹配的元素是否有被分配的类。存在就返回true，反则会犯false。这个方法很简单，就不写例子了。
4. .html()方法：这个方法可以获取匹配元素中的HTML内容或者是这只匹配元素的HTML内容，在前面的.attr()方法中的例子代码中用到了这个方法，这个也是看以下就会使用的。
5. .prop()方法：在之前跟.attr()方法做了比较。
6. .removeAttr()方法：为匹配的元素集合中的每个元素中移除一个属性（attribute）。使用了原生的javascript的removeAttribute()函数，但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。
7. .removeClass()方法：移除集合中每个匹配元素上一个，多个或全部样式。
8. .removeProp()方法：为集合中匹配的元素删除一个属性（property）。
9. .toggleClass()方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。
10. .val()方法：获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。
jQuery之DOM属性的更多相关文章
- jquery获取dom属性方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- jQuery 数据 DOM 元素 核心 属性
jQuery 参考手册 - 数据 .clearQueue() 从序列中删除仍未运行的所有项目 .clearQueue(queueName) $("div").clearQueue( ...
- JQuery处理DOM元素-属性操作
JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...
- 【Jquery系列】之DOM属性
1 概述 本章将结合JQuery官方API,对Jquery属性进行分析与讲解.主要讲.addClass(),.attr(),,hasClass(),,html(),.prop(),.removeA ...
- attr prop jquery关于获取DOM属性值的两个函数
$('#domid').attr('acitve') $('#domid').prop('checked') // 在使用JQUERY获取DOM元素的属性时,有两个函数,attr 和 prop < ...
- 使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 源码分析(十三) 数据操作模块 DOM属性 详解
jQuery的属性操作模块总共有4个部分,本篇说一下第2个部分:DOM属性部分,用于修改DOM元素的属性的(属性和特性是不一样的,一般将property翻译为属性,attribute翻译为特性) DO ...
- jQuery属性操作之DOM属性操作
DOM属性操作是对DOM元素的属性进行读取.设置和移除操作, 比如prop(). removeProp(). 1. prop() 1.1 使用prop()获取返回值 prop() 用于返回属性值时, ...
随机推荐
- sharepoint2013用场管理员进行文档库的爬网提示"没有权限,拒绝"的解决方法
爬网提示被拒绝,场管理员明明可以打开那个站点的,我初步怀疑是:环回请求(LoopbackRequest)导致的 解决方法就是修改环回问题.修改注册表 具体操作方法: http://www.c-shar ...
- Objective-C Runtime 运行时之一：类与对象
Objective-C语言是一门动态语言,它将很多静态语言在编译和链接时期做的事放到了运行时来处理.这种动态语言的优势在于:我们写代码时更具灵活性,如我们可以把消息转发给我们想要的对象,或者随意交换一 ...
- OpenGL FrameBufferCopy相关Api比较（glCopyPixels,glReadPixels,glCopyTexImage2D,glFramebufferTexture2D）
OpenGL FrameBufferCopy相关Api比较 glCopyPixels,glReadPixels,glCopyTexImage2D,glFramebufferTexture2D 标题所述 ...
- Atitit.反编译apk android源码以及防止反编译apk
Atitit.反编译apk android源码以及防止反编译apk 1.1. Tool apk逆向助手1 1.2. 二.使用dex2jar + jd-gui 得到apk的java源码1 1.3. 用 ...
- 国外干货！6个方法助你设计出优秀的APP
伟大的设计来源于一致性和细致化,而其实只要有足够的纪律,每个团队都可以实现这一点. 品牌(源码:http://www.jinhusns.com/Products/Download/?type=xcj) ...
- PL/SQL Developer连接本地Oracle 11g 64位数据库
转摘:http://www.cnblogs.com/ymj126/p/3712727.html 用于学习,笔记,以备后用. 1.登录PL/SQL Developer 这里省略Oracle数据库和PL/ ...
- 利用 filter 机制 给 静态资源 url 加上时间戳，来防止js和css文件的缓存，利于开发调试
直接上代码: public class WeiXinFilter implements Filter{ private static Logger logger = LoggerFactory.get ...
- ORACLE 字符串超长问题解决方案
前两天我在工作中遇到这样一个问题,我们有一个程序是用来增量抽取EBS 中的表数据的,有的是全量抽取,即先删除原表中的数据,然后重新抽取数据,示例代码如下: truncate table ods_emp ...
- 【转】深入理解SQL的四种连接-左外连接、右外连接、内连接、全连接
[原文]:http://www.jb51.net/article/39432.htm 1.内联接(典型的联接运算,使用像 = 或 <> 之类的比较运算符).包括相等联接和自然联接. ...
- UrlRewritingNet伪静态的使用方法与解决方案（URL重写）
在建站初期时,我们往往需要考虑的是使用真静态还是伪静态,这对于往后的站点配置,延展性都会产生深远的影响. 我使用伪静态的唯一目的:SEO优化.毋容置疑,伪静态在对于Spider是非常有利的,因此,我更 ...