jq简单实现五星好评

最新推荐文章于 2024-04-20 00:42:24 发布

你怎么没有头发

最新推荐文章于 2024-04-20 00:42:24 发布

阅读量773

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_45214220/article/details/121876751

版权

点击后可以再次确认选择

在这里插入图片描述

用到的api

find() 查询父节点中符合参数条件的子节点
html() 赋值，将获取的值显示
parent() 查找当前节点的父元素
parents() 查找祖先元素
next() 查找下一个兄弟节点 nextSiblingElement
nextAll() 查找后面所有的兄弟元素
prev() 查找上一个兄弟节点

这个例子可以锻炼jq查找的能力

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .left {
            float: left;
            margin-left: 10px;
            line-height: 30px;
        }
    </style>
    <script src="./jquery.js"></script>
</head>

<body>
    <div id="divstars" class="left">
        <img src="images/empty.png" alt="">
        <img src="images/empty.png" alt="">
        <img src="images/empty.png" alt="">
        <img src="images/empty.png" alt="">
        <img src="images/empty.png" alt="">
    </div>
    <div id="divword" class="left">

    </div>

    <script>
        var a1=null;
        var a2=0;
        var words = ["满意", "一般满意", "还不错", "很满意", "非常满意"];
        //   点击
        $("#divstars").find("img").click(function () {
            a2 = $(this)
            a1=true;

        })
        //移出
        $("#divstars").find("img").mouseleave(function () {
            $(this).attr({ src: "./images/empty.png" })
            $(this).prevAll().attr({ src: "./images/empty.png" })
            if(a1){
             for(var i=0;i<a2.length;i++){
                a2.attr({ src: "./images/shining.png" })
                a2.prevAll().attr({ src: "./images/shining.png" })
             }
            }
        
        })
        //移入
            $('img').mousemove(function(){
            $("img").attr('src',"./images/shining.png")
            $(this).nextAll().attr('src',"./images/empty.png")
            $("#divword").html(words[$(this).index()])
        })

    </script>
</body>

</html>

你怎么没有头发

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq简单实现五星好评

点击后可以再次确认选择用到的apifind() 查询父节点中符合参数条件的子节点html() 赋值，将获取的值显示parent() 查找当前节点的父元素parents() 查找祖先元素next() 查找下一个兄弟节点 nextSiblingElementnextAll() 查找后面所有的兄弟元素prev() 查找上一个兄弟节点这个例子可以锻炼jq查找的能力<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫