- 博客(25)
- 资源 (1)
- 收藏
- 关注
原创 js执行机制
js执行机制js是单线程JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致------JavaScript是为处理页面中用户的交互,以及操作DOM而诞生的,比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务,这样导致的问题是:如果JS执行时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。同步和异
2020-12-24 19:49:22 339
原创 this指向问题
this指向问题this 指向问题 一般情况下this的最终指向是那个调用它的对象1.全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)console.log(this)function fn(){ console.log(this)}window.fn();window.setTimeout(function(){ console.log(this);},1000)2.方法调用中谁调用,this指向谁let o={ sa
2020-12-24 14:53:16 96
原创 js原生发送短信案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input .
2020-12-24 14:13:19 346
原创 js原生倒计时效果案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> * {
2020-12-24 14:01:59 156 2
原创 模拟京东快递单号查询案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> * {
2020-12-24 08:59:51 293 2
原创 BOM概述
BOM概述1.1 什么是BOMBOM(Browser Object Model) 即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window.BOM由一系列相关的对象构成,并且每个对象都提供了很多方法和属性。BOM缺乏标准,JavaScript 语法的标准化组织是ECMA,DOM的标准组织是W3C,BOM最初是Netscape浏览器标准的一部分。DOM文档对象模型DOM 就是把【文档】当作一个【对象】来看待DOM的顶级对象是documentDOM主要学习的
2020-12-23 09:54:11 1051
原创 原生js实现鼠标跟随
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> img {
2020-12-22 14:57:59 873
原创 DOM节点 节点概述 增删查改
节点概述一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性元素节点 nodeType 为1属性节点 nodeType 为2文本节点 nodeType 为3 (文本节点包含文字、空格、换行等)节点层级利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。1.父级节点 node.parentNodeparentNode 属性可以返回某节点的父节点 注意是最近的一个父节点如果指定的节点没有父节点则返回nu
2020-12-22 14:46:17 122
原创 js事件高级
1.注册事件(绑定事件)1.1 注册事件概述给元素添加事件,称为注册事件或者绑定事件注册事件有两种方式:传统方式和方法监听注册方式传统注册方式利用on开头的事件onclick<button οnclick=‘alert(‘hi!’)’>btn.οnclick=function(){}特点:注册事件的唯一性同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式w3c标准推荐方式addEventListener() 它是一
2020-12-22 14:44:50 264
原创 DOM重点核心
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。1、对于javaScript,为了能够使Javascript操作HTML,JavaScript就有了一套自己的dom编程接口。2、对于HTML、DOM使得html形成一颗DOM树,包含文档、元素、节点我们获取过来的DOM元素是一个对象(object),所以称为文档对象模型
2020-12-22 11:47:32 136
原创 js三种动态创建元素的区别
三种动态创建元素区别document.write()document.innerHTMLdocument.createEmelent()区别1、document.write 是将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面重绘2、innerHtml 是将内容写入某个DOM节点,不会导致页面全部重绘3、innerHTML 创建多个元素效率高(不要拼接字符串、采取数组形式拼接),结构稍复杂4、createElement() 创建多个元素效率稍低一点点,但是结构更清晰总结:不同浏
2020-12-22 10:06:49 133
原创 js实现简单发布留言版案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> textarea {
2020-12-22 09:21:00 605
原创 js动态生成表格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m
2020-12-22 09:19:18 186
原创 js 下拉菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> .nav {
2020-12-21 15:59:10 1309 4
原创 js实现 全选和取消全选效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> * {
2020-12-21 14:13:08 1264 4
原创 js实现表格隔行变色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> * {
2020-12-21 13:44:04 1158
原创 百度换肤效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> *{ m
2020-12-21 13:11:52 101
原创 原生选项卡实现思路
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> .tab {
2020-12-21 11:21:29 124
原创 判断一个字符串中出现次数最多的字符,并统计其次数
1、核心算法:利用 charAt() 遍历这个字符串2、把每个字符都存储给对象,如果对象没有该属性就为1,如果存了就+13、遍历对象,得到最大值及出现次数和该字符let str = "aozisodsdkksdsd" let obj = {} for (let i = 0; i < str.length; i++) { let chars = str.charAt(i) if (obj[chars]) {
2020-12-16 14:25:59 5056
原创 js查找字符串中某个字符出现的位置及次数
let str = "oabcoefozzpopp"; let index = str.indexOf("o"); let num = 0; while (index !== -1) { console.log("o出现的位置是" + index) num++; index = str.indexOf('o', index + 1); } console..
2020-12-14 13:23:50 1440
原创 手写去重 unique
分析数组去重 [“blue”,“red”,“red”,“black”,“blue”] 要求去除数组中重复的元素1、目标:把旧数组里面不重复的元素选取出来放到新数组中,重复的元素只保留一个,放到新数组中去重2、核心算法 我们遍历就数组,然后拿着旧数组元素去查询新数组,如果该元素在新数组里面没有出现过,我们就添加,否则不添加3、我们怎么知道该元素没有存在,利用新数组.indexOf(数组元素)如果返回-1 就说明数组里面没有该元素 function unique(arr){ l
2020-12-14 11:35:13 217
原创 js引擎运行js
js引擎运行js分为两步:预解析 代码执行首先 预解析 js引擎会把js里面所有的 var 还有function 提升到当前作用域的最前面然后 代码执行 按照代码书写的顺序从上往下执行预解析 分为变量预解析(变量提升) 和 函数预解析(函数提升)变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数//案例function f1(){ var a=b=c=9; //相当于 var a=9;b=9;c=9;
2020-12-14 11:15:13 198 1
原创 利用函数判断闰年
function isRunYear(year) { //如果是闰年我们返回true 否则返回false let flag = false if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0){ return true } return false } .
2020-12-14 10:32:09 1171
原创 冒泡排序,数组颠倒,数组筛选
冒泡排序首先需要明白思路,一个数组arr=[9,5,8,4,7,3,2],冒泡就是从数组第一个值开始与依次与之后的值比较,如果是从小到大排序,那么9先和5比较,9大就换与5交换位置,再和8比较还大,再和8交换位置,继续。。。直到2还大,那么9放在了数组的最后,下一次比较的数组变为arr=[5,8,4,7,3,2,9],这样再来一轮5和其他值比较形成arr=[4,8,3,7,2,5,9],这样继续循环直到完成从小到大排序,当然反过来也是一样的如果是从大到小,那么如果大就不换位置。这样的话我们还需要知道怎么
2020-12-07 18:39:31 206
原创 双重for循环实现99乘法表,及运行机制
话不多说直接上代码let str=''for(let i=1;i<10;i++){ for(let j=1;j<=i;j++){ str=str+j+'x'+i+'='+i*j+'\t' } str=str+'\n'}console.log(str)当然这个会了正三角倒三角也不在话下let str=''for(let i=0;i<5;i++){ for(let j=0;j<=i;j++){ str=str+'*' } str=str+'\n'
2020-12-01 10:57:16 516
uni-app封装请求完成示例项目
2020-11-02
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人