javascript
才不是小弱鸡
一起学习~
展开
-
JS中属性为字符串数字的对象数组排序
0x00 前言 做项目时需要对数组对象进行排序,但是因为需要排序的数组对象的属性为字符串数字,例CO001Z01-01,网上找的博客文章根本没讲到点子上,后来翻阅mdn找到了解决办法,遂写出来与大家分享一下。0x01 代码 还是用的sort函数排序,但是因为js中字符串比较是使用charAt()进行一个个字符的比较,所以数字无法正常比较大小,比如2是要比12大的,所以这里比较函数中使用了localeCompare来返回值,localeCompare中的第三个参数为一个对象,其中的nu...原创 2021-04-20 09:50:58 · 1385 阅读 · 1 评论 -
jQuery学习-01
0x00 入口函数 入口函数是等dom元素加载完毕后再执行函数内的代码$(function (){ $('.box').hide();})0x01 顶级对象 $就是jquery的顶级对象,$=jquey;像0x00的例子一样,就是将.box这个对象包装成了jquey对象,所以可以调用jquey方法。 jquery对象就只能使用jquery方法,而DOM对象就只能使用原生js方法。 jquery对象转换为dom对象的方法:$('.box')...原创 2020-11-10 15:57:09 · 201 阅读 · 0 评论 -
王者荣耀手风琴效果实现
0x00 网页地址 http://pvp.qq.com/strategy/0x01 代码 HTML <div class="demo"> <p class="title">周免英雄(10月26号-11月1号)</p> <ul> <li class="active"> <img sr...原创 2020-10-30 14:44:35 · 999 阅读 · 1 评论 -
移动端开发插件(持续更新)
0x00 Swiper插件 中文站https://www.swiper.com.cn/ H5网页需要引入一个css与一个js文件即可引入此插件 此插件主要用于插入网页轮播图,也可用于制作各种推送,新闻网页。0x01 iscroll插件 https://github.com/cubiq/iscroll 用于定义滚动条0x02 富文本编辑器 https://ckeditor.com/ckeditor-4 用于在网页中加入富文本编辑器...原创 2020-10-29 14:06:11 · 201 阅读 · 0 评论 -
js查漏补缺-14
0x00 scroll scroll与client十分相似,都是返回值不带边框且不带单位,与client不同的一点就是,当元素超出盒子之后,client返回的值仍是盒子的大小,scroll返回的大小则是加上了超出盒子元素的大小。0x01 offset client scroll三大系列的对比总结 offset系列主要用于获取元素位置offsetLeft offsetTop; 另外需要注意的是以上两个方法兼容性差,只兼容ie9及以上的浏览器。offsetWidth和offse...原创 2020-10-29 10:03:41 · 87 阅读 · 0 评论 -
Js查漏补缺-13
0x00 元素偏移量offset系列 利用offset相关属性可以得到元素的偏移量和大小 <div class="father"> <div class="son"> </div> </div> <script> let father = document.querySelector('.father'); let son = document.querySelector('.son');...原创 2020-07-21 11:01:45 · 119 阅读 · 0 评论 -
Js中的立即执行函数
0x00 传统的两种写法 当需要函数立即执行时就可以使用立即执行函数let box = document.querySelector('.box'); (function (a) { console.log('第一种写法'); console.log(a); })(1); //这个括号可以看成函数的调用 //这种方法支持箭头函数 ((a) => { console.log('第一种写法使用箭头函数'); con.原创 2020-07-21 10:41:15 · 213 阅读 · 0 评论 -
关于Js中的this指针指向的对象
0x00 前言 this指针的指向问题一直是个大坑,今天无意间刷到了一篇文章,觉得说的挺好,记录一下方便复习 链接:https://www.cnblogs.com/pssp/p/5216085.html0x01 正文 时刻记住,this指向调用它的对象 function a(){ let user = "追梦子"; console.log(this.user); //返回undefined console.log(this);...原创 2020-06-25 09:15:21 · 373 阅读 · 0 评论 -
Js查漏补缺-12
0x00 window对象(续) 清除定时器-clearInterval() <button class="btn-start">开始定时器</button> <button class="btn-stop">停止定时器</button> <script> let start = document.querySelector('.btn-start'); let stop = document.query...原创 2020-06-23 21:47:25 · 124 阅读 · 0 评论 -
Js查漏补缺-11
0x00 键盘事件 常用的键盘事件有三个分别为onkeyup onkeydown onkeypress*原创 2020-06-09 20:27:44 · 165 阅读 · 0 评论 -
Js查漏补缺-10
0x00 事件委托 当需要给多个元素设置监听器时,不给子元素设置监听器,而是给父元素设置监听器,利用冒泡事件来设置子元素的事件,这样可以减少dom的操作次数,提高程序性能。 <div class="father"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li&g...原创 2020-06-07 19:59:19 · 191 阅读 · 0 评论 -
Js如何获取display为none的元素的宽高
0x00 原理 在css中visibility:hidden为不可见属性,但使用visibility:hidden隐藏的元素有物理尺寸,因此这里的原理就是将display:none的元素转换为isibility:hidden的元素,并计算宽高后改回来;0x01 弊端 此方法有一个弊端,就是可能会导致闪烁的现象(当计算时间较长时);如果实际过程中仅仅只是计算长宽,那么往往可以忽略掉这个时间,也就是等于没有闪烁;并且将元素设为绝对定位脱离文档流,这样便不会影响其他元素,加上极短的闪烁时间...原创 2020-06-03 18:43:33 · 2569 阅读 · 0 评论 -
Js查漏补缺-09
0x00 事件流 removeElementListener();可以解除元素的事件监听器绑定 事件流是页面中接受事件的传递顺序,包括捕获阶段,当前目标阶段,冒泡阶段 注意,Js只能执行冒泡或者捕获中的一个阶段; onclick等注册事件以及attachEvent只能得到冒泡阶段; addEventListener()若第三个参数为false(默认就是false),则也是冒泡阶段调用事件处理程序;而若第三个参数为true,则在捕获阶段调用事件处理程序;...原创 2020-05-31 15:56:13 · 175 阅读 · 0 评论 -
Js查漏补缺-08
0x00 三种动态创建元素方法的对比 1 document.write();如果页面文档流加载完了再调用会重绘页面, 这种方法会删除之前的页面并重建一个页面,然后将函数中的内容写入新页面; 2 innerHTML 在创建大量元素时效率更高(使用字符数组,不能拼接字符串);结构更复杂一些; 3 creatElement(); 在创建大量元素时效率稍低,但结构更加清晰;0x01 事件注册 注册事件有两种方式,注册事件和绑定事件...原创 2020-05-29 22:22:09 · 202 阅读 · 0 评论 -
Js查漏补缺-07
0x00 兄弟节点 nextSibling();获取的是下一个兄弟节点 // 包括文本节点 previousSibling();获取的是上一个兄弟节点 // 包括文本节点 nextElementSibling();获取的是下一个兄弟元素节点 previousElementSibling();获取的是上一个兄弟元素节点; //这两种方法需要ie9以上才支持 creatElement;创建一个元素; appendChild();向指定元素添加子节点;...原创 2020-05-28 21:19:59 · 147 阅读 · 0 评论 -
Js查漏补缺-06
0x00 换肤 通过点击图片来更换网页的背景(参考百度) <script> let imgs = document.querySelector('.baidu').querySelectorAll('img'); for (let i = 0;i < imgs.length;i++){ imgs[i].onclick = () => { let url1 = imgs[i].src; d...原创 2020-05-27 20:41:49 · 131 阅读 · 0 评论 -
Js查漏补缺-05
0x00 精灵轮播图-淘宝 使用js更改li的backgroundPosition属性,达到分割一张图,并作为不同块的background的目的; <script> let lis = document.querySelectorAll('li'); for (let i = 0; i <12; i++){ lis[i].style.backgroundPosition = '0 -' + 44 * i + 'px'; ...原创 2020-05-26 21:35:46 · 146 阅读 · 1 评论 -
Js查漏补缺-04
0x00 DOM ①innerText();不识别html innerHTML();可以识别HTML,此外这两个函数都能读取元素内容(当无参数时) ②以上函数只能修改普通盒子的内容,像表单这种特殊标签只能用value来修改 ③this在事件中指向的是事件函数的调用者;...原创 2020-05-24 20:16:37 · 124 阅读 · 0 评论 -
Js查漏补缺-03
0x00 内置对象 ·Date对象中的getMonth()方法获取的月份比实际月份小一; ·获取时间戳的方法: ①var time = +new Date(); ②var time = Date.now(); // h5 新增 ·数组对象常用方法 ①isArray();判断是否为数组,返回值为true or false; ②push();向数组末尾添加数组元素; 返回值为数组长度; ③pop();向数组末尾去除一个元素;返回值为删除的元素...原创 2020-05-23 16:22:40 · 156 阅读 · 0 评论 -
Js查漏补缺-02
0x00 函数 ·函数的实参数可以大于形参数,按照实参的顺序赋值给形参,多余的忽略; ·若函数的实参数小于形参数,则未赋值的形参值为undefined; ·函数如果没有return则返回undefined; ·arguments是函数的一个内置对象,其中储存了传递的所有实参; ·arguments是伪数组,它可以按照索引并获取值并且有length这个属性,但是它没有数组的一些方法,如pop();0x01 作用域es5的作用域为函数作用域和全局作用域,但是有个问题,就是函...原创 2020-05-22 19:13:16 · 178 阅读 · 0 评论 -
Js查漏补缺-01
0x00 字符串部分 ·使用+拼接字符串与其他类型的数据,拼接出来的类型为字符串(包括null与undefined)0x01 数据类型部分 ·typeof关键字可以获取数据类型 例 typeof a; ·parseInt(),parseFloat()会去掉英文单词,做动画时可以用来去掉单位;使用时需注意首位不能为字母,必须为数字 ·浮点数不能直接与浮点数进行比较,因为有误差,但是可以直接与整型进行比较 ·==会自动转换数据类型0x02 运算符 ·逻辑与短路运算 例...原创 2020-05-21 16:21:06 · 124 阅读 · 0 评论 -
es6的一些新特性
1 Defailt Parameters(默认参数) es6中可以直接将默认值放在函数申明里; 例:var test = function(a=1,b=2,c=3){ console.log(a+b+c); } 2 Template Literals(模板对象) es6中可以将变量直接在字符串中使用 例: var...原创 2019-09-16 19:53:59 · 217 阅读 · 0 评论 -
js中对象与c++的不同的地方
0x00前言 今天写吃豆人游戏时看到的一些关于对象的操作,感觉和以前学的c++,java等语言有挺大的区别,记录一下0x01对象 为了方便对比,这里建立两个简单对象 js对象var person = { name : ['Bob', 'Smith'], age : 32, gender : 'male', interests : ['music...原创 2019-01-22 11:38:15 · 2446 阅读 · 0 评论 -
使用XHR从服务器获取数据的基本操作
0x00前言 使用xml技术可以实现从服务端获取个别数据来更新部分网页而不用加载整个页面。十分的方便与好用,接下来介绍一下xml的基本使用方法。0x01步骤 ①调用XMLHttpRequest()用的构造函数新建一个请求对象 例:var request = new XMLHttpRequest(); ②使用open()方法指定HTTP request m...原创 2019-01-26 14:51:11 · 2995 阅读 · 0 评论 -
js中appendChild的用法
0X00写在最前 之前学习js时看到的appChild方法都是用于列表,也就是添加li标签之类,类似这样今天在mdn上看到了新的用法,令人耳目一新,记录一下与大家共同分享0x01项目地址https://roy-tian.github.io/mdn-examples/javascript/gallery/0x02 appendChild方法分析var thumbBar ...原创 2019-01-19 15:36:51 · 14365 阅读 · 0 评论