[JavaScript知识库]jQuery-base 练习

前一篇练习了原生的前端练习
这里用jQuery练习一遍

$(function () {
    var parent = $('.parent');
    var colorContent = $('.colorContent');
    var colorDivs =$('<div class="colorDivs"></div>');

    colorContent.append(colorDivs);
    var colors;
    //加载数据
    $.ajax({
        //接口地址
        type: "get",//请求方式
        url: "/json/colors.json",//地址，就是json文件的请求路径
        dataType: "json",
        success: function (data) {
            colors = data;
            for (var i=0;i<data.length;i++){
                var colorDiv = $('<div class="colorDiv"></div>').appendTo(colorDivs);
                var colorName = $('<div class="colorName"></div>').text(data[i]['name']).appendTo(colorDiv);
                var color = $('<div class="color"></div>').css('background',data[i]['value']).appendTo(colorDiv);
                var colorNum = $('<div class="colorNum"></div>').text(data[i]['value']).appendTo(colorDiv);
                var copyBtn = $('<button class="copyBtn iconfont"></button>').appendTo(colorNum);

                color.mouseover(function () {
                   $('.parent').css('background',$(this).css('background'));
                })
                color.mouseout(function () {
                    $('.parent').css('background','#dddddd');
                })

                copyBtn.on('click',function () {
                    MyCopy($(this).parent().text());
                });
            }
        },
        error: function (returndata) {
            alert('网络异常稍后再试');
        }
    });
    //搜索
    var btn = $('#btn');
    btn.on('click',function (){
        var text = $('#searchText');
        var data = searchColor(text.val(),colors);
        var search = $('.search');
        var old = $('.searchColorDiv');
        if(old!=null){
            search.remove(old);
        }
        var colorDiv = $('<div class="searchColorDiv"></div>').appendTo(search);

        for (var i=0;i<data.length;i++){
            var colorName = $('<div class="colorName" style="width: 50px"></div>').text(data[i]['name']).appendTo(colorDiv);
            var color = $('<div class="color" style="width: 30%"></div>').css('background',data[i]['value']).appendTo(colorDiv);
            var colorNum = $('<div class="colorNum" style="width: 90px"></div>').text(data[i]['value']).appendTo(colorDiv);
            var copyBtn = $('<button class="copyBtn iconfont"></button>').appendTo(colorNum);

            color.mouseover(function () {
                $('.parent').css('background',$(this).css('background'));
            })
            color.mouseout(function () {
                $('.parent').css('background','#dddddd');
            })

            copyBtn.on('click',function () {
                MyCopy($(this).parent().text());
            });
        }
        return false;
    })

    //留言
    var sub = $('#sub');
    sub.on('click',function (){
        var textarea = $('.liuYan');
        if(textarea.val().length==0){
            alert('请输入内容!');
        }else {
            $.ajax({
                url: '/liuYan',
                data:{
                    'liuYan':textarea.val(),
                },
                success:function (data){
                    alert(data);
                }
            });
        }
        return false;
    });

});


function MyCopy(content) {
    const input = document.createElement('input')
    document.body.appendChild(input)
    input.setAttribute('value', content)   //内容
    input.select()
    if (document.execCommand('copy')) {
        document.execCommand('copy')
    }
    document.body.removeChild(input)
    alert('复制成功');
}

function searchColor(color,colors) {
    var list = [];
    console.log(color);
    for (var i=0;i<colors.length;i++){
        if (colors[i]['name']==color){
            list.push(colors[i])
        }
        if (colors[i]['value']==color){
            list.push(colors[i])
        }
    }
    return list;
}

1.总结 1 链式编程可以节省代码量 为何链式编程 因为jq返回的基本都是jq对象
2.注意事件中this 要$(this)提升
3.注意background 与backgroundColor
4.其他有啥问题查查文档即可

接下来进行vue 与react等高级框架学习