jQuery - 5.样式操作

样式操作

  1.获取样式 attr("class"),

  2.设置样式attr("class","myclass"),

  3.追加样式addClass("myclass")(不影响其他样式),

  4.移除样式removeClass("myclass"),

  5.切换样式toggleClass("myclass"),

  6.判断是否存在样式:hasClass("myclass")

  练习:点击表格行,被点击的行高亮显示(背景是黄色),其他行白色背景。监听每个tr的click事件,将点击的背景设置为黄色,其他的设置为白色背景。颜色定义为class样式。

  练习:聚焦控件的高亮显示。颜色定义为class样式。 $("body *"),选择器*表示所有类型的控件。

 

样式操作


1.获取样式 attr("class"),

2.设置样式attr("class","myclass"),

3.追加样式addClass("myclass")(不影响其他样式),

4.移除样式removeClass("myclass"),

<style type="text/css">
.my
{
width: 200px;
height: 200px;
        }
 
   
.m
{
border: 1px rgb(156, 92, 92) solid;
        }
<body>
    <div class="my">111</div>
    <input id="btn" type="button" value="点击" />
    <br />
    <input id="Button1" type="button" value="关灯" />
</body>

     
       
       
         
显示行号 复制代码 这是一段程序代码。
  1.         $(function () {
  2.             $("#btn").click(function () {
  3.                 //追加样式
  4.                 $(".my").addClass("m");
  5.                 //移除样式
  6.                 $(".my").removeClass("my");
  7.             });
  8.         })
追加样式: 移除样式: 一起使用的效果:

image



image



image

 

5.切换样式(如果存在样式则去掉样式,如果没有样式则添加样式)toggleClass("myclass"),

image

.dark
{
background-color: black;
        }
//开灯关灯
$(function () {
            $("#Button1").click(function () {
                    $("body").toggleClass("dark");
            })

 

 

 

6.判断是否存在样式:hasClass("myclass")

 


案例:网页开关灯的效果。background

 


练习:给body设置body{ filter:Gray; } 这个style就可以让网页变为黑白显示,做切换黑白效果的按钮。

gray
none
用黑白色来呈现元素
filter:gray;


练习:点击表格行,被点击的行高亮显示(背景是黄色),其他行白色背景。监听每个tr的click事件,将点击的背景设置为黄色,其他的设置为白色背景。颜色定义为class样式

显示行号 复制代码 这是一段程序代码。
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style type="text/css">
  7.         .ye {
  8.             background-color: yellow;
  9.         }
  10.     </style>
  11.     <script src="Jqeury/jquery-1.10.2.js"></script>
  12.     <script type="text/javascript">
  13.         $(function () {
  14.             $("#tb tr").click(function () {
  15.                 $($(this), ".m").attr("class", "ye");
  16.                 $($(this), ".m").siblings().removeClass("ye");
  17.             })
  18.         })
  19.     </script>
  20. </head>
  21. <body>
  22.     <table id="tb" border="1px" width="400">
  23.         <tr class="m">
  24.             <td>节目</td>
  25.             <td>收视率</td>
  26.         </tr>
  27.         <tr class="m">
  28.             <td>running man</td>
  29.             <td>11.4%</td>
  30.         </tr>
  31.         <tr class="m">
  32.             <td>2天1夜</td>
  33.             <td>26.2%</td>
  34.         </tr>
  35.         <tr class="m">
  36.             <td>男人的资格</td>
  37.             <td>7.2%</td>
  38.         </tr>
  39.     </table>
  40. </body>
  41. </html>

image


练习:聚焦控件的高亮显示。颜色定义为class样式。 $("body *"),选择器*表示所有类型的控件。

显示行号 复制代码 这是一段程序代码。
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <style type="text/css">
  7.         .ye
  8.         {
  9.             background-color: red;
  10.         }
  11.     </style>
  12.     <script src="Jqeury/jquery-1.10.2.js"></script>
  13.     <script type="text/javascript">
  14.         $(function () {
  15.             $("input").focus(function () {
  16.                 $(this).addClass("ye");
  17.             }).blur(function () {
  18.                 $(this).removeClass("ye");
  19.             })
  20.         })
  21.     </script>
  22. </head>
  23. <body>
  24.     <input type="text" /><br />
  25.     <input type="text" /><br />
  26.     <input type="text" /><br />
  27.     <input type="text" /><br />
  28.     <input type="text" /><br />
  29. </body>
  30. </html>

你可能感兴趣的:(jquery)