zoukankan      html  css  js  c++  java
  • jQuery操作属性的方法

    jQuery操作属性的方法

    1、一般属性的操作方法

    1.1、attr()方法 传一个参数用于获取传入的属性值,如果调用者为一个集合,则返回集合中第一个对象的属性值 传两个参数用于设置属性值,如果调用者为一个集合,则设置集合中每一个对象的属性值,如果该属性不存在,则自动增加该属性

    1.2、removeAttr()方法:传一个参数,用于移除所有找到的DOM对象的属性

    1.3、prop()方法:用法和作用与attr()方法一致 区别:当作用于布尔类型属性时(如:checked属性),获取到的是true/false值 而用attr()方法获取到的是属性名称/undefined

    1.4、removeProp()方法:用法和作用与removeAttr()方法一致

    1.5、注意点:

      a.传入的属性名和属性值均为字符串的形式传入;

      b.属性名和属性值的写法和在HTML标签内的写法完全一致;

       c.重复设置同一属性会造成覆盖。

    2、操作类属性相关方法

    2.1、addClass(class|fn)添加类

    2.2、removeClass([class|fn])删除类

    2.3、toggleClass(class|fn[,sw])切换类:有就删除,没有就添加

    2.4、注意点:

      a.同时操作多个类时,多个类名之间用空格分隔

      b.与attr(class,className1[ className2 ...] )的区别:

      用attr方法设置class属性是一次性覆盖设置,新设置的类会覆盖掉原有的类 而用上面3个方法操作类属性时,不会影响原有的其他类。

    3、内容/文本操作方法

    html()、text()、val():获取时不用传参,设置时传入需要设置的值作为参数

    4、综合案例

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
        <style>
            .tored{
                width:200px;
                height:30px;
                background:red;
            }
            .togreen{
                width:200px;
                height:30px;
                background:green;
            }
            #div1{
                width:250px;
                height:30px;
                background:red;
            }
            #ddiv1{
                width:200px;
                height:30px;
                background:green;
            }
        </style>
        <script src="js/jquery.js"></script>
    </head>
    <body>
    <div id="div1">点我设置我的id属性为ddiv1</div>
    <div id="div2"></div>
    <button id="btn1">设置div2style属性</button><button id="btn2">移除div2style属性</button>
    <div id="div3" class="tored">点我切换类</div>
    <script>
        $(function(){
            $("#div1").click(function(){
                $(this).attr("txt1","txt1生效");
                $(this).attr("id","ddiv1");
                $(this).text("我现在是ddiv1了");
            });
            $("#btn1").click(function(){
                $("#div2").attr("style","300px;height:30px;background:red;");
            });
            $("#btn2").click(function(){
                $("#div2").removeAttr("style");
            });
            $("#div3").click(function(){
                $(this).toggleClass("tored togreen");
                //$(this).toggleClass("tored").toggleClass("togreen");  等效
            });
        });
    </script>
    </body>
    </html>
  • 相关阅读:
    无废话MVC入门教程五[Control与View交互]
    无废话MVC入门教程三[路由设置及视图入门]
    无废话MVC入门教程二[第一个小Demo]
    IDEA 插件开发
    慢慢学Linux驱动开发,第十章,GNU C的扩展
    《UNIX环境高级编程》编译问题彻底解决方案
    GNU make笔记
    outlook2003无法显示地址列表 无法打开与该地址列表的相关"联系人"文件夹解决方案
    慢慢学Linux驱动开发,第十二章,加入内核
    ADS: (Fatal)L6002U:Could not open file:..... & L6002
  • 原文地址:https://www.cnblogs.com/chuanzi/p/9454324.html
Copyright © 2011-2022 走看看