jQuery事件

最新推荐文章于 2024-07-24 23:00:08 发布

2764150442

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量269

点赞数

分类专栏： jQuery 文章标签： jquery 前端 html

本文链接：https://blog.csdn.net/weixin_70815247/article/details/126320538

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0/jquery-3.6.0.js"></script>
    <style>
        body{
            background-color: black;
        }
        li{
            margin: 8px 5px;
            list-style: none;
        }
        ul{
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
        }
        .wrap{
            border: 1px solid #ffffff;
            width: 630px;
            height: 410px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <ul>
            <li><a href="#"><img src="img/01.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/02.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/03.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/04.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/05.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/06.jpg" alt=""></a></li>
        </ul>
    </div>
    <script>
        $(function(){
            //给li标签绑定鼠标移入的事件
            $("ul li").mouseover(function(){
                // 如何获取到当前鼠标移入的li标签，this
                $(this).css("opacity",1).siblings().css("opacity",0.5)
                // 给鼠标移入的li标签的opacity设置为1，给其他兄弟的opacity的值设置为0.5
            })
            $("ul li").mouseout(function(){
                $(this).css("opacity",1).siblings().css("opacity",1)
            })
        })
    </script>
</body>
</html>

visible 用来获取可见的元素

hidden 用来获取到隐藏的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0/jquery-3.6.0.js"></script>
    <style>
        div{
            margin-top: 10px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
   <div></div>
   <div></div>
   <input type="button" value="隐藏" id="xs">
   <input type="button" value="显示" id="yc">
   <script>
       $("#xs").click(function(){
        $("div:visible").hide(1000)
       })
       $("#yc").click(function(){
        $("div:hidden").show(1000)
       })
   </script>
</body>
</html>

addClass 给元素添加 class 如果元素上已经有其他的 class name ，那么将会新增加的追加到现有的classname后面

removeClass 可已经元素的某个class移除，如果为传参数则可以元素上的class的所有class移除掉

hasClass() 用于判断元素上是否有class 如果有就返回true 如果没有就返回false

toggleClass("bigger")切换可用于样式的切换 toggkleClass() 用于样式的切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0/jquery-3.6.0.js"></script>
    <style>
        ul{
            display: flex;
        }
        li{
            margin-right: 20px;
            list-style: none;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
            line-height: 100px;
        }
        .basic{
            background-color: aqua;
        }
        .bigger{
            color: blueviolet;
            font-size: 30px;
        }
        .lianshi{
            font-weight: 800;
        }
    </style>
</head>
<body>
    <input type="button" value="添加basic类">
    <input type="button" value="添加bigger类">
    <input type="button" value="移除bigger类">
    <input type="button" value="判断bigger类">
    <input type="button" value="切换">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
   <script>
       $(function(){
        //    addClass():给元素添加class，如果元素上已经有其他的类，那么将会新的追加到现有的className后面
           $("input:first").click(function(){
            //    现获取到所有的li
            //    然后再给这些li添加class
               $("ul li").addClass("basic").addClass("lianshi")
           })

           $("input:eq(1)").click(function(){
               $("ul li").addClass("bigger")
           })

           $("input:eq(2)").click(function(){
            //    removeClass():可以将元素的某个class移除，如果未传参数，则可以将元素上的所有class移除掉
               $("ul li").removeClass("bigger")
           })

           $("input:eq(3)").click(function(){
            //    hassClass():用来判断元素上是否有某个class，如果有，则返回true，反之则返回false
            //    如下代码用来判断是否有bigger，如果没有进行添加
               if (!$("ul li").hasClass("bigger")) {
                   $("ul li").addClass("bigger")
               }
           })

最低0.47元/天解锁文章

2764150442

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件

prepend()prepend()方法是在被选元素的最前面添加新元素。before()before()方法是在被选元素的前面添加新元素。afterafter()方法是在被选元素的后面添加新元素。注：以上四种方法都可以一次添加多个元素；添加的元素以参数的形式植入，以逗号隔开jQuery添加元素通过JavaScript操作DOM,来实现获取页面元素,做一些修改等,同样的利用jQuery也可以操作DOM.append(方法在被选元素的结尾插入指定内容添加元素append()append()方法是在。.....
复制链接

扫一扫

专栏目录