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属性的更多相关文章

  1. jquery获取dom属性方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  3. jQuery 数据 DOM 元素 核心 属性

    jQuery 参考手册 - 数据 .clearQueue() 从序列中删除仍未运行的所有项目 .clearQueue(queueName) $("div").clearQueue( ...

  4. JQuery处理DOM元素-属性操作

    JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...

  5. 【Jquery系列】之DOM属性

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

  6. attr prop jquery关于获取DOM属性值的两个函数

    $('#domid').attr('acitve') $('#domid').prop('checked') // 在使用JQUERY获取DOM元素的属性时,有两个函数,attr 和 prop < ...

  7. 使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  9. jQuery属性操作之DOM属性操作

    DOM属性操作是对DOM元素的属性进行读取.设置和移除操作, 比如prop(). removeProp(). 1. prop() 1.1 使用prop()获取返回值 prop() 用于返回属性值时, ...

随机推荐

  1. asp.netDataTable导出excel方法(2)

    上一篇文章提到看到同事导出excel的新方法,感觉比上一篇简单得多,所以想贴上来,与大家分享. 在后台拼数据,都是用的htmltable标签的写法: string line = "text- ...

  2. Linux下tar-rar-unrar解压/压缩缩命令大全

    转载请标明出处: http://www.cnblogs.com/why168888/p/5975559.html 本文出自:[Edwin博客园] RAR文件下载:http://www.rarlab.c ...

  3. HttpUrlConnection

    •HttpUrlConnection是java的标准类,继承UrlConnection类,二者都是抽象类.其对象主要通过URL的                                     ...

  4. 在 CentOS7 上部署 zookeeper 服务

    在 CentOS7 上部署 zookeeper 服务 1 用 SecureCRT 或 XShell 等 Linux 客户端工具连接至 CentOS7 服务器: 2 进入到 /usr/local/too ...

  5. TOP命令各个参数代表意义详解

    Top命令是Linux下常用的系统性能分析工具,能实时查看系统中各个进程资源占用情况. top - 16:24:25 up 284 days, 4:59, 1 user, load average: ...

  6. 【转】2016/2017 Web 开发者路线图

    链接:知乎 [点击查看大图] 原图来自LearnCodeAcademy最火的视频,learncode是YouTube上最火的Web开发教学频道,介绍包括HTML/CSS/JavaScript/Subl ...

  7. StringUtils工具类

    StringUtils源码,使用的是commons-lang3-3.1包.下载地址 http://commons.apache.org/lang/download_lang.cgi 以下是String ...

  8. Flume组件source，channel，sink源码分析

    LifeCycleState: IDLE, START, STOP, ERROR [Source]: org.apache.flume.Source 继承LifeCycleAware{stop() + ...

  9. 烂泥：haproxy学习之手机规则匹配

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb. 今天我们来介绍下有关haproxy匹配手机的一些规则配置. 一.业务需要 现在根据业务 ...

  10. shell 1到指定数累加

    #!/bin/bash read -p "输入尾数:" a expr $(seq -s " + " $a) #seq命令可以指定生成一个数到另一个数之间的所有整 ...