出现原因:页面上通过jQuery或其他方式添加某些新元素,而新元素无法和页面第一次加载的事件进行绑定。
例如:对button添加一个点击事件,当通过jQuery添加一个新的button元素时,就可能无法触发这个事件。
delegate() 方法的事件可以处理当前或者未来元素(比如有脚本创建建的新元素)
$(document).delegate("[id='support']","click",function(){ alert('点击成功~'); });
此方法是根据下滑高度加一个值大于当前页面高度来判断的,所以使用时需要自行监测滑动高度和当前页的高度,修改800这个数值具体大小。
$(function() { $(document).scroll(function() { var scrollHeight = $(document).height(); console.log('当前高度:'+$(document).scrollTop(),'页面高度'+scrollHeight) if ($(document).scrollTop()+800 >= scrollHeight) { console.log('到底了~') } }) })
在js代码中写入debugger,回到浏览器F12打开检查窗口,触发js后从debugger开始调试,按F10执行一行代码,并在代码后面显示数值。
使用 debugger 语句类似于在代码中设置断点。
先说一下结论:[1, NaN, NaN],造成这样的原因是什么呢?
首先要先理解函数的意义,map()是将数组的每个元素传递给指定的函数处理,并返回处理后的数组,原数组不改变。单纯这样看可能就会出现脑子里一开始的答案[1,2,3],但为什么不是呢,重点来了!
map()函数是将1,2,3作为元素,和下标0,1,2分别传递给parseInt()函数,其实每个效果写出来就是:parseInt('1',0),parseInt('2',1),parseInt('3',2)的结果。parseInt()函数第二个参数的意义是指明前面参数的进制,从而转化成十进制输出,区间范围是0和2-36,默认是十进制也就是0。0默认是十进制所以1还是1,1不在有效范围内所以2变成NaN,2要求前面的参数必须以二进制0和1开头开始,所以也是NaN。
先上一段代码,假设页面中有4个li标签猜猜输出什么?
var elements=document.getElementsByTagName('li'); var li_length=elements.length; for (var i=0;i<li_length;++i){ elements[i].onclick=function () { alert(i) } }
答案:不管点哪一个一直输出4。
这其实就是事件异步引发的问题,循环过程中对DOM元素事件是绑定成功的,这一点是没有问题的,但是alert中的i却一直是以变量的形式存在的,当i经过一套for循环下来后最终的值变成了4,所以当点击事件触发,去调用i这个值时,是调用的当前变量内容,而不是覆盖之前的变量内容。
其实可以更明显一点,直接在循环外面去改变i的值,比如说在for循环下面给i赋值为999,那么当你触发点击事件时就会输出999;
先上一段代码猜猜输出什么?
var arr=[]; arr[1]=9; arr[3]=99; arr[9]=999; arr['a']='b'; arr['c']='d'; console.log(arr.length)
答案:10。
这里length实际上是根据数组的下标获取,而数组下标是从0开始的,所以这里获取最大下标9,然后加1最终返回的结果10。假设没有任何一个数值下标的元素,则就会输出0。
其实在js中数组的下标是不能存在字符串的,但如果我们尝试着把字符串作为下标使用,其实js会把这个认为是属性来看待,就像我们的对象一样,以键值对的形式存在。
有些代码不是单纯赋值之后就会分割成两个个体。
var arr=[1,2,3,4,5]; var arr2=arr; arr[1]=999; console.log(arr2[1])//999
这里虽然看上去是把arr的值赋给了arr2,实际上只是把arr的地址赋给了arr2,所以当我们改变arr的值时,arr2对应的值也会改变。
要想完全复制出来一份数组可以用以下方式:
var arr=[1,2,3,4,5]; var arr2=[...arr]; arr[1]=999; console.log(arr2[1])//2
every()和some()都是迭代函数,二者都是接受一个返回值为布尔值的自定义函数,对数组中的每个元素使用该函数,最终every()或some()返回一个布尔值。不同的是every()要求数组中的每个元素通过自定义函数时都返回true,那every()本身才会返回true,而some()中的自定义函数只要有一个返回true,则some()就会返回true。
function isEven(num) { return num % 2 == 0; } var nums = [2,4,6,8,10]; var nums2 = [2,4,7,8,10]; var nums3 = [1,3,5,7,9]; console.log(nums.every(isEven));//true console.log(nums2.every(isEven));//false console.log(nums2.some(isEven));//true console.log(nums3.some(isEven));//false
而filter()也是迭代函数,和every()类似,但是他返回的不是布尔值,而是经过自定义函数返回值为true的元素。
function isEven(nums){ return nums%2==0; } var arr=[1,2,3,4,5,6,7,8,9]; var arr2=arr.filter(isEven) console.log(arr2)//[2,4,8]
例如:把<替换成<>,把>替换成><,不管谁在前都会影响下一次。
let newStr= oldStr.replace(/<|"|=|\/|>/g, str => { let return_str = str; switch (str) { case "<": return_str = `<>`; case ">": return_str = `><`; break; } return return_str; });
ajax也分很多种,本人用的最多的是jQuery的Ajax,这篇文章就大概说一下相关的知识点。
首先下面是常用的ajax使用方式,其中的参数也是经常用到的:
$.ajax({ type:"post/get", url:"url", async:true/fasle, dataType:"json", processData:"true", contentType:"application/x-www-form-urlencoded", data:{ value_name:value }, success:function (data,status,ajaxclass) { //处理返回的数据 }, error:function () { //ajax失败时执行的方法 } })
type:
传值类型,分为POST和GET两种,不区分大小写,默认为GET。
实际上put、delete等传值方式也能使用,但仅部分浏览器支持。
url:
发送请求的地址
async:
是否异步,不写该属性时默认true。(异步是多线程,同步是单线程)
设置为true时,所有请求为异步。设置为false时,所有请求未同步。
注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
data:
发送到请求地址的数据,将自动转换为请求字符串格式。
单个值可直接写。例如name,接口可以接受到name这个值。
多个值用json格式。{参数名:值,参数名:值,……}的形式,或者直接写变量名{变量1,变量2,变量3,……}。
success:
当请求运行成功时的回调函数,并返回根据 dataType 参数进行处理后的数据。
参数一:data(这里参数名称任意)即为返回的值
参数二:status(这里参数名称任意)返回ajax的执行状态,这里返回success
参数三:ajaxclass(这里参数名称任意)返回当前ajax对象的一些数据。
error:
当请求运行失败时的回调函数,一般用作请求地址响应失败时给予用户报错提示。
dataType:
请求返回后要处理成的数据类型。常用值:
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
"text": 返回纯文本字符串
processData:
参数值为true或false,默认为true
一般情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是一个字符串),都会处理转化成一个查询字符串,以配合默认内容类型“application/x-www-form-urlencoded”。
如果发送DOM树信息或其他不希望转换的信息,则需要设置为false。
此属性在使用FormData进行data传值时属性值必须为false
contentType:
默认值“application/x-www-form-urlencoded”,是发送信息至请求地址时内容编码类型。
此属性在使用FormData进行data传值时属性值必须为false。
end,waiting for update……
相关知识扩充:
①如果不加此参数,会出现不可预知的错误!
比如某些加了安全控件的系统,不加此参数,会直接报错403,服务器认为你的此次请求是在攻击系统。
②当ajax上传文件时,我们查看Request headers:
这时会发现content-Type这个的参数是multipart/form-data后面还会有boundary再接着一串随机字符串。
前面的参数我们并不陌生,这是form表单上传文件必须的参数,而后面的参数是当我们上传文件时,系统会自动生成一堆随机字符串,也叫分界符,目的是为了防止文件中出现分隔符导,最终致请求地址的服务器无法正确解析文件的起始位置。
换言之就是,文件传输中本质还是文件流传输(其实也就是字符代码的传输),这样就需要与其他非文件参数进行区分,而boundary生成的这个复杂随机字符串就是为了将文件流与其他参数区分开来,而将contentType设为false是为了防止jQuery对数据进行二次编码,从而失去分界符,最终导致请求地址的服务器无法正常解析文件。
按默认值也就是true,会将上传的数据转换为字符上传,而当上传文件的时候,则不需要把其转换为字符串,因此就要关闭此转换功能,也就是设置为false。
直接在网站运行目录的.htaccess文件中输入以下内容:
Apache:
<IfModule mod_rewrite.c> RewriteEngine on RewriteBase / RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ index.php?s=/$1 [QSA,PT,L] </IfModule>
Nginx:
location / { if (!-e $request_filename){ rewrite ^(.*)$ /index.php?s=$1 last; break; } }