zoukankan      html  css  js  c++  java
  • JQuery获取元素类名

    一般而言,JQuery可以利用attr来获取元素的属性值,

     1、$("元素").attr("属性");                //获取指定属性的值

     2、$("元素").attr("属性","属性值");//设置属性值

     3、$("元素").removeAttr("属性");  //移除指定属性

     不过在1.6中加入了prop,用法同attr相同。只是将上面中attr替换成prop即可,不过在获取checked等属性时,将会返回标准属性true/false,不会和之前的attr一样,返回checked或者“”。

    而JQuery中获取类名的属性为class亦可以为className,因为在HTML DOM中没有class属性,而是className属性。在JQuery中,有对className作出关键字的转换

    jQuery.props = {
        "for" : "htmlFor" ,
        "class" : "className" ,
        readonly: "readOnly" ,
        maxlength: "maxLength" ,
        cellspacing: "cellSpacing" ,
        rowspan: "rowSpan" ,
        colspan: "colSpan" ,
        tabindex: "tabIndex" ,
        usemap: "useMap" ,
        frameborder: "frameBorder"
    };

    二者的区别:

    • 用class: 比较直觉,跟HTML Tag相同,而且用class比className少几个判断,可能可以快几纳秒吧。
    • 用className: 与HTML Dom相同,不会因为没了jQuery就不会写Javascript。

    这里需要注意的是,如果你获取的元素没有类名的话,它返回的是undefined,而不是空或null。有关基本数据类型,可参照此博客链接

    下面给出一段代码例子,作用是通过按下键盘的右方向键来切换页面的body类。

    var setBodyClass = function(className) {
            $('body').removeClass().addClass(className);  //删除之前的类,再添加新的类名
          };
        $(document).keyup(function(event){  //监听键盘按下的按键
            var key = event.which;  //获取键码
            if(key==39){   //右方向键的键码为39
                var className = String($('body').attr("class"));//获取body的类名
                if(className=="undefined"){//body没有类名
                    setBodyClass("narrow");
                }
                if(className=="default"){
                    setBodyClass("narrow");
                }
                if(className=="narrow"){
                    setBodyClass("large");
                }
                if(className=="large"){
                    setBodyClass("default");
                }
            }
        });
    body {
      font: 62.5% Verdana, Helvetica, Arial, sans-serif;
      color: #000;
      background: #fff;
    }
    body.large {
      font-size: 1.5em;
    }
    
    body.narrow  {
      width: 250px;
    }
  • 相关阅读:
    Java基础加强--17.利用反射操作泛型VI【泛型类型变量的语义】【GenericDeclaration接口】【泛型接口TypeVariable】【通过Class反射解析泛型类】
    [G]ParameterizedType详解
    java 泛型详解-绝对是对泛型方法讲解最详细的,没有之一
    source insight遇到__attribute__解析不到函数
    Exif文件格式描述
    opencv python 匹配
    SQL知识累积
    ant 安装过程中问题记录
    useful-scripts
    excel 经验总结
  • 原文地址:https://www.cnblogs.com/pfr-blog/p/6562023.html
Copyright © 2011-2022 走看看