16--Jquery对样式的操作之删除和切换样式

  1. 使用removeClass()删除样式
    实例:

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jquery的removeClass()移除样式title>
    <script src="jquery-1.11.3.js">script>

    <style>
        .myClass{
      
            font-weight: 900;
            color:red;
        }
        .another{
      
            font-style: italic;
            color: blue;
        }
    style>
head>
<body>
    <p title="你喜欢的运动" class="myClass another">请选择你喜欢的运动?p>
    <ul id="sport">
        <li>足球li>
        <li>王者荣耀li>
        <li>乒乓球li>
        <li>排球li>
    ul>
     <script>
        $(function(){
      
            /*removeAttr()移除的是属性*/
            /*$("p").removeAttr("class");*/
            /*removeClass()移除的是class属性的值*/
            $("p").removeClass("myClass");
        });
     script>
body>
html>

注意:removeAttr()移除的是属性。removeClass()移除的是class属性的值。
2. 使用toggleClass()切换样式
实例:


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jquery的toggleClass切换样式title>
    <script src="jquery-1.11.3.js">script>

    <style>
        .myClass{
      
            font-weight: 900;
            color:red;
        }
        .another{
      
            font-style: italic;
            color: blue;
        }
    style>
head>
<body>
    <p title="你喜欢的运动" class="myClass">请选择你喜欢的运动?p>
    <ul id="sport">
        <li>足球li>
        <li>王者荣耀li>
        <li>乒乓球li>
        <li>排球li>
    ul>
     <script>
        $(function(){
      
            /*给p标签绑定一个点击事件*/
            $("p").click(function(){
      
                /*切换样式:指的是该样式在有和没有之间进行切换*/
                $("p").toggleClass("another");
            });
        });
     script>
body>
html>

注意:toggleClass()指的是该样式在有和没有之间进行切换。

你可能感兴趣的:(Jquery,jquery,css,html,javascript)