本文主要是介绍jQuery中一些容易出错的点，深入前端，打狗棒法之《压扁狗背》，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、如何在NodeJs中使用jQuery?
有时候在项目中需要使用jq在node中，但是使用起来却不是那么友好，那么现在该怎么做？改写JQ插件？将JQ插件打包成npm包，再在项目中进行引用？显然这些相比较于难度都比较大。接下来介绍一种简单的方法。
首先安装jquery以及jsdom。
npm 安装
npm install jquerynpm 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)是获取窗口对象
这篇关于jQuery中一些容易出错的点，深入前端，打狗棒法之《压扁狗背》的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
