js

js中的函数

岁酱吖の 提交于 2020-03-08 08:05:31
函数 函数:由事件驱动的或者当它被调用时执行的可重复使用的代码块。语法格式: function 函数名(参数1,参数2) { //用关键字function来声明函数 这里要执行的代码 } 函数名(参数1,参数2) //调用函数 注意:javaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。 函数的声明 第一种function关键字: function foo(x, y) { return x + y } 这种声明方式可以通过函数名来调用 第二种:函数表达式 这种方式:没有函数名而是通过变量名来代替函数名,调用函数的时候通过访问变量来调用 var foo = function (x, y) { return x + y }; 第三种:function构造函数,没有人用 var foo = new function() 带有返回值的函数 var foo = function (x, y) { return x + y }; var f = foo(3, 4); alert(f) 注意:在使用 return 语句时,函数会停止执行并不是整个javascript 停止,并返回指定的值 ,函数的返回值你不需要声明他只需要使用 return 运算符后跟要返回的值即可。如果return没有返回值

js 面向对象

主宰稳场 提交于 2020-03-08 07:55:20
1.对象的表现形式 // new Object() var person = new Object(); person.name = "sdf"; person.age = "23"; person.job = "Enginer"; person.sayName = function () { alert(this.name) } person.sayName(); //对象字面量模式 var person = { name: "sdf", age: 23, job: "Enginer", sayAge: function () { alert(this.age) } } person.sayAge();   Reflection:如果有多个对象需要创建多次 2.创建对象工厂模式 func:解决了创建多个对象模式,但是没有解决对象识别的问题(即怎么知道一个对象的类型) function creatPerson(name, age, job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function () { alert(this.name) } return o; } var person1 = creatPerson("Nicholas", 23, "Enginer"

js操作DOM对象

匆匆过客 提交于 2020-03-08 05:41:57
js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点名称 nodeType 节点类型 nodeValue 节点值 setAttribute("属性名","属性值") getAttribute("属性名") 根据属性名获取对应的属性值 getAttributeNode("属性名") 获取的是属性节点 createElement() 新增节点 insertBefore(newLi,li) 把newLi放在li之前 replaceChild(newLi,li)把newLi替换li的位置 removeChild()删除指定的子节点 parentNode 获取父节点 appenChild()追加子节点 通过js中的style属性可以为节点动态的增加css样式 style.属性名 之前css的属性名 background-color 现在属性名 backgroundColor className用来动态的给节点设置class属性! tabs选项卡功能的实现 offsetLeft 返回元素左边距 到 父级的左边距 offsetTop 返回元素上边距 到 父级的上边距 offsetHeight 元素的高度 offsetWidth 元素的宽度

js保存数据到cookie

青春壹個敷衍的年華 提交于 2020-03-08 05:40:40
history.js 文件 ----------------------------------------------------------------------------------------------------- var addHistory=function(num,id){ stringCookie=getCookie('history'); var stringHistory=""!=stringCookie?stringCookie:"{history:[]}"; var json=new JSON(stringHistory); var e="{num:"+num+",id:"+id+"}"; //alert(e); json['history'].push(e);//添加一个新的记录 //alert(json.toString()); setCookie('history',json.toString(),30); } //显示历史记录 var DisplayHistory=function(){ var p_ele=document.getElementById('history'); while (p_ele.firstChild) { p_ele.removeChild(p_ele.firstChild); } var historyJSON

css加载会造成阻塞吗?

假如想象 提交于 2020-03-08 05:36:07
之前面试今日头条的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染做一个测试。 为了完成本次测试,先来科普一下,如何利用chrome来设置下载速度 打开chrome控制台(按下F12),可以看到下图,重点在我画红圈的地方 点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项 这样,我们对资源的下载速度上限就会被限制成20kb/s,好,那接下来就进入我们的正题 css加载会阻塞DOM树的解析渲染吗? 用代码说话: <!DOCTYPE html> <html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> h1 { color: red !important } </style> <script> function h () { console.log(document.querySelectorAll('h1')) } setTimeout(h, 0) </script> <link href="https:/

jquery幻灯片插件之owl.carousel.js

邮差的信 提交于 2020-03-08 04:15:09
官网地址: http://owlcarousel2.github.io/OwlCarousel2/ 这个插件兼容各种浏览器,以及移动端 使用方法: 1、下载文件,解压以后,把dist里面的文件放到项目中 2、引入jquery文件,必须是1.8以上的 3、页面引入的文件: <link rel="stylesheet" href="./js/vendor/OwlCarousel2-2.2.1/assets/owl.carousel.min.css"><link rel="stylesheet" href="js/vendor/OwlCarousel2-2.2.1/assets/owl.theme.default.min.css"> <script src="js/vendor/jquery-3.1.1.js"></script><script src="js/vendor/OwlCarousel2-2.2.1/owl.carousel.min.js"></script> 4、页面代码: 1 <div class="owl-carousel owl-theme"> 2 <div class="item"> 3 <picture> 4 <source srcset="img/ad001-l.png" media="(min-width:50em)"> 5 <source srcset=

前端 - js - 编程题6 - DOM节点查找

早过忘川 提交于 2020-03-08 03:57:22
题目描述 查找两个节点的最近的一个共同父节点,可以包括节点自身 输入描述: oNode1 和 oNode2 在同一文档中,且不会为相同的节点 function commonParentNode(oNode1, oNode2) { if(oNode1.contains(oNode2)){ return oNode1; }else{ return commonParentNode(oNode1.parentNode, oNode2);//使用递归的思路往上查找,找到一个节点的父节点,看他是否包含另一个DOM节点 } } function commonParentNode(oNode1, oNode2) { var on1_parents = getParents(oNode1); var on2_parents = getParents(oNode2); var i = on1_parents.length; var j = on2_parents.length; for(; i >= 0 && j >= 0 && on1_parents[i] === on2_parents[j]; i--, j--); return on1_parents[i+1]; } function getParents(oNode) { var parents = []; var parent =

JS ES6补充

吃可爱长大的小学妹 提交于 2020-03-08 03:26:55
补充点:1、let const   2、字符串模板   3、箭头函数   4、对象的单体模式  5、面向对象 一、定义变量 A、var 特点: 1、定义全局变量 2、可以重复定义 3、变量名提升 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>声明变量</title> </head> <body> <script> { var a =66; console.log('in'+ a); } // 在块级作用域的变量,可以在全局中使用 // 1.var 定义的是全局变量 console.log('out'+ a); // 2.var可以重新定义变量 var a = 88; console.log('new'+a); // 3.变量名提升 // 过程 var b -> 提升, 打印 b, b没有赋值,结果:undefined console.log(b); //undefined var b = 10; </script> </body> </html

JS面向对象之作用域

折月煮酒 提交于 2020-03-08 02:24:15
作用域 词法作用域 作用域 域 表示的就是 范围 ,即 作用范围 就是一个名字在什么地方能使用,在什么地方不能使用 块级作用域 块 级别的作用范围 // 在 c , java 等编程语言中,下面的语法报错 { var num = 123; // 应该用int , 这里是伪代码 { console.log(num); // 123 } console.log(num); // 报错 } 在 js 中采取词法作用域 词法(代码) 作用域,就是代码在编写过程中体现出来的作用范围,代码一旦写好,不用执行,他的作用范围就已经确定好了,这个就是所谓的 词法作用域 在 js 中的词法作用域规则 1. 函数允许方位函数外的数据 2. 整个代码结构中只有函数可以限定作用域 3. 作用规则首先是 提升规则 分析 4. 就近原则 如果当前作用规则有了名字,就不考虑外面的名字 在 js 中作用域分析方法 1. 先进行预解析,分析预解析过程 * 程序在执行过程, 会先将代码读取到内存中检查. 会将所有的声明在此时进行标记. 所谓的标记就是 让 js 解释器知道有这个名字, 后面在使用名字的时候, 不会出现未定义的错误. 这个标记过程就是提升. * 声明 1. 名字的声明, 标识符的声明( 变量名声明 ) * 名字的声明就是让我们的解释器知道有这个名字 * 名字没有任何数据与之对应 2. 函数的声明 *

js作用域和词法分析

狂风中的少年 提交于 2020-03-08 02:22:20
  都知道js中不存在类似于c++等语言的块级作用域,例如for循环中定义的变量,其实是属于当前对象下的属性,同一对象下可以随便访问。 只有函数可以限定一个变量的作用范围,即函数才是变量的作用域。   对于函数的变量访问时遵循作用域链的,即当前函数运行时会有一个当前作用域,当饮用某个变量时,会先查找当前作用域内是否存在该变量的定义,如果不存在则根据作用域链向上去查找父函数的作用域,有则拿来使用,没有则继续向上直到全局作用域。关于作用域链这里就不仔细描述,简单而言,类似原型链,从全局函数直到当前函数的作用域存在一种相互包含的关系,子可以向上访问,但是父不可以向下访问子函数的变量,这样层层嵌套的关系链。   类似这样的:  var num = 10;   function a (){     alert(num);   }   a() //结果alert(10),a里没有num所以向上查找外层的作用域,有且等于10所以弹出10而不是undefined.   但是,下面的代码就是undefined了:   var num = 10; var num = 10;   function a (){     alert(num);     var num = 11;   }    为什么呢? a()执行时虽然num=11没有赋值但是父级作用域里是有num=10的,不应该是 undefined呀