JQuery(14)——样式操作

最新推荐文章于 2024-09-04 01:58:19 发布

陆老师Peter

最新推荐文章于 2024-09-04 01:58:19 发布

阅读量112

点赞数

分类专栏： JQuery 文章标签：切换滤镜

本文链接：https://blog.csdn.net/qq_34573534/article/details/100744458

版权

JQuery 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

1、常用样式：

获取样式 attr("class")。
设置样式attr("class","myclass")。
追加样式addClass("myclass")(不影响其他样式)。
移除样式removeClass("myclass")。
切换样式（如果存在样式则去掉样式，如果没有样式则添加样式）toggleClass("myclass")。
判断是否存在样式：hasClass("myclass") 。

2、案例：网页开关灯的效果。background。

    <style type="text/css">
        .dark
        {
        	background-color:Black;
        }
    </style>
    <script type="text/javascript">
        $(function() {
        $("#btn").click(function() {
            $("body").toggleClass("dark");
        });
        });
    </script>

3、练习：给body设置body{ filter:Gray; } 这个style就可以让网页变为黑白显示，做切换黑白效果的按钮。只有IE起作用。（切换滤镜）。

4、点击表格行，被点击的行高亮显示（背景是黄色），其他行白色背景。监听每个tr的click事件，将点击的背景设置为黄色，其他的设置为白色背景。颜色定义为class样式。

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

    $(":text").focus(function() { $(this).addClass("focus"); }).blur(function() { $(this).removeClass("focus"); }); 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>

    <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#kw").val("请输入关键词").addClass("waiting")
            .blur(function() {
                if ($(this).val() == "") {
                    $("#kw").val("请输入关键词").addClass("waiting");
                }
            })
            .focus(function() {
                if ($("#kw").val() == "请输入关键词") {
                    $("#kw").val("").removeClass("waiting");
                }
            });
        });
    </script>
    <style type="text/css">
        .waiting{color:Gray;}
    </style>
</head>
<body>
<input type="text" id="kw" />
</body>
</html>