js中的一些知识点，小白专用，打狗棒法之《棒挑癞犬》

jQuery里面的$("this")和$(this)有什么区别

直接上解释吧：

1、$("this")是使用标签选择器，查找名为this的标签
2、$(this)取出当前对象并转换为jQuery对象
3、$(this)是jquery对象，能调用jquery的方法，例如click(), keyup()；而this,则是html元素对象，能调用元素属性，例如this.id,this.value

项目中js中实战写法：

     //id为social class类为like的点击事件
    $("#social .like").click(function () {
        debugger
        /* $(this)单曲获取到点赞的对象*/
        var $this = $(this);
        // find找到 a标签
        var $a = $(this).find("a");
        // 继续找到a标签下面的 i便签且class为count的对象
        var $count = $a.find("i.count");
        /*  $a.data("id") 获取的就是页面中的data-id="${article.id?c}" 的数值  */
        var id = $a.data("id");
        // 自定义的鼠标样式
        $.gubble.unbind();
        // 鼠标点击的ajax的请求
        $.ajax({
            type: "post",
            url: "/api/praise/" + id,  //此处要传一个id参数
            //成功
            success: function (json) {
                //自定或者说重载了一个alert函数
                $.alert.ajaxSuccess(json);
                //如果成功的话，在当前$this对象上面新增一个显示
                if (json.status === 200) {
                    $this.effectBubble({
                        y: -80,
                        className: 'thumb-bubble',
                        fontSize: 1,
                        content: '<i class="fa fa-smile-o"></i>+1'
                    });
                    $count.text(parseInt($count.text()) + 1);
                }
                $.bubble.init();
            },
            error: function () {
                $.alert.ajaxError();
                $.bubble.init();
            }
        });
    });

前端页面展示：

                    <div id="social" style="margin-bottom: 45px;">                       
                            <#--是否给文章点赞
                            2020年9月16日
                            1：整个“赞”是一个a的标签；
                            2：页面中“赞”前面有一个小手，就是fa fa-thumbs-up的样式
                            3：页面中“赞”后面有一个统计数据 $a.find("i.count") find是针对的class，fand i标签下的class类未count的对象
                            -->
                            <span class="like">
                                <a href="javascript:;" data-id="${article.id?c}" title="点赞">
                                    <i class="fa fa-thumbs-up"></i>赞
                                    <i class="count"> ${article.loveCount!(0)}</i>
                                </a>
                            </span>
                    </div>

自定义重载jquery中的方法：

(function ($) {
    // 覆盖jquery-confirm中的函数
    $.jqAlert = $.alert;
    $.jqConfirm = $.confirm;
    //扩展方法
    $.extend({
    //主要针对alert进行扩展，使用方法就是 $.alert
        alert: {
        //info信息提示
            info: function (content, callback, delayTime) {
                delayTime = delayTime ? "confirm|" + delayTime : "confirm|3000";
                //自定义的变量$.jqAlert中的方法
                $.jqAlert({
                    icon: 'fa fa-info-circle',
                    title: '友情提示',
                    content: content,
                    type: 'green',
                    typeAnimated: true,
                    autoClose: delayTime,
                    buttons: {
                        confirm: {
                            text: "关闭",
                            btnClass: 'btn-default',
                            action: callback
                        }
                    }
                });
            },
            //error错误信息
            error: function (content, callback, delayTime) {
                delayTime = delayTime ? "confirm|" + delayTime : "confirm|3000";
                $.jqAlert({
                    //显示alert的图标
                    icon: 'fa fa-exclamation-circle',
                    //标题
                    title: '警告',
                    //内容
                    content: content,
                    //是否自动关闭
                    autoClose: delayTime,
                    //类型
                    type: 'orange',
                    typeAnimated: true,
                    buttons: {
                        confirm: {
                            text: "关闭",
                            btnClass: 'btn-default',
                            action: callback
                        }
                    }
                });
            },
            //确认表单信息
            confirm: function (content, confirmCallback, cancelCallback, delayTime) {
                delayTime = delayTime ? "cancel|" + delayTime : "cancel|5000";
                $.jqConfirm({
                    icon: 'fa fa-question-circle',
                    title: '确认？',
                    content: content,
                    autoClose: delayTime,
                    type: 'dark',
                    typeAnimated: true,
                    buttons: {
                        confirm: {
                            text: '确定',
                            btnClass: 'btn-green',
                            action: confirmCallback
                        },
                        cancel: {
                            text: '取消',
                            btnClass: 'btn-default',
                            action: cancelCallback
                        }
                    }
                });
            },
            //ajax请求成功确认的表单
            ajaxSuccessConfirm: function (json, callback) {
                if (json.status == 200) {
                    if (json.message) {
                        $.alert.confirm(json.message, callback);
                    }
                } else {
                    if (json.message) {
                        $.alert.error(json.message);
                    }
                }
            },
            //ajax请求成功与否
            ajaxSuccess: function (json) {
            	//状态是否是200
                if (json.status == 200) {
                    //信息是否为空
                    if (json.message) {
                        //弹出Info信息
                        $.alert.info(json.message);
                    }
                } else {
                    if (json.message) {
                        //弹出错误信息
                        $.alert.error(json.message);
                    }
                }
            },
            //ajax超时
            ajaxError: function () {
                $.alert.error("网络超时！");
            }
        }
    });
    
 })(jQuery);

三十六招打狗棒法之第一章：棒挑癞狗