JQury实现九九乘法口诀表并抓去其中节点7月16日

最新推荐文章于 2022-02-28 19:50:42 发布

tianlu1677

最新推荐文章于 2022-02-28 19:50:42 发布

阅读量1.7k

点赞数

分类专栏：学习笔记文章标签： function div jquery search class xhtml

本文链接：https://blog.csdn.net/tianlu1677/article/details/7751845

版权

学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在实现代码前有一下几点需要注意：

1.构建dom元素，即将口诀表的框架给搭建好。例如：生成一个div可以如下实现：

     <script type="text/javascript">
         $(function () {
 　　　　　　  var $div = $("<div> DIV </div>");
             $("body").append($div);
         });
 　　 </script>

2.dom对象和jquery对象是有区别的，特别要注意你操作的是那种对象。

在获取jquery机会的某一项是我们可以通过eq，get，索引来获取，但值得注意的是eq返回的是jquery对象，而get和索引返回的是dom对象。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>qqqqq</title>
        <script type="text/javascript" src="jquery-1.7.2.min.js">
        </script>
        <script type="text/javascript">
            function create(){
                var cellss = new Array()
                for (var i = 0; i < 9; i++) {
                    cellss[i] = new Array()
                }
                for (var out = 1; out <= 9; out++) {
                    for (var inside = 1; inside <= out; inside++) {
                        cellss[out - 1][inside - 1] = out + "x" + inside + "=" + out * inside;
                    }
                }
                return cellss
            }
            
            function ShowTable(cellss){
                $(function(){
                    var $div1 = $("<div class='box'></div>");
                    $("body").append($div1);
                    $(function(){
                        $(function(){
                        
                            for (out in cellss) {
                                for (var $i = 0; $i < 9; $i++) {
                                    var $ul = $("<ul class='faceul' time=" + $i + "></ul>")
                                    $("div").append($ul);
                                    for (inside in cellss[out]) {
                                        var number = cellss[out][inside].substr(4, cellss[out][inside].length - 1);
                                        var $li = $("<li class=" + number + " >" + cellss[out][inside] + "</li>");
                                        var $arr = $("ul");
                                        for ($time = 0; $time < $arr.length; $time++) {
                                            if (parseInt($("ul").eq($time).attr("time")) == $i) {
                                                $("ul").eq($time).append($li);
                                            }
                                        }
                                    }
                                    break;
                                }
                            }
                        })
                    })
                })
            }
            
            function search(){
                var $arr = $("li");
                for ($i = 0; $i < $arr.length; $i++) {
                    if (parseInt($("li").get($i).className) % 2 == 0) {
                        $("li").eq($i).css("color", "red");
                    }
                }
            }
        </script>
        <style>
            .box {
                width: 3000px;
                height: 300px;
            }
            
            .faceul {
                height: 17px;
                display: block;
            }
            
            .faceul li {
                list-style-type: none;
                float: left;
                margin-left: 10px;
                display: block;
                width: 48px;
            }
        </style>
    </head>
    <script type="text/javascript">
        var array = create();
        ShowTable(array);
    </script>
    <body>
        <input type="button" value="change!"οnclick="search()"/>
    </body>
</html>

效果如下图：

tianlu1677

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQury实现九九乘法口诀表并抓去其中节点7月16日

在实现代码前有一下几点需要注意：1.构建dom元素，即将口诀表的框架给搭建好。例如：生成一个div可以如下实现： $(function () { 　　　　　　 var $div = $(" DIV "); $("body").append($div); }); 　　 2.dom对象和jquery对象是
复制链接

扫一扫