jQuery中一些容易出错的点，深入前端，打狗棒法之《压扁狗背》

最新推荐文章于 2024-08-12 00:32:33 发布

仓颉大哥

最新推荐文章于 2024-08-12 00:32:33 发布

阅读量408

点赞数

分类专栏：三十六式打狗棒法文章标签： jquery nodejs npm load gitignore

本文链接：https://blog.csdn.net/xiaorui51/article/details/108682066

版权

三十六式打狗棒法专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、如何在NodeJs中使用jQuery?

有时候在项目中需要使用jq在node中，但是使用起来却不是那么友好，那么现在该怎么做？改写JQ插件？将JQ插件打包成npm包，再在项目中进行引用？显然这些相比较于难度都比较大。接下来介绍一种简单的方法。

首先安装jquery以及jsdom。
npm 安装

npm install jquery

npm install jsdom

使用方法为：

const jsdom = require('jsdom');
const {JSDOM} = jsdom;
const {document} = (new JSDOM('<!doctype html><html><body></body></html>')).window;
global.document = document;
const window = document.defaultView;
const $ = require('jquery')(window);

将这些文件引入到jq所在的目录中，并且将原来jq声明的立即执行函数进行替换。

(function($) {
//some var
//some function
//dosometing
})(jQuery);

最终的形式类似于这样

const jsdom = require('jsdom');
const {JSDOM} = jsdom;
const {document} = (new JSDOM('<!doctype html><html><body></body></html>')).window;
global.document = document;
const window = document.defaultView;
const $ = require('jquery')(window);
//some var
//some function
//dosometing

举个例子吧，比如写一个定时器：
使用了扩展

const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const { document } = (new JSDOM('<!doctype html><html><body></body></html>')).window;
global.document = document;
const window = document.defaultView;
const $ = require('jquery')(window);


$.extend(Date.prototype, {
    format: function(format) {
        /*
         * eg:format="YYYY-MM-dd hh:mm:ss";
         */
        var o = {
            "M+": this.getMonth() + 1, // month
            "d+": this.getDate(), // day
            "h+": this.getHours(), // hour
            "m+": this.getMinutes(), // minute
            "s+": this.getSeconds(), // second
            "q+": Math.floor((this.getMonth() + 3) / 3), // quarter
            "S": this.getMilliseconds()
                // millisecond
        };

        if (/(y+)/.test(format)) {
            format = format.replace(RegExp.$1, (this.getFullYear() + "")
                .substr(4 - RegExp.$1.length));
        }

        for (var k in o) {
            if (new RegExp("(" + k + ")").test(format)) {
                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] :
                    ("00" + o[k]).substr(("" + o[k]).length));
            }
        }
        return format;
    }
});

function Person(name) {
    //构造函数里面的方法和属性
    this._name = name;
    this.getName = function() {
        console.log(this._name);
    };
    this.setName = function(name) {
        this._name = name;
    };
}

var p = new Person("zhangsan");
p.getName(); // zhangsan
p.setName("lisi");
p.getName(); // lisi

//每秒中更新一次
getCurrentDate(), setInterval(function() {
    getCurrentDate();
}, 1000);

function getCurrentDate() {
    var now = new Date();
    var weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    console.info(now.format('yyyy年MM月dd日 hh时mm分ss秒') + " " + weekArr[now.getDay()]);
}

输出
在这里插入图片描述

二、jQuery里面的$(“this”)和$(this)有什么区别?

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

三、idea vscode git 配置文件忽略文件夹?

创建一个 .gitignore文件放在根目录下
文件内容为你需要忽略的文件名
比如：

.idea
.vscode
.node_modules
node_modules

四、js中!和!!的区别及用法？

js中!的用法是比较灵活的，它除了做逻辑运算常常会用！做类型判断，可以用！与上对象来求得一个布尔值，
1、!可将变量转换成boolean类型，null、undefined和空字符串取反都为false，其余都为true。

1 !null=true
2 !undefined=true
3 !''=true
4 !100=false
5 !'abc'=false

2、!!常常用来做类型判断，在第一步!（变量）之后再做逻辑取反运算，在js中新手常常会写这样臃肿的代码：
判断变量a为非空，未定义或者非空串才能执行方法体的内容

var a;
if(a!=null&&typeof(a)!=undefined&&a!=''){
//a有内容才执行的代码
}

实际上我们只需要写一个判断表达：

if(!!a){
//a有内容才执行的代码...
}

就能和上面达到同样的效果。a是有实际含义的变量才执行方法，否则变量null，undefined和’'空串都不会执行以下代码。
可以总结出来，“！”是逻辑与运算，并且可以与任何变量进行逻辑与将其转化为布尔值，“!!”则是逻辑与的取反运算，尤其后者在判断类型时代码简洁高效，省去了多次判断null、undefined和空字符串的冗余代码。

五、$(window).load()、window.οnlοad=function(){}和$(document).ready()方法的区别

1、$(window).load() 和window.οnlοad=function(){}区别
它是页面中的所有元素（包括图片、flash）等都加载完毕后，才能执行；
而 $(document).ready() 是页面中的DOM元素加载完成后便可执行。

2、$(window).load()和window.οnlοad=function(){} 区别：
不同的是，前者可以和$(document).ready()一样，可以同时加载多个函数。

3、window和document的区别
1、window代表的是浏览器窗口，即可视的浏览器窗口
document代表的是整个页面的dom元素，即document只是window的一个属性；
2、两者的区别在页面有滚动条时可以直观的显示出来，当出现滚动条时，$(window).height和$(document).height是不相等的，$(document).height比$(window).height大，因为window的高度始终都是可见的浏览器窗口的高度，而document的高度则是整个页面的dom元素的高度，即超出一屏幕了。

4、$(window).load()方法的使用场景
1、当某一触发事件，需要页面的所有元素都加载完毕后才执行，并且元素不是通过ajax回调填充的情况下，使用$(window).load()即可。

2、当某一触发事件，需要页面的所有元素都加载完毕后才执行，并且元素是通过ajax回调填充的情况下，使用$(window).load()会出现有时有效，有时无效的情况，因为回调的html元素的加载完成可能在$(window).load()执行之后。

六、jQuery里这句是什么意思？ var ul = $(’<ul>’,{‘class’:‘hidden’});

创建一个<ul class="hidden"></ul>

Return a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string.
有两个作用，一个是返回一个集合；一个是创建给点的Html字符串。

七、$(“ul”, div)起什么作用？

$(…)括号里第二个参数如果是jQuery对象或者Dom对象的话，就是以该对象为上下文进行查询。这相当于一种简写法，可以缩短源码，并且在packer的时候可以减少一个词汇。
当然，如果没有这个参数的话，默认的查询上下文就是整个Dom文档。
//原语句

var div = $(this),
 ul = $(ul, div),
 tLi = $(li, ul);

//等同于

var div = $(this), 
ul = div.find('ul'), 
tLi = ul.find('li');

八、$(window).scrollTop()和$(document).scrollTop()的区别？

具有相同的效果，都为返回滚动条的垂直位置,但是$(window).scrollTop()被所有浏览器支持。

单独来说：
$(document)是获取文档对象
$(window)是获取窗口对象

仓颉大哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录