JQuery DOM 有关代码练习

时间：2022-12-31 11:47:14
//累加你选择的个数

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="jquery.js"></script>

    <script>

        $(function () {

            var xg = "<li title='西瓜'>西瓜</li>";

            var xj = "<li title='香蕉'>香蕉</li>";

            var ll = "<li title='榴莲'>榴莲</li>";

            //添加

            $(xg).appendTo("ul");

            $(xj).prependTo("ul");

            //在橘子后面添加榴莲

            $(ll).insertAfter("[title = 橘子]");

            //遍历ul的子元素li 为没个li都添加点击事件

            $("ul").children().click(function () {

                //获取点击的 title 属性值

                var ti = $(this).attr("title");

                //如果ol li里面的内容不包括此内容  代表ol 里面没有此标签

                if ($("ol li:contains(" + ti + ")").length == 0) {

                    //添加此标签到ol中

                    $(this).clone().appendTo("ol");

                    //为此标签的后面添加一个span标签  用来计数

                    $("ol li:contains(" + ti + ")").append("<span>1</span>");

                }

                else {

                    //先得到span里面的数字

                    var num = $("ol li:contains(" + ti + ") span").text();

                    //进行累加

                    $("ol li:contains(" + ti + ") span").text(parseInt(num) + 1);

                }

            });

        });

    </script>

</head>

<body>

    <ul>

        <li title='苹果'>苹果</li>

        <li title='橘子'>橘子</li>

        <li title='菠萝'>菠萝</li>

    </ul>

    <ol></ol>

</body>

</html>

让提示条跟这鼠标走

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        #d1{

            background-color:#888;

            color:#444;

            border:solid 1px #444;

            position:absolute;     /*可以手动定位此标签*/

        }

    </style>

    <script src="jquery.js"></script>

    <script>

        $(function () {

            //鼠标进入A标签事件

            $("a").mouseover(function () {

                //取到A标签的title属性的值

                var str = $(this).attr("title");

               //生成div字符串

                var tip = '<div id="d1">' + str + '</div>';

                //往body中添加一个div

                $(tip).appendTo("body");

            }).mouseout(function () {  //鼠标划出事件

                //删除div

                $("#d1").remove();

            }).mousemove(function (e) {   //鼠标移动事件   e可以用来定位鼠标位子

                //因为在CSS样式中绝对定位了，可以设置left 和top属性  left:距离页面左边距离  top:距离页面上面距离

                $("#d1").css({ "left": "" + (e.pageX + 15) + "px", "top": "" + (e.pageY + 15) + "px" });

            });

        });

    </script>

</head>

<body>

    <a href="#" title="这是默认的提示">这是默认的提示</a>

</body>
</html>

相关文章