![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS部分
文章平均质量分 68
一匹脱缰的野马
一匹脱缰的野马
展开
-
JS的变量与数据类型/JS一
JS 运行在浏览器上的动态语言 内核中有两个引擎:渲染引擎 JS引擎 jS是解释型语言:一行一行执行,插入一句话(编译型是先编译,然后整体运行) JS是单线程:单线程异步 node.js用js搭建的服务器 ECMA:欧洲计算机联盟 JS核心3部分 ECMA 标准核心 DOM Document Object Model BOM Broswer Object Model <hea...原创 2019-03-25 13:53:41 · 263 阅读 · 0 评论 -
变量提升规则(预编译)以及DOM/JS二
预编译 预编译-->变量提升 变量声明提升到最顶端 预编译过程好产生一个AO对象 activation Object 预编译发生在函数之前预编译: (1).创建AO对象 (2).找形参和变量声明,将变量和形参作为作为AO属性名 值undefined(同名只写一次) (3)将实参和形参相统一 (4)在函数里找函数声明 函数体作为值赋予函数名 经过AO预编译后从AO中取值 functi...原创 2019-03-26 20:48:51 · 345 阅读 · 0 评论 -
获取表单元素以及自定义属性/JS三
获取表单元素 昵称:<input type="text" required name="username"> required 可以让用户必须填写这个 var form = document.form1; 可以获取整个表单 ops[2].innerText = '成都' .innerText可以修改文本内容 .innerHtml可以修改html内容 代码示例如...原创 2019-03-28 08:54:40 · 834 阅读 · 0 评论 -
排他思想和选项卡切换/JS三
选项卡切换 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; ...原创 2019-03-28 09:05:09 · 413 阅读 · 0 评论 -
闭包与获取元素/JS三
闭包: 1.弊端:闭包占内存,造成内存泄露 2.作用:形成私有化(数据不想被别人访问到可以用闭包) 数据缓存 总结:闭包占内存,但是可以形成缓存(a调用完结束销毁值,但是b还保存a的值) function a(){ var a; function b() {//函数声明有变量提升机制 document.write(a) ...原创 2019-03-27 22:00:10 · 334 阅读 · 0 评论 -
对象属性/JS三
对象:无序键值对的集合,属于引用类型(栈保存他的堆地址,栈不保存他的真实数据) var obj={ } 定义:糖衣法 /*伪代码 this在每个函数身上都有*/ function Person() { var that=new Object() that.name='' that.hobby='' that.eat=function () { }...原创 2019-03-27 22:11:31 · 218 阅读 · 0 评论 -
字符串方法以及时间对象/JS三
字符串方法 根据下标返回字符 charAt() var str = 'asdef' alert(str.charAt(3)) //结果为:f alert(str.charCodeAt(3)) //返回下标位置字符串的ASCII码 连接字符串concat('hhh','kkk') var str1=str.concat('hhh','kkk') console.log(str1) //...原创 2019-03-27 22:17:46 · 238 阅读 · 0 评论 -
DOM操作文本以及操作属性/JS三
操作文档树 document 写法window.document 获取节点:document.getElementById() var mydiv=document.getElementById('dv') 获取完之后操作:mydiv.style.width='200px' var mydiv=document.getElementsByClassName('dv')//...原创 2019-03-27 22:29:48 · 592 阅读 · 0 评论 -
JS实现点击图片变大/JS三
代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; ...原创 2019-03-28 13:46:13 · 1289 阅读 · 0 评论 -
京东顶部栏颜色变浅然后消失的制作方法/JS四
点击之前效果如下: 点击之后效果如下: 点击过程中颜色会逐渐变浅最后消失,并且不再占用原来位置 思路:刚开始设置style="opacity: 1" (这个设置到行上,因为对象.style.属性名,只能获取写在行内的样式,想要获取元素的话就要把它写在标签的行内),让盒子完全不透明。点击错号触发点击事件的时候,通过与点击事件相关联的函数让opacity这个值不断减小,直到...原创 2019-03-28 19:43:55 · 1225 阅读 · 3 评论 -
JS定时器和清除定时器/JS四
1.永久定时 使用格式如下: timer=window.setInterval(function(){ 每隔多长时间执行的代码 }, 1000) 1000代表的是1000毫秒,上面的代码返回的是定时器标志(timer),获取到返回的定时器标志之后可以进行定时器的清除操作。 2.一次定时 使用格式如下: setTimeout(function(){ console.log('2s...原创 2019-03-28 20:16:45 · 748 阅读 · 0 评论 -
创建节点与插入节点/JS四
节点的创建 window.onload = function () { ‘各种属性内容写在这里‘’ } 这是入口函数,设置他的目的是保障静态资源加载完毕,只要资源加载完毕 这个回调函数就触发了。 创建节点的函数: document.createElement('标签名字') 创建示例: var obj = document.createElement('a') 通过这个...原创 2019-03-28 21:30:56 · 1492 阅读 · 0 评论 -
函数/JS二
函数-js的第一等公民: 1.定义:函数首+函数体 function 函数名(参数){ 函数体; return 结果; 如果没写返回值默认返回undefined } 2.语法 两种方法 (1)函数声明 函数在定义的时候并不占用内存(不是函数的内容不占),在调用的时候才占 代码示例: function add(a,b) { //两个数求和 输入其实就...原创 2019-03-26 20:25:10 · 269 阅读 · 0 评论 -
照片放大镜制作/JS五
图片效果如下: 在鼠标没有移入图片的时候 鼠标移入的时候 鼠标移动到那个位置就把那个位置放大 计算比例 宽比例 move的宽度-小盒子的宽度 /大盒子的宽度-大照片的宽度 高比例move的高度-小盒子的高度 /大盒子的高度-大照片的高度 代码如下: <!DOCTYPE html> <html lang="en"> <head> <m...原创 2019-03-30 16:24:10 · 284 阅读 · 0 评论 -
运算符/JS一
1.算数运算符(二元) + - * / % 2.逻辑运算符 && || ! 与 或 非 var a=10 a>10 && a=20 a>10那么把20赋值给a这一步不做运算 console.log(a) a的结果为10 !0=1 !1=0 3.关系运算符 == != >= <= > <...原创 2019-03-25 15:57:22 · 281 阅读 · 0 评论 -
三大结构/JS一
算法五大特性:输入0个多个 输出1或多个 确定性 可行性 有穷性 四要求:健壮性(靠if--else实现) 可读性 正确性 时间效率高存储量低 三大结构 顺序结构: 1.输入语句 2.输出语句 3.赋值 选择结构: if更加全面 如下 单分支: if(判断条件){ 满足条件执行的判断语句 } 双分支: if(判断条件){ 执行语句 } else{ 执...原创 2019-03-25 20:31:50 · 284 阅读 · 0 评论 -
JS实现斐波那契,n的k次幂以及猴子吃桃问题/JS一
斐波那契问题 a=1 b=1 i=1 while (i<10){ c=a a=b b=c+b console.log(a) i+=1 } n的k次幂 n=parseInt(prompt("输入n的值")) k=parseInt(prompt("输...原创 2019-03-25 20:37:24 · 327 阅读 · 0 评论 -
总结/JS一
引入CSS的方法: 在<head></head>之间加入<link rel="stylesheet" href="01css.css"> ,href表示连接的文件地址。 引入js的方法: 在<body></body>之间加入<script src="01.js"></script>,src属性写外部js路径。...原创 2019-03-25 21:35:01 · 279 阅读 · 0 评论 -
轮播图的制作/JS四
轮播图 效果如下: 效果: 不点击左右按钮的时候自动切换; 点击按钮的时候切换下一张; 鼠标移入的时候图片停止不动; 点击下面圆圈的时候移动到图片对应的图片; html的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...原创 2019-03-29 19:55:22 · 358 阅读 · 0 评论 -
一个按钮实现样式的自由切换/JS五
两个按钮控制元素属性改变 未点击按钮时的效果如下: 点击加上按钮时的效果如下: 点击去掉样式时结果如下 注:获取元素的关键代码为 var btn1=my$('button:first-of-type') 获取第一个button var btn2=my$('button:nth-of-type(2)') 获取第二个button my$('.box').class...原创 2019-03-29 20:20:07 · 1805 阅读 · 0 评论 -
表单提交前的JS验证(用正则判断)/JS五
知识点总结 label 标签起到点击文字自动聚焦的效果 如: <label for="userpasswd">姓名:</label> 这里面for里面的名字要与下面的保持一致,这样才能实现聚焦 <input type="text" name="username" id="username" autofocus> 引入样式图标 在font下...原创 2019-03-29 20:57:30 · 668 阅读 · 0 评论 -
网页鼠标位置坐标的获取/JS五
知识点 获取鼠标移动事件:document.onmousemove 鼠标的坐标为e.clientX,e.clientY ,事件对象 e 保存着事件的具体信息 对象高度与宽度的获取方法: 对象宽度:对象.offsetWidth 对象高度:对象.offsetHeight 实时获取鼠标的位置的效果如下 代码如下: <!DOCTYPE html> <html l...原创 2019-03-29 21:22:23 · 717 阅读 · 0 评论 -
网页回退(BOM实现)/JS五
知识点 window.location 保存url具体信息location.href 保存整个地址栏地址 window.history 包含历史记录 window.history.back() 回到上一页 window.history.go() 回到下一页 效果如下 点击前进时 点击后退时 代码如下 <!DOCTYPE...原创 2019-03-29 21:35:04 · 536 阅读 · 0 评论 -
数组的常用方法/JS二
对象继承自object Array 数组 Function 函数(函数也是继承自object) 数组:逻辑关系 线性关系(一个下标对应一个值) 存储关系 连续的(数组名字保存的是首地址) 有利于存取,不利于删除和插入 数组动态扩充,可以存放任何数据类型 定义数组 (1)构造数组 var ...原创 2019-03-26 19:47:33 · 226 阅读 · 0 评论 -
随机验证码代码/JS五
知识点 产生随机数:Math.random()生成0到1之间 的小数。 效果如下: 点击时 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <...原创 2019-03-30 16:06:27 · 278 阅读 · 0 评论 -
document下的write()写九九乘法表和省市联动/JS二
document.write()的使用方法 作用:向可视区域写入数据(写到body里) document.write()里面的内容为变量的实际值,document.write('标签和样式')里面的内容也可以为标签和样式 省市联动的代码用法示例: var provices=['浙江','陕西','河南'] var cities=[['杭州市','温州市','宁波市'],['...原创 2019-03-26 20:12:30 · 1210 阅读 · 0 评论 -
省市联动/JS四
效果如下: 代码及注释如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="provin...原创 2019-03-29 08:55:20 · 228 阅读 · 0 评论