zoukankan      html  css  js  c++  java
  • jQuery设置和获取以及修改class name值操作

    在Web程序开发中、很多时候会用需要修改Html标签的class名称、来达到修改标签样式的效果、那么在代码中一般是怎么操作的呢、本文将为你详细讲解一下class的使用、在jQuery中可以使用attr()方法修改”class”属性、也可以用addClass()、removeClass()、toggleClass()、hasClass()以及css()方法来完成


    1、javascript addClass

    利用document.getElementById("XX")找到document对象、然后再通过addClass("xxx")修改其class

    document.getElementById("XX").addClass("xxx");


    2、addClass()

    addClass()方法向匹配的元素增加指定的类名(一个或多个)、注意对于元素来说、class属性可以有多个值、该方法不会移除已经存在的值、而是在原有的基础上追加一个或多个class属性

    $(".XX").addClass("xxx");


    3、removeClass()

    removeClass()方法从被选元素移除一个或多个类、如需移除若干类、用空格来分隔类名、如果没有传参数、该方法将会移除被选元素的所有类

    $(".XX").removeClass("xxx");


    4、toggleClass()

    toggleClass()方法对被选元素的一个或多个类进行切换(设置或移除)、该方法检查每个元素中的指定类、如果存在则删除、如果不存在则添加、通过添加参数,可以设置只进行删除或者只进行添加操作、switch值为true时、只添加、为false时、只删除

    $(".XX").toggleClass("xxx",switch);


    5、hasClass()

    hasClass()方法检查被选元素是否包含指定的class、还可以用is()方法实现同样的功能、方法参数传入一个选择器字符串、比如”.className”

    $(".XX").hasClass("xxx");


    6、css()

    读操作:获取匹配元素集合中第一个元素的指定样式值(一个或多个)、读取多个样式值的操作是在jQuery v1.9才加入的

    写操作: 为匹配元素集合中的每一个元素设置一个或多个CSS属性的值、传入的参数可以是单个的键值对、也可以是PlainObject指定的多个值

    $(".XX").css("color","red");


    7、attr()

    attr()方法设置或返回被选元素的属性值、根据该方法不同的参数、其工作方式也有所差异

    $(".XX").attr("class","xxx");

    jQuery会处理各个浏览器中不太相同的一些具体情况、比如W3C的cssFloat在IE中是styleFloat、在jQuery中、你可以使用float、然后jQuery会帮你把它翻译成每个浏览器中应该有的正确名称、还有、jQuery会合理解读CSS和DOM格式的多词属性、比如.css(“background-color”)和.css(“backgroundColor”)、它都是可以处理的

    2018-06-07更新

    最近做一个项目中,用到了jQuery和”jQuery WEUI“版本分别是”1.11.0“和”1.1.2“发现上面中第7条改变class属性功能有bug,不能发生作用而且也不报错。
  • 相关阅读:
    Educational Codeforces Round 67 D. Subarray Sorting
    2019 Multi-University Training Contest 5
    Educational Codeforces Round 69 (Rated for Div. 2) E. Culture Code
    Educational Codeforces Round 69 D. Yet Another Subarray Problem
    2019牛客暑期多校训练第六场
    Educational Codeforces Round 68 E. Count The Rectangles
    2019牛客多校第五场题解
    2019 Multi-University Training Contest 3
    2019 Multi-University Training Contest 2
    [模板] 三维偏序
  • 原文地址:https://www.cnblogs.com/jpfss/p/9149939.html
Copyright © 2011-2022 走看看