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

  事情是这样的。再做动态表格行和列的删除时,导师说我做的这种键入的形式不对,这种形式用户体验感多差啊,甲方肯定不会满意的。给我提出改进方案,要么通过模态框和输入框结合起来获得相关数据,要么通过结合单选框(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代码的例子,我从中明白了。

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

依然存在的问题

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值