JavaScript零散笔记

javascript基础

js组成:DOM BOM ECMAScript

ECMAScript:“翻译功能” js中最核心的部分,专业叫做解释器 几乎没有兼容
DOM: Document Object Model 操作HTML的能力---》document 有一些不兼容
BOM: Browser Object Model 操作浏览器能力---》window 兼容的源头

变量的类型:number string boolean function object undefined(未定义/定义未赋值)

变量类型转换:
显式类型转换(强制类型转换):
parseInt() -->从左到右匹配字符串,提出字符串中最前面的数字
若字符串中没有数字,则返回一个NaN; NaN和NaN不相等
parseInt 会将小数转成整数,要小数用parseFloat()

隐式类型转换: 5==‘5‘ ---》 true
‘12‘+‘5‘=125 加号用来做字符串连接 ‘12‘- ‘5‘ ---》 7

变量的作用域和闭包:

作用域:局部变量:只能在定义该变量里的函数里面使用
全局变量:在所有函数的外面声明

闭包:子函数可以用父函数的局部变量

JS命名规范:
可读性---能看懂
规范性---符合规则
匈牙利命名法:
类型前缀:数组(a),布尔值(b),浮点数(f),函数(fn),整数(i),对象(o),正则(re),字符串(s),字体变量(v)
首字母大写:驼峰命名

运算符:求模% ----》应用(秒转成时间)
var s = 156; alert(parseInt(s/60)+‘分‘+s%60+‘秒‘)
!== 和 === 相反的意思
程序流程控制:
判断----if,switch,?:
switch(变量){
case 值1:
语句1;
break;
.......
default:
语句;
}

三目(元)运算符:?:
条件?语句1:语句2

跳出:break 中断整个语句
continue 中断本次,继续执行后面的
真假:
真:true,非零数字,非空字符串,非空对象
假:flase,数字零,空字符串,空对象,null,undefined

JSON:{}基于js,用来存数据
数组和json循环:for(var i in arr/json){};

函数的返回值:
return 可以返回函数里面的数字,字符串等,一次只能返回一种类型的值
函数传参 arguments(可变参/不定参)
函数求和:
function sum(){
  var result = 0;
  for(var i=0;i<arguments.length;i++){
    result += arguments[i];
  }
  return result;
}
sum(2,4,5,7,24,756,34); ---》括号里可以放N个数

取非行间样式:
当样式写在行间时,可以直接通过oDiv.style.xxx来取
非行间样式通过oDiv.currentStyle.xxx来取(IE),但是存在兼容问题
getComputedStyle(oDiv,第二个参数随便放null/false).width
简单兼容处理
if(oDiv.currentStyle){
  oDiv.currentStyle.xxx
}else{
  getComputedStyle(oDiv,第二个参数随便放null/false).width
}

function getStyle(obj,attr,value){
  if(!value){
    if(obj.currentStyle){
      return obj.currentStyle(attr)
    }else{
      obj.getComputedStyle(attr,false)
    }
  }else{
    obj.style[attr]=value
  }
}

css中的样式
复合样式如:background,border
要去复合样式则用具体的如backgroundColor,borderCorlor
单一样式如:width,height

数组基础:

var a = new Array(1,2,3)或者 var a = [1,2,3]

数组中的length既可以读取,也可以写入,如length=0则让数组清空了

数组尾部添加push() -->往数组后面添加
数组尾部删除pop() -->删除数组最后一个数

数组头部添加unshift()
数组头部删除shift()

数组删除 splice(起点,长度)
arr.splice(2,3) --->从第二个元素开始算,三个元素被删除
arr.splice(2,3,a,d,e) --->从第二个元素开始算,三个元素被删除,然后在添加ade

数组连接concat() ---> a.concat(b) a,b为两个数组
数组拼接join() ---> a.join(‘-‘) a为一个数组
数组排序sort() 首位开始从小到大排序(a,b,c,d,.....;12,2,34,9,...)
sort() 只认识字符串 ,其有一个function参数;

sort(function(n1,n2){
  if(n1<n2){return -1};
  else if(n1>n2){retuan 1};
  else {return 0};

  或者return n1-n2;
})

定时器:
setInterval() 定时器
setTimeout() 延时器

clearInterval(name) 关闭定时器
clearTimeout(name) 关闭延时器

日期时间
var oDate = new Date();
oDate.getHour s() //获取小时

charAt()和[]的功能是一样的

DOM基础:

FF 支持率99%
IE IE6-8 10%
Chrome 60%

子节点 childNodes(文本节点+元素节点) 空行或者换行也算节点 在IE6-8中没有问题
nodeType 节点类型
nodeType --->3 文本节点
nodeType --->1 元素节点

children 元素节点 只算第一层节点,所以子节点中还有节点不算

父节点 parentNode(文本节点)

offsetParent 获取到相对定位的那个父级

firstChild 低版本IE版本支持
有兼容问题 firstElementChild 其他版本浏览器支持,同下
lastChild/lastElementChild

nextSibling/nextElementSibling
previousSibling/prviousElementSibling

元素属性操作方法有三种
1、.方法 任何出现.的地方都可以用[]代替
2、[]的方案
3、setAttribute(名称,值) getAttribute(名称) removeAttribute(值)

createElement document.createElement(‘li‘)

appendChild 插入元素,元素被添加最后 ul.appendChild(子节点)
先把元素从原有的父级中删除然后在插入到新的父级
insertBefore 插入元素,ul.insertBefore(子节点,在谁之前)

removeChild 删除元素 ul.removeChild(子节点)

文档碎片 1、创建文档碎片 document.createDouementFragment();
2、将创建的元素放入在文档碎片中
3、将文档碎片插入到元素中

表格应用
可以通过tBodies/tHead/tFoot/rows/cells获取表格的tBody,tHead,tFoot, 行,列
搜索:
忽略大小写-------toLowerCase()
模糊搜索 -------search 让搜索的内容不为-1即可
var str = ‘abcdef‘; str.search(‘a‘)返回位置下标值,找不到返回-1
多关键字搜索
split()将字符串切成数组

排序:
原理:将要排序的内容的值放入一个素组中,然后用sort()进行排序,最后利用 appendChild()方式插入原有序列中去

表单应用
向服务器提交数据,表单中的name很重要,后台通过name来查找
事件:onsubmit 提交时发生
onreset 重置时发生

JS运动基础
定时器的运用

定时器每次运行开始前最好先关闭定时器,保证只有一个定时器在运行
停止定时器和开始运动分开,用if/else分开
透明度
filter:alpha(opacity:30);opacity:0.3

写缓冲运动时一定要对速度取整

多物体运动框架
多物体开多个定时器;
所有东西不能共用

event对象
document代表整个网页,
event.clientX/event.clientX 鼠标点击的横纵坐标位置,火狐不兼容
滚动事件
window.onscroll = function(){}
窗口变化事件
window.onresize = function(){}

事件流
阻止事件冒泡 e.cancelBubble=true

鼠标事件
经验:但凡用到clientX和clientY就一定要加上scrollLeft,scrollTop;

键盘事件
keyCode 键盘码表
altKey/shiftKey/ctrlKey
ctrl+回车----发送消息 if(e.keyCode == 13 && e.ctrlKey){....}
onkeydown/onkeyup
默认行为
oncontextmenu 右键菜单事件
document.oncontextmenu = function(){return false} --->右键菜单消失

事件绑定
IE方式 attachEvent(事件名称,函数)
div.attachEvent(‘onclick‘,function(){......})

chrome/FF方式 addEventListener(事件名称,函数,false/true)
div.addEventListener(‘click‘,function(){......},false)

解除事件绑定
IE方式 detachEvent(事件名称,函数)
chrome/FF方式 removeEventListener(事件名称,函数,false/true)

禁止文字选中
return false chrome/FF
obj.setCapture() IE专用

事件捕获 将网页中所有的事件集中在某个元素中去
setCapture()

解除事件捕获
obj.releaseCapture() IE专用

对象:好比一个黑盒子,不了解内部结构,但是知道表面的各种操作
面向对象(OO):不了解内部原理的情况下会使用其功能

面向对象特性:
用对象的人和写对象的人
1、抽象:(抽)--》将对象中里面最核心的特性抽出来处理,抓住核心问题
2、封装: 不考虑内部实现,只考虑功能使用(看不到里面的东西,用好表面的功能)
3、继承(遗传): 已有对象上,继承出新对象(从从父类上继承出一些方法和属性,子类又 有一些自己的特性)

多重继承:继承多个父类的方法和属性
多态:js不常用

对象的组成:
方法:---函数:过程,动态的
属性:---变量:状态,静态的

this: 当前事件发生的对象
当前的方法属于谁,this就属于谁

不能在系统对象中随意附加方法、属性,否则会覆盖已有的方法和属性
object对象
Object对象上没有属性和方法,可以在其上面加功能实现面向对象

工厂方式(原材料,加工,出厂)
问题:没有new
函数重复-->资源浪费

原型prototype:
css class--->一次给一组元素加样式
行间样式--->一次给一个元素加样式

原型就和class一样的概念

类,对象
类:(模子)
对象:(成品)
如: var arr = new Array(1,1,3,4,5,4)
Array ---->类
arr ------>对象

总结:用构造函数加属性,用原型加方法

用json实现面向对象(单体),,简单,但是不适合多个对象

命名空间:可以让相同名字的函数同时存在,用json实现

将面向过程的函数改为面向对象
//面向过程的程序改写成面向对象程序不能有函数嵌套
//将window.onload初始化整个程序改为构造函数初始化整个对象
//将面向过程中的变量改为属性
//将面向过程中的函数改为方法

继承:
call()

系统对象:
本地对象:(非静态对象)Array,Object,Function,Number.....,需要new一下
内置对象:(静态对象) Math,Global 无需new出来,直接用
宿主对象:由浏览器提供的对象 DOM BOM

BOM
打开窗口 window.open(‘http://www.baidu.com‘,‘_self‘);
第二参数是打开的方式
window.open(‘about:blank‘); 打开一个空白页面
关闭窗口 window.close(‘http://www.baidu.com‘);
document.write(‘abc‘) --->先清空,在写入内容

常用属性
window.navigator.userAgent 当前浏览器版本
window.location 当前网页的地址
window.location = ‘www.baidu.com‘ 也可以用来赋值,跳转新页面

尺寸/距离
document.documentElentment.clientWidth 可视区宽度

document.documentElentment.scrollTop 页面上下滚动的距离
document.body.clientWidth

系统对话框
选择框:confirm("提问的内容"),返回boolean
输入框:prompt(),返回字符串或者null

COOKIE:页面用来保存信息的
特性:同一套网站(同一个域名)只有一套cookie
数量(<50条数据),大小有限(4k-10k)
过期时间

document.cookie;
数据格式为 属性=属性值
cookie不会被覆盖,写两条就显示两条

正则表达式(一套规则):强大的字符串匹配工具
search()
substring()
charAt() 返回字符串的某位
split()

match() 把所有匹配的内容提取出来
replace() 替换

[] 或
^ 除了,排除
出去html标签的正则 re = /<[^<>]+>/g
{n} 正好出现n次
{n,m} 最少n次,最多m次
{n,} 最少n次,最多不限次
? 表示{0,1}
* 表示{0,}

时间: 2024-10-28 21:26:07

JavaScript零散笔记的相关文章

Javascript读书笔记:函数定义和函数调用

定义函数 使用function关键字来定义函数,分为两种形式: 声明式函数定义: function add(m,n) { alert(m+n); } 这种方式等同于构造一个Function类的实例的方式: var add = new Function("m", "n", "alert(m+n);"); Function类构造方法的最后一个参数为函数体:"alert(m+n);",前面的都是函数的形参,参数必须是字符串形式的:&

Javascript 学习笔记 2: 标识语句

可以在任何语句声明之前使用唯一标识(identifier)和冒号(:)用来标记该语句: identifier: statement 这样,你可以在程序的任何其他地方通过标识来使用这个语句.即使在语句内部也可以使用该语句的标识(例如:循环语句和条件语句).当在一个循环语句前添加一个标识,你可以在语句内部通过break 标识来退出当前循环,也可以通过continue标识来继续执行该语句.例如: mainloop: while(token != null) { // Code omitted... c

javascript学习笔记---ECMAScript-判断变量类型

判断类型之前,先要清楚有哪些类型. (理理思路:程序由数据和方法构成,数据由简单数据和复杂数据构成) 即类型有: 数据(简单数据:boolean,string,num,undefined,null.复杂数据:object), 方法(function) 万能的typeof,神一样的方法 typeof(1);// num typeof("hello");// string   typeof(false);// boolean var vFlag; typeof(vFlag);// unde

【Thinking In Java零散笔记】对于持有对象一章中的显示系统环境变量代码分析

今天仍旧进行着学习java的计划.在学习到持有对象一章中,看到了如下代码: 1 import java.util.*; 2 3 public class EnvironmentVariables { 4 public static void main(String[] args) { 5 for(Map.Entry entry: System.getenv().entrySet()) { 6 System.out.println(entry.getKey() + ": " + 7 en

javascript进阶笔记(2)

js是一门函数式语言,因为js的强大威力依赖于是否将其作为函数式语言进行使用.在js中,我们通常要大量使用函数式编程风格.函数式编程专注于:少而精.通常无副作用.将函数作为程序代码的基础构件块. 在函数式编程中,有一种函数称为匿名函数,也就是没有名称的函数,是js中的一个非常重要的概念.通常匿名函数的使用情况是,创建一个供以后使用的函数.比如将匿名函数保存在一个变量里面,或将其作为一个对象方法,更有甚者将其作为一个回调等等之类的. //保存在变量中,通过fn去引用 var fn=function

javascript学习笔记---ECMAScript语法(引用类型)

引用类型通常叫做类(class). 本教程会讨论大量的 ECMAScript 预定义引用类型. 引用类型 引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象. 本教程会讨论大量的 ECMAScript 预定义引用类型. 从现在起,将重点讨论与已经讨论过的原始类型紧密相关的引用类型. 注意:从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现"类"这个词.ECMAScript 定义了"对象定

javascript学习笔记---ECMAScriptECMAScript 对象----定义类或对象

使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的类和对象. ECMAScript 拥有很多创建对象或类的方法. 原始的方式 因为对象的属性可以在对象创建后动态定义(后绑定),类似下面的代码: var oCar = new Object; oCar.color = "blue"; oCar.doors = 4; oCar.mpg = 25; oCar.showColor = function() { alert(this.color); };不过这里有一

Javascript 事件 笔记 1

HTML 事件处理程序: 缺点:html 和 js 耦合性太高 (如果改动方法名 那么就要改HTML 代码和JS代码 ) 优点: 兼容性强 1 <input type="button" id="btn1" value="btn1" onclick="alert(this.value)"> Dome 0 级事件处理程序: 把函数赋值给一个事件的属性. 简单,跨浏览器 1 var btn2 = document.get

javascript学习笔记---ECMAScriptECMAScript 对象----修改对象

通过使用 ECMAScript,不仅可以创建对象,还可以修改已有对象的行为. prototype 属性不仅可以定义构造函数的属性和方法,还可以为本地对象添加属性和方法. 创建新方法 通过已有的方法创建新方法Number.prototype.toHexString = function() { return this.toString(16); }; 在此环境中,关键字 this 指向 Number 的实例,因此可完全访问 Number 的所有方法.有了这段代码,可实现下面的操作: var iNu