zoukankan      html  css  js  c++  java
  • jQuery — 属性操作

    一、属性操作

      1、attr(name |pro | key,val | fn)

        用法:

    格式:$("img").attr("src")   返回文档中所有图像的 src 属性值               $("img").attr({src : "test.jpg", alt : "Test Img"})  为所有的图像设置 src 和 alt 属性

    说明:设置或返回被选元素的属性值

    注意:该方法不推荐操作 checked、readOnly、selected、disabled 等,此方法还可以操作非标准的属性,如自定义属性:abc、oob等

      2、removeAttr(name)

        用法:

    格式:$("img").removeAttr("src"):将文档中图像的 src 属性删除

    说明:从每一个匹配的元素中删除一个属性

    注意:1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的

      3、prop(n | p | k,v | f)

        用法:

    格式:$("input[type='checkbox']").prop("checked") 选中复选框为true,没选中为false      $("input[type='checkbox']").prop({disabled : true}) :禁用所有的复选框

    说明:获取在匹配的元素集中的第一个元素的属性值

    注意随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误,所以只推荐操作 checked、readOnly、selected、disabled 等等

      4、removeProp(name)

        用法:

    格式:$("input[type='checkbox']").removeProp("checked")

    说明:用来删除由 prop() 方法设置的属性集

    二、CSS 类

      1、addClass(class | fn)

        用法:

    格式:$("p").addClass("myclass1 myclass2")  给所有的 p 元素添加两个类名

    说明:为每个匹配的元素添加指定的类名

      2、removeClass([class | fn])

        用法:

    格式:$("p").removeClass()       删除匹配元素的所有类        $("p").removeClass(".myclass1")  从匹配的元素中删除 'myclass1' 类名

    说明:从所有匹配的元素中删除全部或指定的类

      3、toggleClass(class | fn[,sw])

        用法:

    格式:$("p").toggleClass("myclass")

    说明:如果存在(不存在)就删除(添加)一个类

    三、HTML 代码/文本/值

      1、html([val | fn])

        用法:

    格式:$("p").html():表示获取 p 元素的内容              $("p").html("<b>hello</b> world"):表示设置所有 p 元素的内容

    说明:获取/设置匹配元素的 HTML 内容,该方法如果没有参数,表示获取值;如果有参数表示设置值(同 innerHTML)

      2、text([val | fn])

        用法:

    格式:$("p").text():表示获取 p 元素的文本内容         $("p").text("Hello world"):表示设置所有 p 元素的文本内容

    说明:获取/设置匹配元素的内容,如果没有参数,表示获取值;如果有参数表示设置值(同 innerText)

      3、val([val | fn | arr])

        用法:

    格式:$("input").val()   获取文本框的值                        $("input").val("Hello world"):设置文本框的值

    说明:获取/设置匹配元素的当前值和表单的value属性值,包括 select,如果多选,将返回一个数组,包含所选的值(同 value)

      val() 除此之外,该方法还能同时设置多个表单想的选中状态:

        Demo:

     1 <!DOCTYPE html>
     2 <html lang="zh_CN">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title><script type="text/javascript" src="script/jquery-1.10.3.js"></script>
     6     <script type="text/javascript">
     7         $(function () {
     8             /*
     9             // 批量操作单选
    10             $(":radio").val(["radio2"]);
    11             // 批量操作筛选框的选中状态
    12             $(":checkbox").val(["checkbox3","checkbox2"]);
    13             // 批量操作多选的下拉框选中状态
    14             $("#multiple").val(["mul2","mul3","mul4"]);
    15             // 操作单选的下拉框选中状态
    16             $("#single").val(["sin2"]);
    17             */
    18             $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]
    19             );
    20         });
    21     </script>
    22 </head>
    23 <body>
    24 <body>
    25 单选:
    26 <input name="radio" type="radio" value="radio1" />radio1
    27 <input name="radio" type="radio" value="radio2" />radio2
    28 <br/>
    29 多选:
    30 <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    31 <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    32 <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
    33 <br/>
    34 下拉多选 :
    35 <select id="multiple" multiple="multiple" size="4">
    36     <option value="mul1">mul1</option>
    37     <option value="mul2">mul2</option>
    38     <option value="mul3">mul3</option>
    39     <option value="mul4">mul4</option>
    40 </select>
    41 <br/>
    42 下拉单选 :
    43 <select id="single">
    44     <option value="sin1">sin1</option>
    45     <option value="sin2">sin2</option>
    46     <option value="sin3">sin3</option>
    47 </select>
    48 </body></body>
    49 </html>
  • 相关阅读:
    php数据库常用函数
    什么是RESTful API
    RESTful API 设计指南
    json和jsonp的使用区别
    Memcached, Redis, MongoDB区别
    入门系列之在Nginx配置Gzip
    100行代码搞定抖音短视频App,终于可以和美女合唱了。
    游戏开发者注意!这个音频SDK可以完美兼容所有主流游戏引擎
    快速上手:在CVM上安装Apache
    聚焦小游戏技术生态,腾讯游戏云GAME-TECH落地厦门
  • 原文地址:https://www.cnblogs.com/niujifei/p/12397981.html
Copyright © 2011-2022 走看看