【Jquery系列】之DOM属性

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。
• 可以转载该博客，但必须著名博客来源。