js与jquery知识点总结（2）

最新推荐文章于 2024-10-02 05:39:15 发布

gang456789

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量406

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/gang456789/article/details/78166497

版权

prevAll nextAll addBack的使用，这里以五星好评为例子说明用法，其中prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素，addback （）返回当前的元素与先前的元素的集合，.end()返回到最近一次“破坏”之前的状态


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin: 0; padding: 0;}
        .pf{
            width: 150px;
            margin: 20px auto;
        }
        .pf li{
            width: 27px;
            height: 27px;
            background-image: url(images/21.gif);
            background-repeat:no-repeat;
            float: left;
            list-style-type: none;
        }
        .pf li.on{
            background-position: left bottom;
        }
        p{
            text-align: center;
        }
    </style>
    <script src="jquery-1.11.3.js"></script>
    <script>
        $(function () {
//          $(".pf li").click(function () {
//              var index = $(this).index();
//              $(".pf span").html(index+1);
//              $(this).prevAll().addBack().attr("class", "on");
//              $(this).nextAll().attr("class", "");
//          }).mouseover(function () {
//              var index = $(this).index();
//              $(this).prevAll().addBack().attr("class", "on");
//              $(this).nextAll().attr("class", "");
//          }).mouseout(function () {
//              var index = $(".pf span").html()-1;
//              console.log(index);
//
//              $(".pf li:lt(" + (index+1)+ ")").attr("class", "on");
//              $(".pf li:gt(" + (index)+")").attr("class", "");
//          });

            $(".pf li").click(function () {
                var index = $(this).index();
                $(".pf span").html(index+1);
                $(this).nextAll().attr("class","").end().prevAll().addBack().attr("class","on");
            });
            $(".pf li").mouseover(function () {
                $(this).nextAll().attr("class","").end().prevAll().addBack().attr("class","on");
            });
            $(".pf li").mouseout(function () {
                var index = $(".pf span").html()-1;
                $(".pf li").filter(":lt(" + (index+1) + ")").attr("class","on");
                $(".pf li").filter(":gt(" + (index)+ ")").attr("class","");
            });
        });
    </script>
</head>
<body>
<div class="pf">
    <ul>
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <p>你的评分为：<span>1</span></p>
</div>
</body>
</html>

.stop()可以排除动画排队，用在.show() .hide() .toggle()前面，代码如下：

$("img").stop().show(2000);
 $("img").stop().hide(2000);
 $("img").stop().toggle(2000);

jquery下获取便签里面的内容用的是$(“#feilei p”).html(“显示所有内容”);而不是innerhtml获取
jquery自定义动画基本写法

$("img").animate({left:600}, 3000).animate({width:280, height:280},3000).animate({top:400},3000);

模拟新闻发布


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-1.11.3.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                var content = $("input:text").val();

                // 方法一
//                var $tag = $("<li>"+ content +"</li>");
//                $("ul").prepend($tag);

                // 方法二
//                var $tag = $("<li>"+ content +"</li>");
//                $tag.prependTo($("ul"));

                // 方法三
                $("ul").prepend("<li>"+ content +"</li>");


            });
        });
    </script>
</head>
<body>
    新闻发布：<input type="text" value=""> <br>
    <button>发布新闻</button>
    <ul>

    </ul>
</body>
</html>

键盘对应的编码

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>键盘信息</title>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script>
    $(function(){
        $(window).keydown(function (event) {
            console.log(event.which);
        });
    });
    </script>
</head>
<body>

</body>
</html>