【JQuery】JQuery和原生DOM操作动态增加HTML代码问题探究

最新推荐文章于 2024-05-03 01:03:47 发布

Honor_z

最新推荐文章于 2024-05-03 01:03:47 发布

阅读量423

点赞数

分类专栏：前端文章标签： jquery dom操作

本文链接：https://blog.csdn.net/weixin_45500506/article/details/119740442

版权

前端专栏收录该内容

7 篇文章 2 订阅

订阅专栏

文章目录

结论
依然存在的问题

事情是这样的。再做动态表格行和列的删除时，导师说我做的这种键入的形式不对，这种形式用户体验感多差啊，甲方肯定不会满意的。给我提出改进方案，要么通过模态框和输入框结合起来获得相关数据，要么通过结合单选框（radio），选中要删除的行或列，再点击按钮删除。模态框我现在还没接触，同时为了锻炼前端编程能力就选择了使用单选框来解决。

首先给出基本HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
    table{
        border:black solid 2px;
        border-collapse:collapse;
    }

    td{
        border:black solid 2px;
        padding:10px;
    }
</style>
<body>

<div>
    <input type="button" value="增加行" id="addRowButton">
    <input type="button" value="删除选中的行" id="deleteSelectedRow">
    <input type="button" value="增加列" id="addColButton">
    <input type="button" value="删除选中的列" id="deleteSelectedCol">
</div>

<div>
    <table id="table">
        <tr>
            <td></td>
            <td><input type="radio" class="colSelectedRadio" name="colSelected"></td>
            <td><input type="radio" class="colSelectedRadio" name="colSelected"></td>
            <td><input type="radio" class="colSelectedRadio" name="colSelected"></td>
            <td><input type="radio" class="colSelectedRadio" name="colSelected"></td>
        </tr>
        <tr>
            <td><input type="radio" name="rowSelected" class="rowSelectedRadio"></td>
            <td>1,1</td>
            <td>1,2</td>
            <td>1,3</td>
            <td>1,4</td>
        </tr>
        <tr>
            <td><input type="radio" name="rowSelected" class="rowSelectedRadio"></td>
            <td>2,1</td>
            <td>2,2</td>
            <td>2,3</td>
            <td>2,4</td>
        </tr>
        <tr>
            <td><input type="radio" name="rowSelected" class="rowSelectedRadio"></td>
            <td>3,1</td>
            <td>3,2</td>
            <td>3,3</td>
            <td>3,4</td>
        </tr>
    </table>
</div>
</body>
<script>
    var addRow = function () {
        let tableJquery = $("#table");
        let colCount = tableJquery[0].rows[0].cells.length - 1; //-1原因是前面单选框也占一个位置
        let htmlStr = "<tr><td><input type='radio' name='rowSelected' class='rowSelectedRadio'></td>";
        for (let i = 0; i < colCount ; i++) {
            htmlStr += "<td>新的一行</td>";
        }
        htmlStr += "</tr>";
        tableJquery.append(htmlStr);
    }

    $("#addRowButton").click(addRow);
</script>
</html>

十分简单，就是我现在学的最基本的前端操作，查看相关规律，写好相关的html语句，用js将html追加（append）到相关控件元素后面，相应的动态效果就实现了。例如上面就很快的完成了新增加一行的操作。

但是，就在写增加一行的时候，出现了问题，且这个问题让我思考了好一会才明白其道理，现在此做出笔记。

var addCol = function() {
        //添加一行，首先肯定要先给第一行后追加一个单选框
        let tableJquery = $("table tr");    //用jquery得到table标签下所有tr标签
        let headTr = tableJquery[0];    //取得第一个tr，分析html很明显就是我们要加东西的位置
        //然后构建相关HTML语句，再在headTr下追加相关Html，可是出错了，没有达到预想效果！
        let htmlStr = "<td><input type='radio' class='colSelectedRadio' name='colSelected'></td>"
        headTr.append(htmlStr);
    }

    $("#addColButton").click(addCol);

这使得我百思不得其解，追加HTML代码不就是这样吗？找到对应位置，往后append就可以。于是我进行了以下测试。

/*
<table id="table">
        <tr id="test">
            <td></td>
            <td><input type="radio" class="colSelectedRadio" name="colSelected"></td>
为上面html要插入新元素的位置加上id
*/
var addCol = function() {
        let tableJquery = $("table tr");    //用jquery得到table标签下所有tr标签
        let headTr = tableJquery[0];    //取得第一个tr，分析html很明显就是我们要加东西的位置

        console.log("headTr", headTr);
        headTr.append("<h1>asdassa</h1>");
        console.log(headTr.append);

        console.log("$(\"#test\")", $("#test"));
        $("#test").append("<td>adsasdas</td>")
        console.log($("#test").append);
    }

输出结果

在这里插入图片描述
得到的对象都不一样。headTr已经直接具体为某个控件元素了，而由JQuery语法的得到的JQuery.fn.init xxx对象，我们后面姑且称为（JQuery元素对象），它是一个对象，依次展开后有很多键值对。

再深入点看效果
在这里插入图片描述

headTr是直接给控件加了字符串，标签没起作用。而我们直接用JQuery获得的JQuery元素对象可以正确的识别标签，并且按照标签加入相关数据。

再深入点看源码（ctrl+左键）

一个是jszip.js的方法，一个是jquery-1.10.2.js的方法。怪不得不能达到预期效果，方法都没调用对。

看了下他俩定位的append方法都不一样，这里不知道怎么定位选择哪个方法，有大佬可以指出，js中方法变量名重复了，会调用的哪个，或者说如何选择去调用哪个方法？

说回这个题，这个题走jquery的append是不行了，因为我不想给一个html文档很多元素加id，始终记得id是必须保证不重复的，如果你现在用了以后再想给其他元素用怎么办，重名怎么办？虽说强大的编译器（IDEA）会给你提醒。但我建议还是尽量少用id属性，可以使用从一个元素推出你想要的元素的位置以及和它的关系，这样锻炼了dom树形结构的思想。

var addCol = function() {
        let tableJquery = $("table tr");    //用jquery得到table标签下所有tr标签
        let headTr = tableJquery[0];    //取得第一个tr，分析html很明显就是我们要加东西的位置
        let newRadioButton = document.createElement("td");
        newRadioButton.innerHTML = "<td><input type='radio' class='colSelectedRadio' " +
            "name='colSelected'></td>";
        headTr.appendChild(newRadioButton);//为了区分和jquery的append，记住原生dom操作就用appendChild
        let rowCount = tableJquery.length - 1;
        for (let i = 0; i <rowCount ; i++) {
            let newTd = document.createElement("td");
            newTd.innerText = "新的一列";
            tableJquery[i + 1].appendChild(newTd);
        }
    }

这个题用原生dom操作解决，完整代码看点击这里。

结论

根据上面描述的用jquery给没有id等其他属性的控件元素添加html代码的例子，我从中明白了。

JQuery语法$(“选择器”)会得到一个jquery元素对象(我这样称呼)，该对象里面有十分多的键值对。
JQuery将新构建好的HTML代码直接append，为了进行区分，原生DOM操作是用document.createElement创建相关元素，然后填写属性，通过appendChild进行添加！
JQuery实际上就是封装了DOM操作。JQuery操作简单易记，一个JQuery语句可能需要多条DOM操作才能完成！但是，记住JQuery只是原生DOM的一个封装，所以JQuery能做的原生DOM一定也可以做，只不过麻烦点，而原生DOM是可以操作你的页面上任何的东西，而JQuery不一定。
由JQuery得到的jquery元素对象可以使用JQuery里面的所有合法语句，而一旦你使用jquery元素对象取得具体某个下标，或者重新移动定位另一个控件元素，这时候这个控件元素就不是jquery元素对象了，就不能使用jquery相关操作。
一句话概括就是：一旦用jquery元素去定位其他一个元素，那个元素就失去了jquery一些东西（例如：append），就要考虑用原生的Dom操作了！

依然存在的问题

另外还有两个我还是不是很理解的问题。第一个就是在js中，如果出现导入两个js文件，他俩存在相同的函数名称且函数参数完全一致，然后再在另一个js中调用这个函数名称，它怎么区分是该调用哪一个函数呢？第二个就是JQuery与原生DOM的问题，上述我说用jquery元素去定位另外一个元素，这个元素就成原生元素了，我不知道如何从原生元素变为jquery元素，有大佬帮帮忙解答下吗？

Honor_z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JQuery】JQuery和原生DOM操作动态增加HTML代码问题探究

文章目录结论依然存在的问题事情是这样的。再做动态表格行和列的删除时，导师说我做的这种键入的形式不对，这种形式用户体验感多差啊，甲方肯定不会满意的。给我提出改进方案，要么通过模态框和输入框结合起来获得相关数据，要么通过结合单选框（radio），选中要删除的行或列，再点击按钮删除。模态框我现在还没接触，同时为了锻炼前端编程能力就选择了使用单选框来解决。首先给出基本HTML<!DOCTYPE html><html lang="en"><head> <
复制链接

扫一扫

专栏目录