1   概述

本章将结合JQuery官方API，对Jquery属性进行分析与讲解。主要讲.addClass(),.attr(),,hasClass(),,html(),.prop(),.removeAtrr(),.removeClass(),.removeProp(),.toggleClass(),.val()  。

2   DOM属性

2.1  .addClass()

为指定元素添加样式。

(1)addClass(string className)

为制定的样式添加一个或多个样式名

a.为指定元素添加一个样式名

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <script src="~/Scripts/jquery-1.10.2.js"></script>

     <title>JQuery函数</title>

     <script>

         $(document).ready(function () {

             $("#btnJquery").click(function () {

                 $("#div_id").addClass("div_class");

             })

         })

     </script>

 </head>

 <body>

     <div id="div_id">为id="div_id"的div添加单个类名:div_class</div>

     <input id="btnJquery" type="button" value="Jquery" />

 </body>

 </html>

测试结果：

b.为多个元素添加多个样式名

注：多个类名之间由空格隔开

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <script src="~/Scripts/jquery-1.10.2.js"></script>

     <title>JQuery函数</title>

     <script>

         $(document).ready(function () {

             $("#btnJquery").click(function () {

                 $("#div_id").addClass("div_class div_class1 div_class2 div_class3");

             })

         })

     </script>

 </head>

 <body>

     <div id="div_id">为id="div_id"的div添加单个类名:div_class</div>

     <input id="btnJquery" type="button" value="Jquery" />

 </body>

 </html>

测试结果：

(2)addClass(function(index){})

注：index为匹配元素的索引位置

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <script src="~/Scripts/jquery-1.10.2.js"></script>

    <title>JQuery函数</title>

    <script>

        $(document).ready(function () {

            $("#btnJquery").click(function () {

                $("ul li").addClass(function (index) {

                    return "li-" + index;

                })

            })

        })

  </script>

 </head>

 <body>

     <ul>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

     </ul>

     <input id="btnJquery" type="button" value="Jquery"/>

 </body>

 </html>

测试结果：

2.2  .attr()

获取匹配元素集合中的第一个元素的属性值或设置每一个匹配元素的一个或多个属性。

(1)attr(string attributeName)

获取匹配的元素集合中的第一个元素的属性值

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <script src="~/Scripts/jquery-1.10.2.js"></script>

     <title>JQuery函数</title>

     <script>

         $(document).ready(function () {

             $("#btnJquery").click(function () {

                 var attrText = $("#div_idFirst").attr("id")

                 $("#div_idSecond").text(attrText);

             })

         })

     </script>

 </head>

 <body>

     <div id="div_idFirst">第一个div</div>

     <div id="div_idSecond"></div>

     <input id="btnJquery" type="button" value="Jquery" />

 </body>

 </html>

测试结果：

(2)attr(string attributeName,string value)

设置单个属性名和属性值

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <script src="~/Scripts/jquery-1.10.2.js"></script>

     <title>JQuery函数</title>

     <script>

         $(document).ready(function () {

             $("#btnJquery").click(function () {

                 //var attrText = $("#div_idFirst").attr("id")

                 $("#div_idSecond").attr("class","div_classSecond");

             })

         })

     </script>

 </head>

 <body>

     <div id="div_idFirst">第一个div</div>

     <div id="div_idSecond"></div>

     <input id="btnJquery" type="button" value="Jquery" />

 </body>

 </html>

测试结果：

(3)attr(PlainObject  attributes)

设置多个属性和属性值，以 属性-值 格式

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <script src="~/Scripts/jquery-1.10.2.js"></script>

     <title>JQuery函数</title>

     <script>

         $(document).ready(function () {

             $("#btnJquery").click(function () {

                 //var attrText = $("#div_idFirst").attr("id")

                 $("#div_idSecond").attr({

                     "class": "div_classSecond",

                     "title":"divSecond"

                 });

             })

         })

     </script>

 </head>

 <body>

     <div id="div_idFirst">第一个div</div>

     <div id="div_idSecond"></div>

     <input id="btnJquery" type="button" value="Jquery" />

 </body>

 </html>

(4)attr(string attributeName,function(index,attr))

通过函数的形式，设置属性和属性值

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <script src="~/Scripts/jquery-1.10.2.js"></script>

     <title>JQuery函数</title>

     <script>

         $(document).ready(function () {

             $("#btnJquery").click(function () {

                 $("img").attr("src",function () {

                     return "Images/" + this.title;

                 });

             })

         })

     </script>

 </head>

 <body>

      <img src="~/BlogImgs/Jquery.png" title="Jquery"/>

     <input id="btnJquery" type="button" value="Jquery" />

 </body>

 </html>

测试结果：

2.3  .hasClass()

确定任何一个匹配元素是否有被分配给定的类样式,元素可能会有个的样式名。在 HTML 中，使用空格来分隔多个样式：

(1)hasClass(string className)

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <script src="~/Scripts/jquery-1.10.2.js"></script>

     <title>JQuery函数</title>

     <script>

         $(document).ready(function () {

             $("#btnJquery").click(function () {

               var div1=$("#div_first").hasClass("div1");

               var div2 = $("#div_second").hasClass("div1");

              })

         })

     </script>

 </head>

 <body>

     <div id="div_first" class="div1">The first div is:</div>

     <div id="div_second" class="div2">The second div is:</div>

     <input id="btnJquery" type="button" value="Jquery" />

 </body>

 </html>

测试结果：

2.4  .prop()

prop表示特性，attr().表示属性，比较简单，略过。

2.5   .removeAtrr()

略过

2.6  .removeClass()

略过

2.7 . removeProp()

略过

2.8  .toggleClass()

在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。

(1)toggleClass(string className)

在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名。如果在匹配的元素集合中的每个元素上存在该样式类就会被移除；如果某个元素没有这个样式类就会加上这个样式类

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <script src="~/Scripts/jquery-1.10.2.js"></script>

     <title>JQuery函数</title>

     <script>

         $(document).ready(function () {

             $("#btnJquery").click(function () {

                 $("div").toggleClass("idDiv2");

             })

         })

     </script>

 </head>

 <body>

     <div class="idDiv1"></div>

     <div class="idDiv1 idDiv2"></div>

     <div class="idDiv1 idDiv2 idDiv3"></div>

     <input id="btnJquery" type="button" value="Jquery" />

 </body>

 </html>

测试结果：

如下会在原本样式与设置样式来回切换

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <script src="~/Scripts/jquery-1.10.2.js"></script>

     <title>JQuery函数</title>

     <script>

         $(document).ready(function () {

             $("#btnJquery").click(function () {

                 $("div").toggleClass("idDiv2 div4");

             })

         })

     </script>

 </head>

 <body>

     <div class="idDiv1"></div>

     <div class="idDiv1 idDiv2"></div>

     <div class="idDiv1 idDiv2 idDiv3"></div>

     <input id="btnJquery" type="button" value="Jquery" />

 </body>

 </html>

测试结果：

(2)toggleClass(string className，Boolean switch)

className在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名;switch,一个布尔值，用于判断样式是否应该被添加或移除。

(3)toggleClass(index,calss ,switch)

2.9  .val()

获取匹配的元素集合中第一个元素的当前值或设置匹配元素集合中的每个元素的值

(1)val()

获取匹配的元素集合中第一个元素的当前值，.val()方法主要用于获取表单元素的值，比如 input, select 和 textarea。对于 <select multiple="multiple"> 元素, .val()方法返回一个包含每个选择项的数组，如果没有选择性被选中，它返回null。

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <script src="~/Scripts/jquery-1.10.2.js"></script>

     <title>JQuery函数</title>

     <script>

         $(document).ready(function () {

             $("#btnJquery").click(function () {

              var valInput= $("#idInput").val();

              var valSelect= $("#idSelect").val();

              })

         })

     </script>

 </head>

 <body>

     <input type="text" id="idInput"/>

     <select id="idSelect">

         <option>opt1</option>

         <option>opt2</option>

         <option>opt3</option>

     </select>

     <input id="btnJquery" type="button" value="Jquery" />

 </body>

 </html>

测试结果：

(2)val(string value)或val(Array value)

为指定元素设置值

 <!DOCTYPE html>

 <html>

 <head>

   <style>

   button { margin:4px; cursor:pointer; }

   input { margin:4px; color:blue; }

   </style>

   <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

 </head>

 <body>

   <div>

     <button>Feed</button>

     <button>the</button>

     <button>Input</button>

   </div>

   <input type="text" value="click a button" />

 <script>

     $("button").click(function () {

       var text = $(this).text();

       $("input").val(text);

     });

 </script>

 </body>

 </html>

测试结果：

(3)val(function(index,value))

此方法通常用于设置表单字段的值,index表示当前元素的索引，value表示当前元素的值

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <script src="~/Scripts/jquery-1.10.2.js"></script>

     <title>JQuery函数</title>

     <script>

         $(document).ready(function () {

             $("#btnJquery").click(function () {

                 var valInput = $("#idInput").val(function (index,value) {

                     return value.toUpperCase().toString();

                 })

             })

         })

     </script>

 </head>

 <body>

     <input type="text" id="idInput"/>

     <input id="btnJquery" type="button" value="Jquery" />

 </body>

 </html>

测试结果：

3   参考文献

【01】http://www.jquery123.com/category/attributes/

【02】http://api.jqueryui.com

4   版权

  • 感谢您的阅读，若有不足之处，欢迎指教，共同学习、共同进步。
  • 博主网址：http://www.cnblogs.com/wangjiming/。
  • 极少部分文章利用读书、参考、引用、抄袭、复制和粘贴等多种方式整合而成的，大部分为原创。
  • 如您喜欢，麻烦推荐一下；如您有新想法，欢迎提出，邮箱：2016177728@qq.com。
  • 可以转载该博客，但必须著名博客来源。

【Jquery系列】之DOM属性的更多相关文章

  1. jQuery系列：DOM操作

    1. 访问元素 在访问页面时,需要与页面中的元素进行交互式的操作.在操作中,元素的访问主要包括对元素属性.内容.值.CSS的操作. 1.1 元素属性操作 1.1.1 设置或返回被选元素的属性值 语法格 ...

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

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

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

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

  4. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

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

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

  6. jQuery系列（四）：jQuery的属性操作

    jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...

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

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

  8. Jquery操作的是内存数据，H5 dataset操作的是dom属性

    Jquery操作的是内存数据,H5操作的是dom属性

  9. 使用 jQuery对象设置页面中 ＜ul＞ 元素的标记类型，并使用 DOM 对象设置 ＜li＞ 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性

    查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...

随机推荐

  1. 利用Python循环（包括while&for）各种打印九九乘法表

    一.for循环打印九九乘法表 #注意:由于缩进在浏览器不好控制,请大家见谅,后续会有图片传入. 1.1 左下角 for i in range(1,10): for j in range(1,i+1): ...

  2. 学Java的前景与就业，资深程序员教你怎么开始学Java！

    IT行业一直是就业的热门岗位,程序员这个职业稳定性和收入比都有着不错的前景,那么学Java的前景和就业是什么样的呢?随着入行Java的准程序员越来越多,各种学习Java的流派也层出不穷!其实在编程的世 ...

  3. 使用Jquery.js框架和CSS3实现3D相册的制作

    有关3D相册的制作主要包括以下几个知识点: 1.有关图片的位置摆放,也就是一个相对定位绝对定位的使用: 2.有关CSS3中transform属性的使用(transform-style: preserv ...

  4. 漫淡面向对象——POJO对象

    产品或者服务由数据存储和数据计算组成.pojo对象就是用于数据存储.一旦确定后,整个应用或者产品的数据来源就确定.比如一个页面或者功能需要使用什么数据就可以快速找到对应的对象或者通过对象的关系找出来. ...

  5. JAVA基础面试(二)

    11.是否可以从一个static方法内部发出对非static方法的调用? 不可以.因为非static方法是要与对象关联在一起的,必须创建一个对象后,才可以在该对象上进行方法调用,而static方法调用 ...

  6. Maven依赖分析

    背景 昨天帮一位同事排查了一个依赖冲突的问题.问题的现象就是在IntelliJ IDEA运行项目正常,但是打包(Maven assembly jar)之后传到服务器运行失败,报错:Caused by: ...

  7. cmd+任务管理器解决端口被占用的问题

    1.打开cmd命令行 2.输入命令netstat –ano,会显示所有被占用的端口号以及占用该端口的程序所对应的进程号. (local address下面是端口号,PID是占用端口的某程序的进程号) ...

  8. webpack 3.X学习之图片处理

    CSS中图片处理 在src目录下新建一个images目录,把图片放入images文件夹中:在index.html文件中增加一个div标签: /src/index.html: <div id=&q ...

  9. 说说缓存，说说Redis

    无论是客户端还是服务端,缓存都是必不可少的一种提升用户体验的策略,大家在平时开发中,有意无意都会用到缓存,比如说 Android 开发的同学们,所有的图片框架,基本都有用到缓存技术,服务端那就完全不用 ...

  10. 解决thymeleaf layout布局不生效

    今天使用thymeleaf layout布局时总是不生效,特此把解决问题的步骤和几个关键点记录下来备忘. 一.检查依赖 1.thymeleaf必备maven依赖: <dependency> ...