JQ笔记3-样式操作

最新推荐文章于 2022-04-27 00:57:28 发布

blog12138

最新推荐文章于 2022-04-27 00:57:28 发布

阅读量134

点赞数

分类专栏： JQ 文章标签： jquery JQ

本文链接：https://blog.csdn.net/Zzzpiu/article/details/109635867

版权

JQ 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

一.hasClass()
二.toggleClass()
三.链式编程demo1
四.链式编程demo2
五.获取兄弟元素
六. 获取兄弟元素demo
七.mouseenter和mouseover的区别

一.hasClass()

用于检查元素是否应用了类样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .cls{
            background-color: green;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //点击第一个按钮添加类样式
            $('#btn1').click(function () {
                $('#dv').addClass('cls');
            });
            //点击第二个按钮检查这个div是否成功应用了cls样式
            $('#btn2').click(function () {
                var re = $('#dv').hasClass('cls');
                console.log(re);//true
            });
        })
    </script>
</head>
<body>
<input type="button" value="添加类样式" id="btn1"/>
<input type="button" value="检测元素是否应用了类样式" id="btn2"/>
<div id="dv"></div>
</body>
</html>

二.toggleClass()

切换类样式

toggleClass(‘cls’)
toggleClass(‘cls’,switch) switch是一个布尔值(可以是一个表达式)
toggleClass(func) 里面是一个回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls{
            background-color: black;
        }
        div {
            width: 200px;
            height: 200px;
        }
        .happy {
            background-color: pink;
        }
        .sad {
            background-color: grey;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        //页面加载后点击按钮btn实现开关灯的效果
        $(function () {
            $('#btn1').click(function () {
                //先判断body是否应用了某个样式,如果应用了就移除,否则就添加
                if($('body').hasClass('cls')){
                    //应用了--移除该类样式
                    $('body').removeClass('cls');
                    $(this).val('关灯');
                }else{
                    //没有应用--让body添加这个类样式
                    $('body').addClass('cls');
                    $(this).val('开灯');
                }
            });
            //第二个实现方式,利用toggleClass函数
            // toggleClass(class|fn[,sw])
            // 作用：切换类
            // 有就删除，没有就添加
            $('#btn2').click(function () {
                $('body').toggleClass('cls');//切换类样式
            });
            //cls+switch
            var count = 1;
            $('#btn3').click(function () {
                //点击三次就切换样式
                $('body').toggleClass('cls', count % 3 === 0);
                count = count + 1;
                //判断是什么标签或者类样式名,id名
                // console.log($('body').is('body'));
            });      
            //回调函数     
            $('#btn4').click(function () {
                $('#dv').toggleClass(function () {
                   if($(this).parent().is('.ll')){
                       return "happy";
                   } else {
                       return 'sad';
                   }
                });
            });
        });
    </script>
</head>
<body>
<input type="button" value="开关灯" id="btn1"/>
<input type="button" value="开关灯2" id="btn2"/>
<input type="button" value="点三次开关灯" id="btn3"/>
<input type="button" value="切换" id="btn4">
<div id="dv"></div>
</body>
</html>

三.链式编程demo1

获取列表中每个li,当鼠标进入后,当前的li有高亮显示,点击的时候可以让当前被点击的li的字体变大,字体的颜色改变,改变字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链式编程demo</title>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        //获取列表中每个li,当鼠标进入后,当前的li有高亮显示,
        // 点击的时候可以让当前被点击的li的字体变大,字体的颜色改变,改变字体
        $(function () {
            $('#uu>li').mouseover(function () {
                //当前进入的li高亮显示,其他li不高亮
                $(this).css('backgroundColor','yellow').siblings('li').css('backgroundColor','');
            }).click(function () {
                $(this).css('fontSize','20px').css('color','green').css('fontFamily','宋体');
            });
        });
    </script>
</head>
<body>
<ul id="uu">
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>第五个</li>
</ul>
</body>
</html>

四.链式编程demo2

点击按钮,改变按钮的value值,鼠标进入到按钮中,按钮的宽改变,高改变,鼠标离开的时候,按钮的背景颜色为绿色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链式编程demo2</title>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        //点击按钮,改变按钮的value值,鼠标进入到按钮中,按钮的宽改变,高改变,鼠标离开的时候,按钮的背景颜色为绿色
        $(function () {
           $('#btn').mouseover(function () {
               $(this).css({width:"200px",height:'150px'});
           }).mouseout(function () {
                $(this).css('backgroundColor','green');
           }).click(function () {
                $(this).val("改变后");
           });
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
</body>
</html>

五.获取兄弟元素

5.1 .next();获取的是当前元素的下一个兄弟元素----一个
5.2 .nextAll();获取的是当前元素的后面的所有的兄弟元素----后面的多个
5.3 .prev();获取的是当前元素的前一个兄弟元素----一个
5.4 .prevAll();获取的是当前元素的前面的所有的兄弟元素----前面的多个
5.5 .siblings();获取的是当前元素的所有的兄弟元素(自己除外)----多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取兄弟元素</title>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //获取ul中所有的li,为每个li注册鼠标进入的事件,
            // 当前元素获取到,对当前元素的兄弟元素进行操作
            $('#uu>li').mouseenter(function () {
                //.next();获取的是当前元素的下一个兄弟元素---一个
                // $(this).next().css('backgroundColor','pink');
                //.nextAll();获取的是当前元素的后面的所有的兄弟元素---后面的多个
                // $(this).nextAll().css('backgroundColor','yellow');
                //.prev();获取的是当前元素的前一个兄弟元素--一个
                // $(this).prev().css("backgroundColor","blue");
                //.prevAll();获取的是当前元素的前面的所有的兄弟元素
                //$(this).prevAll().css("backgroundColor","green");
                //.siblings();获取的是当前元素的所有的兄弟元素(自己除外)
                $(this).siblings().css("backgroundColor","green");
            });
        });
    </script>
</head>
<body>
<ul id="uu">
    <li>红烧土豆</li>
    <li>清蒸豆腐</li>
    <li>油炸菠菜</li>
    <li>凉拌土豆丝</li>
    <li>凉拌黄瓜</li>
    <li>炝炒白菜</li>
</ul>
</body>
</html>

六. 获取兄弟元素demo

效果是鼠标进入高亮,离开取消高亮,点击当前元素前面的变为黄色,后面的变为蓝色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style-type: none;
            width: 200px;
            position: absolute;
            left: 500px;
        }

        ul li {
            margin-top: 10px;
            cursor: pointer;
            text-align: center;
            font-size: 20px;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        //获取ul中所有的li,有鼠标进入事件,鼠标离开事件,点击事件
        $(function () {
            //获取ul>li
            $('ul>li').mouseenter(function () {
                $(this).css('backgroundColor','red').siblings().css('backgroundColor','')
            }).mouseleave(function () {
                $(this).css('backgroundColor','').siblings().css('backgroundColor','');
            }).click(function () {
               //当前元素前面的所有兄弟元素背景颜色变为黄色
               $(this).prevAll().css('backgroundColor','yellow');
                //当前元素后面的所有兄弟元素背景颜色为蓝色
                $(this).nextAll().css("backgroundColor","blue");

                //链式编程代码
                //断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了,
                //解决断链--->恢复到断链之前的一个效果--修复断链
                //.end()方法恢复到断链之前的效果
                // $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
            });
        });
    </script>
</head>
<body>
<ul>
    <li>青岛啤酒（TsingTao）</li>
    <li>瓦伦丁（Wurenbacher）</li>
    <li>雪花（SNOW）</li>
    <li>奥丁格教士（Franziskaner）</li>
    <li>科罗娜喜力柏龙（Paulaner）</li>
    <li>嘉士伯Kaiserdom</li>
    <li>罗斯福（Rochefort）</li>
    <li>粉象（Delirium）</li>
    <li>爱士堡（Eichbaum）</li>
    <li>哈尔滨牌蓝带</li>
</ul>
</body>
</html>

七.mouseenter和mouseover的区别

mouseenter指的是进入当前元素(不包括子元素)触发的事件
mouseover指的是进入当前的元素,如果进入当前元素的子元素也会触发事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
x=0;
y=0;
$(document).ready(function(){
  $("div.over").mouseover(function(){
    $(".over span").text(x+=1);
  });
  $("div.enter").mouseenter(function(){
    $(".enter span").text(y+=1);
  });
});
</script>
</head>
<body>

<p>mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。</p>
<p>mouseenter 事件只在鼠标移动到选取的元素上时触发。 </p>

<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
<h3 style="background-color:white;">Mouseover 事件触发: <span></span></h3>
</div>

<div class="enter" style="background-color:lightgray;padding:20px;width:250px;float:right">
<h3 style="background-color:white;">Mouseenter 事件触发: <span></span></h3>
</div>

</body>
</html>