记一次Jquery的基本操作

Leefs 2019-11-11 PM 2807℃ 0条

# 记一次Jquery的基本操作

### 前言

作为前端小白的小编来说，今天在工作中被大佬给带飞，下面小编将对大佬的代码做深度解析，希望能对自己有点提升。

### 一、需求分析

![JqueryDemo01.png][1]

如上图所示，当点击**按钮2**时，**选框1**中的内容将向下增加一行，当点击**按钮3**时，**选框1**中的内容将被删除一行。

### 二、代码

> HTML结构代码

```html
<div class="container container-box-advanced">
    <div id="contionType" class="box-advanced-condtion">
        <div class="box-advanced-condtion-type">
            <select class="box-advanced-condtion-select">
                <option>
                    全部
                </option>
                <option>
                    条件一
                </option>
                <option>
                    条件二
                </option>
            </select>
            <span class="condtion-span-separate">|</span>
            <select class="box-advanced-condtion-select">
                <option>
                    模糊
                </option>
                <option>
                    条件一
                </option>
                <option>
                    条件二
                </option>
            </select>
        </div>

<div class="box-advanced-condtion-key">
            <input class="box-advanced-condtion-text" type="text" aria-label="..." placeholder="请输入关键字" >
            <span class="condtion-span-separate">|</span>
            <select class="box-advanced-condtion-select">
                <option>
                    与(AND)
                </option>
                <option>
                    条件一
                </option>
                <option>
                    条件二
                </option>
            </select>
        </div>
    </div>
    <div class="box-advanced-option">
        <span id="btnAdd">
        <img src="static/img/condtion-add.png" alt="">
        </span>
        <span id="btnDel">
            <img src="static/img/condtion-del.png" alt="">
        </span>
    </div>
</div>
```

> JS核心代码

```js
<script>
    //加载页面完成后执行的事件
    $(function(){
        const divOption = $("#contionType");//选择器选取带有指定id的元素
        const optionContent = divOption.html();//设置被选元素的内容
        console.log("====="+optionContent+"=====");
        const templeteContent = "<div id=\"contionType{0}\" class=\"box-advanced-condtion\">{1}</div>";
        let i = 0;
        $("#btnAdd").click(function(){
            const lastOption = $(".box-advanced-option");
            lastOption.before(templeteContent.replace("{0}", i).replace("{1}", optionContent));//方法在被选元素之前插入指定的内容。
            i += 1;
        });
        $("#btnDel").click(function(){
            const currOptionId = "#contionType" + (i - 1) ;
            $(currOptionId).remove();
            i -= 1;
        });
    });
</script>
```

> 代码分析

+ 1.**\$(function(){})**是$(document).ready(function(){})的简写，相当于window.onload=function(){},

虽然这段jquery代码与javascript代码在功能上可以互换，但执行的时间不一样，

前者页面框架加载完成就执  行，后者页面所有内容加载完成才执行

+ 2.`const divOption = $("#contionType");`选择器选择带有指定`contionType`Id属性的元素

+  3.`const optionContent = divOption.html();`该语句将Id为`contionType`的子类所有代码赋值给`optionContent`可以通过`console.log();`对`optionContent`内容进行输出打印，进行观察对比

+ 4.`const templeteContent = "<div id=\"contionType{0}\" class=\"box-advanced-condtion\">{1}</div>";`此段代码是整个代码中最巧妙的一句，将之前的Id为`contionType`的div中Id加上`｛0｝`、`{1}`，将来用于动态替换，同时class样式不发生变化

+ 5.当点击【+】号按钮时，触发点击事件

+ 6.`lastOption.before(templeteContent.replace("{0}", i).replace("{1}", optionContent));`在点击【+】号按钮的上方插入代码，此时将`templeteContent`变量中的{0}进行动态替换成i,{1}动态替换成`contionType`的子类代码

+ 7.让i进行加一

删除操作直接根据Id进行remove即可。

[1]: https://lilinchao.com/usr/uploads/2019/11/1745887649.png

标签: 前端, Jquery

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://lilinchao.com/archives/156.html

上一篇 Vue学习--品牌列表案例添加功能、删除功能

下一篇使用jQery完成下拉列表左右选择

记一次Jquery的基本操作

评论啦~

栏目分类

标签云

友情链接申请

记一次Jquery的基本操作

 评论啦~

 栏目分类

标签云

友情链接申请

评论啦~

栏目分类

标签云

友情链接申请