<script>
函数:
普通函数:
function func(){
}
匿名函数:
setInterval("func()",5000);
setInterval(function(){console.log(123)},5000)
自执行函数(创建函数并且自动执行):
function func() { }
func() (function(arg){console.log(arg);})(1) 序列化:
li=[1,2,3,4]
JSON.stringify(li) 将列表对象转化为字符串
JSON.parse(str) 将字符串转化为列表对象 转义:
客户端(cookie)请求服务器端
将数据转义之后保存到cookie里面 eval
python:
val =eval(表达式)
exec(执行代码)
JavaScript:
eval
时间:
Date类
var d=new Date()
d.getxxx 获取
d.setxxx 设置
作用域:
五句话搞定JavaScript作用域
其他语言:以代码块作为作用域
python中是以函数作为作用域的
javascript:以函数作为作用域(let)
function def() {
if(1==1){var name = 'za'};
console.log(name);
}
def ()
2.函数的作用域在函数未被调用之前,已经创建
3、函数的作用域存在作用域链,并且也是在被调用之前创建
a = '123';
function def(){
var a = '456';
function inner(){
console.log(a);
}
return inner;
}
var ret = def()
ret()
4、函数内部局部变量提前声明
解释的过程中会执行var a;但是不会赋值
function def() {
console.log(a);
var a= '123'
}
javascript面向对象:
不能将类的方法定义在类里面需要写在原型里面,因为每次创建实例都会创建类的方法,所以要把方法写在原型里面。避免浪费内存
类的创建实例:
function Foo(n) {
this.name = n #相当于self.name
}
#Foo的原型:
Foo.prototype={
'sayname':function () {
console.log(this.name)
}
} DOM:
查找
直接查找/间接查找:
var obj = document.getElementById('i1');
obj.innerText 处理全部文本,不包含当前标签内的标签
obj.innerHTML 包含所有,包括里面的标签
赋值:
obj.innerText='xxxx';
obj.innerHTML= '<a href="www.baidu.com"> xxxx</a>';
value (
针对input value获取当前标签中的值)
select 获取选中的value值(selectedIndex)
textarea value获取当前标签中的值
搜索框的实例:
样式的操作:
obj.className
obj.classList:
obj.classList.add()
obj.classList.remove()
obj.style.fontSize = '16px'
obj.style.backgroundColor = '16px'
obj.style.color = '16px'
属性的操作:
obj.setAttribute()
obj.removeAttribute()
obj.attributes
创建标签并增加到html中
1、字符串形式
2、对象的方式
提交表单:
任何标签都可以通过JavaScript提交表单
其他:
console.log()
alert()
var v=confirm(信息) v为true或false 弹出确认框
刷新
localtion.href 获取当前网页
localtion.href='www.xxxxx'重定向,跳转
localtion.reload() 相当于 localtion.href=localtion.href 刷新功能
定时器:
var obj = setInterval(function () {
console.log(123)
},5000)
clearInterval(obj);清除定时器
定时器只执行一次 5秒后执行
setTimeout(function () {
console.log(123)
},5000)
clearTimeout() 清除定时器
事件:
onclick,onblur,onfocus
面试题:行为。样式。结构相分离的页面?
JS CSS HTML
绑定事件的两种方式
a 直接标签绑定 onclick=‘xxxx()’
b 先获取DOM对象,然后进行绑定
document.getElementById('xx').onclick
document.getElementById('xx').onfocus
this,当前触发事件的标签
a.第一种绑定方式
<input id='i1' type='button' onclick='Clickon(this)'>
function Clickon(self) {
// 当前点击的标签
}
b、第二种绑定方式
<input id='i1' type='button'>
document.getElementById('i1').onclick=function () {}
c、第三种绑定方式
var mydiv=document.getElementById('i1')
mydiv.addEventListener('click',function(){console.log(123)},false);
mydiv.addEventListener('click',function(){console.log(456)},false);
一个事件执行两个函数 false是冒泡模式,当两个div重叠是,点击重叠部分false会先执行上层,true会先执行下层 作用域实例:
var myTrs = document.getElementsByTagName('tr');
var len =myTrs.length;
for(var i=0;i<len;i++){
myTrs[i].onmouseover=function () {
// 谁调用的函数this就会指向谁 为什么使用this而不使用myTrs【i】是因为函数作用域的问题,每次遍历函数的名称都会变
this.style.backgroundColor='red'
}
myTrs[i].onmouseout=function () {
// 谁调用的函数this就会指向谁
this.style.backgroundColor=''
}
}
sublime text emmet插件,方便书写代码
</script>

JS补充笔记的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  3. js读书笔记

    js读书笔记 基本类型的基本函数总结 1. Boolean() 数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 "&q ...

  4. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  5. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  6. node.js系列笔记之node.js初识《一》

    node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...

  7. JS面向对象笔记二

    菜单导航,<JS面向对象笔记一>,  参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...

  8. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  9. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

随机推荐

  1. day03记 angular代码

    一.AngularJs AngularJS 是一个 JavaScript 框架.通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. 1.四大特征 MVC模式.模块化.自动化双向数据绑 ...

  2. 【leetcode】827. Making A Large Island

    题目如下: 解题思路:这个题目可以进行拆分成几个子问题.第一,求出island的数量,其实就是 200. Number of Islands,这个很简单,DFS或者BFS都能搞定:第二,除了求出isl ...

  3. 链接收藏:bullet物理引擎不完全指南

    这个也是博客园的文章,编辑得也很好,就不copy了,结尾还有PDF: https://www.cnblogs.com/skyofbitbit/p/4128347.html 完结

  4. 弹性盒子FlexBox简介(一)

    一.理解弹性盒子 弹性盒子是CSS3的一种新的布局模式. CSS3弹性盒子(Flexible Box或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时,确保元素拥有恰当的行为的布局方 ...

  5. favicon.ico是什么?

    一.什么是favicon? 所谓favicon,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站.favicon 中文名称:网页图标  英文名称:favorites ico ...

  6. 可恶!学了这么久的LCA,联考的题目却是LCA+树形DP!!!可恶|!!!这几天想学学树形DP吧!先来一道入门题HDU 1520 Anniversary party

    题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.现在有个周年庆宴会,宴会每邀请来一个职员都会增加一定的快乐指数Ri, ...

  7. 把图片画到画布上,适应PC和移动端

    画一张图片到画布上 <canvas id="myCanvas" width="1000px" height="200px" >您 ...

  8. 基于BootStrap的分页代码实现

    public class PageUtil { //targetUrl 访问url totalNum总记录数 currentPage 当前页数 pageSize每页的大小 public static ...

  9. ES6 二进制和八进制字面量

    ES6 支持二进制和八进制的字面量,通过在数字前面添加 0o 或者 0O 即可将其转换为二进制值: let oValue = 0o10; console.log(oValue); // 8 let b ...

  10. Mapreduce报错:Split metadata size exceeded 10000000

    报错信息: Failure Info:Job initialization failed: java.io.IOException: Split metadata size exceeded 1000 ...