jQuery学习和知识点总结归纳（二）

学习任何一个新知识点都离不开增删改查，下面是本人在写练习市用到的jQuery对象中的相关方法的主要思路以及相关代码。

1、增

点击添加按钮时，会弹出一个窗口，在窗口中的input中输入相关的值后，点击确定，窗口消失，相关数据会被添加到数据所在的列表中。

$(".tbody").append(`
                <ul>
                    <li>
                        <input type="checkbox">
                    </li>
                    <li>
                       ${txt1}
                    </li>
                    <li>
                        ${txt2}
                    </li>
                    <li>
                        ${newTime}
                    </li>
                    <li>
                        ${txt3}
                    </li>
                    <li>
                        <span class="modify">编辑</span>
                        <span class="del">删除</span>
                    </li>
                </ul>
            
            `)

${}中的值就是获取到的input中的值。

2、删

选中想要删除的那一列数据，点击删除后，这一列数据就会从列表中删除。

 function delFn() {
            $('.del').click(function (e) {
                if ($(e.target).is('span')) {
                    $(e.target).parents('ul').remove();
                }
            });
        }
  delFn();

3、改

修改数据与添加数据思路类似，点击编辑按钮时，会弹出一个窗口，在窗口中的input中输入相关的值后，点击确定，窗口消失，相关数据会被保存到数据所在的列表中替代列表中原有的数据。

$(e.target).parent().parent().find("li").eq(1).text($('.pop input').eq(0).val())
                        .next()
                        .next().html(newTime);
                    $(e.target).parent().parent().find("li").eq(1).text($('.pop input').eq(0).val())
                        .next()
                        .text($('.pop input').eq(1).val()).next().next().text($('.pop input').eq(2)
                            .val())

4、查

在搜索框中输入想要搜索的数据，然后拿到输入的值与列表中的相关数据相比较，如果有，则先清空列表，然后添加与搜索到的相同的数据，以达到查找的目的。

$('button').eq(0).on('click', function (e) {
                var ipt1 = $('input').eq(0).val();               
                if (!ipt1) {
                    alert('输入查询内容')
                } else {

                    for (var i = 0; i < $(".tbody").find("ul").length; i++) {
                        if ($(".tbody").find("ul").eq(i).find("li").eq(1).text().trim() == $('input').eq(0)
                            .val()) {

                            $(".tbody").html(`
                                    <ul>
                                        <li>
                                            <input type="checkbox">
                                        </li>
                                        <li>
                                           ${$(".tbody").find("ul").eq(i).find("li").eq(1).text().trim()}    
                                        </li>
                                        <li>
                                            ${$(".tbody").find("ul").eq(i).find("li").eq(2).text().trim()}    
                                        </li>
                                        <li>
                                            ${$(".tbody").find("ul").eq(i).find("li").eq(3).text().trim()}
                                        </li>
                                        <li>
                                            ${$(".tbody").find("ul").eq(i).find("li").eq(4).text().trim()}
                                        </li>
                                        <li>
                                            <span class="modify">编辑</span>
                                            <span class="del">删除</span>
                                        </li>
                                    </ul>
                                
                                `)