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>





.src_container{background-color:#e7e5dc; width:99%; overflow:hidden; margin:12px 0 12px 0 !important; padding:0px 3px 3px 0px}

.src_container .titlebar{ background-color:#d4dfff;  border:1px solid #4f81bd;  border-bottom:0;  padding:3px 24px;  margin:0;  width:auto;  line-height:120%;  overflow:hidden;  text-align:left;  font-size:12px}

.src_container .toolbar{ display:inline;  font-weight:normal;  font-size:100%;  float:right;  cursor:hand;  color:#00f;  text-align:left;  overflow:hidden}

.toolbar span.button{ display:inline;  font-weight:normal;  font-size:100%;  cursor:hand;  color:#00f;  text-align:left;  overflow:hidden;  cursor:pointer;}

.src_container div.clientarea{ background-color:white;  border:1px solid #4f81bd;  margin:0;  width:auto !important;  width:100%;  height:auto;  overflow:auto;  text-align:left;  font-size:12px;  font-family: "Courier New","Consolas","Fixedsys",courier,monospace,serif}

.src_container ol.mainarea{ padding:0 0 0 52px;  margin:0;  background-color:#f7f7ff !important}

.number_show{ padding-left:52px !important;  list-style:decimal outside !important}

.number_show li{ list-style:decimal outside !important;  border-left:1px dotted #4f81bd}

.number_hide{ padding-left:0px !important;  list-style-type:none !important}

.number_hide li{ list-style-type:none !important;  border-left:0px}

ol.mainarea li{ display:list-item !important;  font-size:12px !important;  margin:0 !important;  line-height:18px !important;  padding:0 0 0 0px !important;  background-color:#f7f7ff !important;  color:#4f81bd}

ol.mainarea li pre{color:black; line-height:18px;  padding:0 0 0 12px !important; margin:0em;  background-color:#fff !important}

.linewrap ol.mainarea li pre{white-space:pre-wrap; white-space:-moz-pre-wrapwhite-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word}

ol.mainarea li pre.alt{ background-color:#f7f7ff !important}


显示行号 复制代码 ？ 这是一段程序代码。 

        $(function () {
            $("#btn").click(function () {
                //追加样式
                $(".my").addClass("m");
                //移除样式
                $(".my").removeClass("my");
            });
        })

追加样式：	移除样式：	一起使用的效果：

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

.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样式。

显示行号复制代码？这是一段程序代码。

```
<!DOCTYPE html>
```

<html xmlns="http://www.w3.org/1999/xhtml">

```
<head>
```

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

```
    <title></title>
```
```
    <style type="text/css">
```
```
        .ye {
```
```
            background-color: yellow;
```
```
        }
```
```
    </style>
```

    <script src="Jqeury/jquery-1.10.2.js"></script>

```
    <script type="text/javascript">
```
```
        $(function () {
```

            $("#tb tr").click(function () {

                $($(this), ".m").attr("class", "ye");

                $($(this), ".m").siblings().removeClass("ye");

```
            })
```
```
        })
```
```
    </script>
```
```
</head>
```
```
<body>
```

    <table id="tb" border="1px" width="400">

```
        <tr class="m">
```
```
            <td>节目</td>
```
```
            <td>收视率</td>
```
```
        </tr>
```
```
        <tr class="m">
```
```
            <td>running man</td>
```
```
            <td>11.4%</td>
```
```
        </tr>
```
```
        <tr class="m">
```
```
            <td>2天1夜</td>
```
```
            <td>26.2%</td>
```
```
        </tr>
```
```
        <tr class="m">
```
```
            <td>男人的资格</td>
```
```
            <td>7.2%</td>
```
```
        </tr>
```
```
    </table>
```
```
</body>
```
```
</html>
```

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

显示行号复制代码？这是一段程序代码。

```
<!DOCTYPE html>
```

<html xmlns="http://www.w3.org/1999/xhtml">

```
<head>
```

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

```
    <title></title>
```
```
    <style type="text/css">
```
```
        .ye
```
```
        {
```
```
            background-color: red;
```
```
        }
```
```
    </style>
```

    <script src="Jqeury/jquery-1.10.2.js"></script>

```
    <script type="text/javascript">
```
```
        $(function () {
```

            $("input").focus(function () {

```
                $(this).addClass("ye");
```
```
            }).blur(function () {
```

                $(this).removeClass("ye");

```
            })
```
```
        })
```
```
    </script>
```
```
</head>
```
```
<body>
```
```
    <input type="text" /><br />
```
```
    <input type="text" /><br />
```
```
    <input type="text" /><br />
```
```
    <input type="text" /><br />
```
```
    <input type="text" /><br />
```
```
</body>
```
```
</html>
```

.src_container{background-color:#e7e5dc; width:99%; overflow:hidden; margin:12px 0 12px 0 !important; padding:0px 3px 3px 0px}
.src_container .titlebar{ background-color:#d4dfff; border:1px solid #4f81bd; border-bottom:0; padding:3px 24px; margin:0; width:auto; line-height:120%; overflow:hidden; text-align:left; font-size:12px}
.src_container .toolbar{ display:inline; font-weight:normal; font-size:100%; float:right; cursor:hand; color:#00f; text-align:left; overflow:hidden}
.toolbar span.button{ display:inline; font-weight:normal; font-size:100%; cursor:hand; color:#00f; text-align:left; overflow:hidden; cursor:pointer;}
.src_container div.clientarea{ background-color:white; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; height:auto; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys",courier,monospace,serif}
.src_container ol.mainarea{ padding:0 0 0 52px; margin:0; background-color:#f7f7ff !important}
.number_show{ padding-left:52px !important; list-style:decimal outside !important}
.number_show li{ list-style:decimal outside !important; border-left:1px dotted #4f81bd}
.number_hide{ padding-left:0px !important; list-style-type:none !important}
.number_hide li{ list-style-type:none !important; border-left:0px}
ol.mainarea li{ display:list-item !important; font-size:12px !important; margin:0 !important; line-height:18px !important; padding:0 0 0 0px !important; background-color:#f7f7ff !important; color:#4f81bd}
ol.mainarea li pre{color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap ol.mainarea li pre{white-space:pre-wrap; white-space:-moz-pre-wrapwhite-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word}
ol.mainarea li pre.alt{ background-color:#f7f7ff !important}

jQuery - 5.样式操作的更多相关文章

解密jQuery内核样式操作
基础回顾 jQuery里节点样式读取以及设置都是通过.css()这个方法来实现的,本章通一下分解探究下jquery里这部分代码的实现那么jQuery要处理样式的哪些问题? 先简单回顾下样式操作会遇到 ...
jquery动态样式操作
获取与设置样式获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: 1 var p_class = $(" ...
jQuery 源码解析(二十九) 样式操作模块尺寸详解
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.b ...
jQuery 2.0.3 源码分析样式操作
根据API分类 CSS addClass() jQuery.cssHooks .hasClass() .removeClass() .toggleClass() .addClass() 对元素的样式操 ...
深入学习jQuery样式操作
× 目录 [1]设置样式 [2]增加样式 [3]删除样式[4]切换样式[5]判断样式[6]样式操作前面的话使用javascript脚本化CSS是一个系列,包括行间样式.计算样式.CSS类.样式表. ...
【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）
属性.表单过滤器属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...
jquery系列教程2-style样式操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
JQuery DOM操作、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

随机推荐

Fedora 25 Alpha版本今天发布啦
时隔Fedora 24发布后的3个月,Fedora项目团队非常开心的宣布任何感兴趣的用户都能下载和测试即将到来的Fedora 25操作系统的Alpha预发布版本,在Fedora 25 Alpha里程碑 ...
iOS 容器 addChildViewController
//在parent view controller 中添加 child view controller FirstViewController *firstViewController=[[First ...
高性能图片服务器–ZIMG
2011年李彦宏在百度联盟峰会上就提到过互联网的读图时代已经到来1,图片服务早已成为一个互联网应用中占比很大的部分,对图片的处理能力也相应地变成企业和开发者的一项基本技能.需要处理海量图片的典型应用有 ...
bug-android之app:mergeDebugResources
bug描述:Error:Execution failed for task ':app:mergeDebugResources'. > Crunching Cruncher seekbar_th ...
9.9---n皇后问题（CC150）
思路:首先写一个检查能不能摆的函数.boolean checkValid(int[] columns,int row1, int column1);意思是row1行摆在column1列可不可以. 然后 ...
5.8---像素设定（CC150）
注意:仔细注意位置. public static int[] renderPixel(int[] screen, int x, int y){ int[] ans = new int[screen.l ...
ubuntu14.04 archive sources.list
deb http://archive.ubuntu.com/ubuntu/ trusty main restricted universe multiverse deb http://archive. ...
POJ 1062 ( dijkstra )
http://poj.org/problem?id=1062 一个中文题,一个多月之前我做过,当时我是用搜索写的,不过苦于卡在无法确定等级关系,所以就错了. 看了别人的博客后,我还是不是很理解所谓的枚 ...
HTML5之sessionStorage
http://www.css88.com/archives/tag/sessionstorage http://blog.csdn.net/qxs965266509/article/details/1 ...
Pywinauto在Windows Twain Driver自动化测试中的应用研究
摘要: 以Python为基础,结合对Twain Driver测试工具的具体需求,将Pywinauto引入到Twain Driver的自动化测试中.介绍了Pywinauto的基本概念,通过测试用例说 ...

jQuery - 5.样式操作

样式操作

jQuery - 5.样式操作的更多相关文章

随机推荐

热门专题