javascript课堂笔记

最新推荐文章于 2022-09-12 23:52:10 发布

oooo1111100000

最新推荐文章于 2022-09-12 23:52:10 发布

阅读量248

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/pythonan/article/details/107064196

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

初

js区分大小写
字母数字下划线　~~数字开头~~
分号必写
/n换行
js浮点运算不精确
. 方法名逗号调用方法
双引号需在同一行，换行可以用+做字符串拼接
\n　源代码换行

<a href="javascript:alert("注意冒号")>点击这里弹出js窗口</a>　/耦合问题不推荐使用

数据类型

null　空object
undefind　衍生自null,未赋值变量
number　NaN　不是一个数字

类型转换

转为串

string 底层是　单个字符组成的数组
.charArt(索引)获取单个字符 .chaCodeArt(索引)获取编码
String.fromCharCode(0xU码) 将编码转成正常体　0x表示编码是１６进制
字符串.indexof("单个字符"，开始查找位置) 在串里找单个字符　返回索引第一次出现
lastindexof( ) 从后往前找
substring(参数1 参数2)slice( 参数1 参数2) 从小到大排序　　substring负值不可用
toUpperCase( ) 返回大写　　toLowCase( )返回小写

.toString() undefind null 报错　 不改变原数据

String() 包含toString() 增加了undefind null直接加" "转串

a=a.toString()

document.write(a)

运算符转串　和串运算都自动转串　　所以　+空串

转为数字

Number()数字型串转数字　普通串,undefind转NaN 空串,null为０布尔1或0

半数字型字符串取number, 非串先转成串 //不同浏览器对进制不同
parseint(对象,10 ) parsefloat( )　解析出串中第一段连续number //声明十进制

二元运算符转数字　只要参与和数字的运算除了加法都会自动转所以可以-0 /1 *1
一元运算符转数字　正号+放前面也可触发算术运算如 加法运算转数字可以　1+ +“a”
比较运算符也会自动转数字再比较　
本质上都是调用了Number()函数

转为布尔

Boolean()空串０NuN null undefind 为false
关系运算符转布尔　有非或与运算自动转布尔　　　所以**!!** 取非再取非

转为对象

数据类型.属性或方法时候　浏览器会自动对其进行封装　将其转为对象
new Number(数字) new String(字符串) new Boolean(布尔) 转成数字型串型对象
使用完了就自动销毁对象

运算

优先级

优先级可查询运算优先级表

isNaN()是否为NaN返回布尔

和NuN运算都是NaN（不是数字)

一元运算符typeof返回类型

除了有关字符串的相加，其他运算都会把非number转成number再运算

和字符串相加都会转串　　//变量不会如:console(“a是=”+有值的变量a)

关系运算符

非布尔先转为布尔型再关系运算
! 非运算　
&&　找false 　返回布尔为false的那个值　　
短路与　第一个false就不会读取第二个，第一个false就返回第一个值
第一个true, 就看第二个　返回第二个值
||　　找true 　返回布尔为true的原值
并列或　第一个true 返回第一个
第一个false，就看第二个　返回第二个值

比较运算符

==值相等　!=值不等　===值和类型相同　!==值或类型不等　返回布尔

非number比较　转为数字比较　返回布尔

null　undefind不会自动转
NaN不等于任何值　和NaN比较都是false
字符串比较首字母的Unicode码　　
其中数字型字符串也只会比较第一位　要手动转Number

条件运算符

ture? 执行１:２
转成布尔?１:２

Unicode使用

console("\uU码编码")      //可在Ｕ码编码表查询
<p>&#U码编码十进制</p>　//可用计算器转换进制

++a和a++

让a加１取新/旧

让旧a加１变新a
a++　取旧a
++a　取加１后的新a

NaN

与它运算都算NaN
与它比较都返回false
它不等于任何值　包括它本身
undefind==null　　undefind衍生自null
undefind转数字为NaN 　null为０

贰

循环

初始表达式　条件表达式　更新表达式

if(条件１**&&**条件２)
if(布尔多为true)
变量=prompt( )弹出字符串输入框　　放入循环中　　输错自动重置
swtich( ) case defalut 执行第一个与括号内容全等后面内容
swtich(true) 循环执行后面内容　　if　break 关闭循环
do{循环内容}while 先执行一次　然后while给出关闭条件
count=0循环内容count++ 循环计数器
console.time(“计时器名”) 　开始计时
　console.timeEnd( ) 　　计时器停

反向筛选

 变量=true
 遍历　不需要的值后　　　变量=false
 if(变量)　　输出　　　　　　//if变量　默认true

叁

对象object

属性的无序集合，每个属性都是一个名／值对
对象可以创建属性　　也可以从原型继承属性　原型对象自动生成
对象保存在栈内存　　变量=对象　变量保存的是地址　变量＝对象变量　也指地址
除了基本数据类型　　其他都是对象
自带constructor属性　　指当前对象的构造函数
没有被使用的对象　内存自动回收

创建

var 对象名=new object( )
var 对象名{ 属性:属性值 } 给"属性"加引号适合任意不规范名称

添加或修改属性

对象名.属性名=属性值
对象[‘属性名’]=属性值可以操作　任意不规范属性名的情况

删除属性　　delete 对象名. 属性值
检查是否有属性　属性in对象返回布尔
输出属性的值　　对象**[属性]**　
查看所有属性　　for 任意变量 in 对象　　　输出变量

属性值可以是任意类型　包括对象
属性不存在　　返回undefined
对象.子对象.子对象属性

普通数据类型　栈内存　名－值
引用数据类型　栈内存　对象名－地址　　有new开辟堆内存

对象名赋值给变量　赋的是地址　地址相同可以操作堆内存　　null删除地址
不使用的对象设为null 触发自动回收垃圾

函数

函数也是对象　函数也可是函数的参数
函数调用才执行
单纯以函数形式调用时候　　this永远是window
function和var声明都提前　函数整个提前　
变量赋值部分不提前　 new构造函数声明不提前
在函数中声明也会提前
函数通过new函数名调用的是构造函数　　首字母大写
原型函数对象自动生成　相同地址的函数都可访问原型的属性
访问原型函数　　　 只有函数对象有prototype属性
调用函数名是把＝等于号后面的复制到调用函数名处　　　
调用函数名(　)是先计算函数得出返回值　然后使用这个值在函数名处
构造函数.prototype
Object.getPrototypeOf(对象)
对象._proto_
对象.constructor.prototype

函数创建

var 函数对象名=new function( “任意字符串转成执行内容”) 字符串直接转
构造函数　　函数首字母大写
function 函数对象名(参数){ }
超链接点击默认跳转　　　javascript:; 或　函数返回return false

function(参数){ } 匿名函数　　　可以赋值给变量　　
立即执行用完销毁　　　(function(){ })( )

形参＝在函数里声明变量
参数可以是任意类型　　解析时不检测　参数的数量和类型
参数多了无效少了会有undefinted 因为不检测所以要考虑类型不符
return返回任意类型　并退出函数
参数可以是对象和函数对象　　　函数对象名（）传的是返回值

var声明变量　表示window对象的属性　
function声明函数　表示window对象的特殊属性即方法

var声明变量和函数优先被浏览器解析　函数是整个　变量声明优先赋值不优先
使用未声明变量　　本域没有　最近的上一级域没有　window. 变量全局变量
函数参数没var声明　默认是本函数域　　　函数域调用函数一次性使用

调用函数默认传入this　参数对象　表示函数上级元素
调用函数　　函数（）＝window. 函数（）　　this是window
调用函数　　上级对象名.函数　　this是这个对象
函数名.call(指定this 　实参)　
函数名.apply(指定this [实参])　　设置this　顺便传递实参　传递格式不同
调用函数默认传入arguments　参数对象　　封装实参
arguments[0]＝实参添加实参　　　没形参也可以添加
arguments.length实参数量
arguments.callee 返回当前整个函数

对象instanceof 构造函数对象是否是构造函数的实例　返回布尔
所有对象instanceof Object都为true 　　所有对象都是Object的实例

原型对象相当于公共默认库　　不自定义就默认创建函数自动创建原型函数　prototype属性指向原型
调用构造函数__proto__属性指向原型 函数名.prototype.属性名.属性值为原型对象添加属性

属性in对象属性是否在实例或原型　返回布尔
对象.hasOwnPrototype("属性") 是否在实例　返回布尔　
in判断是否有此属性　hasOwnPrototype判断是否在实例　false不在实例　则必在原型　
对象__proto__.__proto__是object 对象的原型的原型是object

数组

数据是对象　　优点是存储性能
数组用于有顺序关系的值

new数组对象（数组长度如：１０）　　长度为 10 　一个为长度　多个为元素
数组名=[元素]常用　创建
push(元素)添加元素　返回长度
unshift(元素)删除尾部　返回删除的元素
splice(开头元素　删除数量　开头元素前的新元素)删除或替换或添加　返回删除的数组
数组1.concat(数组２，新元素)合并数组或元素　返回新数组
数组.join(连接符) 转为连接符连接的字符串

splice(“分隔符”)将串转为数组

数组.reverse( )反转原数组
数组.sort( ) 根据U码从小到大排序
.isArray( )是否为数组　　返回布尔

 数组.sort(function( ){
  return如为正数}     　　　　　　　　　//     正数　从大到小排序

索引不连续　跳过的显示为空　默认逗号分隔
修改length 　可删除尾部多出的位数
数组名[数组名.length]　尾部添加新元素　－－　索引０始 length比索引少１　[索引]

日期对象

Date对象用来表示一个时间
new Date( ) 创建　　　不传参数默认创建当前时间
可传递毫秒数或时间格式的字符串参数

new Date(01日1月1111年　1时:1分:1秒) 　自定义格式
日期对象.getDate( )　返回日　　
getMonth( ) 月
getTime( ) 时间戳　　毫秒数
Date.now( )当前时间戳　　当前时间戳一直在变换　　可用来计时

Math对象

工具类对象　自带的不用创建
Mate.PI 圆周率　　　
Math.abs(数)　返回绝对值
Math.ceil(数)　向上取整　floor向下　　round四舍五入　　返回操作后的数
random( ) 生成０－１的随机数
.max( 值１　值２　值３)　　取最大值

闭包对象

用函数的局部作用域封装可以重复使用的内容
Boolean
Number
String
var str = new String(“任意字符串”)

使用基本类型的闭包可以让基本类型可以使用属性

正则表达式

var 变量名=/正则表达式/匹配模式创建　赋值变量　灵活　模式i忽略大小写　g全局匹配
var=new RegExp(“正则表达式　匹配模式”) 字符串

变量=RegExp("字符串")　检查变量里是否有此字符串
test( ) 检查字符串是否符合正则　返回布尔

a|b找a或b　　　`[a-z]`找全部小写　 `[A-z]`找任意字母　

a[bcd]c 找abc acc adc 　 [^ba]找除了a,b以外的　　　[^1-9]找除了数字
(an){3} 找an连续出现三次　ab{1,3}c 出现1个2个3个b
ab{3, }c 出现3次b以上　　　ab+c至少一个b
后面加*有多少匹配多少　　　加?匹配一个
^a　开头ａ　a$结尾ａ　　两个都用代表完全符合正则
.表示任意字符　　　　\转义字符
\w任意字母或数字
\d任意数字
\s　空格
单词后\b　　单词后是空格

字符串.repace(/^\s*|\s*$/g," ") 　　去空格
　将前面或后面任意数量空格换为啥都没　　完全符合　全局匹配

伍

Dom

网页Document object modern 　
网页中一切元素都是对象是节点Node　空格回车也是节点Node
节点　　文本节点　　元素节点　　属性节点　　　文档节点
nodeName ＃test 标签名　　　属性名　　　＃document
nodeType 3 1 2 9
nodeValue 文本　　　　null 属性　　　　　null

window的属性document文档节点是入口
document.getElementById 　　　或者是指定父元素范围内找
getElementByTagName　　返回数组　　元素是键值对　　　
getElementByName　　　　返回数组　　元素是键值对
document.body 返回　　body里面元素
document.documentElement 返回页面元素
document.all 返回元素个数　　
等于　　document.getElementsByTagName(*) ie9
等于　 document.getElementsClassName(" ") ie9
document.querySelector("CSS选择器")　返回唯一一个或第一个
document.querySeletorAll(" ") 返回数组
document.createElement(“标签”) 　创建节点　返回新标签
document.createTextNode(“文本”) 　创建文本节点　　返回新文本
remove 删除　　　replace　替换
父节点.append(“子节点字符串”) 添加子节点　　可以是标签
父节点.insertBefore(“新节点，子节点”) 子节点前插入新节点
节点.parentsNode.insertBefore( ) 　获取父节点

元素名.innerHTML 　获取内部代码　
　元素名.innerHTML=“修改后的代码” 　可以带标签　　　修改内部代码　
　自结束标签没有内部代码　　　有value属性可以用
　innerText
元素名.classname 元素的属性名
.clinetHeight 返回数字　内容区＋内边距
.offsetHeight 返回数字　边框　内容区　内边距
.offsetParent 最近的上一级定位　　没有为body
.dffsetTop 定位的top 　　
.ScrollWidth 　滚的宽
.ScrollLeft 水平滚动条移动量
.clientX 事件被触发时　相对于浏览器窗口　鼠标指针ｘ轴参数　　返回数字
.PageX 相对于整个页面　　返回数字

ScrollWidth-ScrollLeft==clientWidth 　到底了

对象.样式名返回样式值　　没有值长度返回当前页面窗口的长度px 随窗口变化ie旧
元素.style.属性=新值　　修改style 带－的属性修改为驼峰　　ｊｓ认为是减号
改后为内联样式
元素.currendStyle.属性　查看当前生效的style 没有设置获得默认值　　如auto
只有ｉｅ支持　　　　　只读不可改
windows.getComputedStyle(要获取样式的主体　null) 查看当前样式
后参数原来设置为元素　常为null　　返回对象　　　只读不可改
ｉｅ不支持

事件

元素.事件＝”执行内容" 　耦合　不用

事件响应函数会自动传一个参数event封装事件动作　　当作对象来用　 event.clienX
返回数字　　相对于视窗Ｘ方向指针　　　 ie8不会自动传event
使用window.event方法　　window.event.clientX

元素.事件＝function( ){
执行内容　}　　　　　　　　　　　　　//事件响应函数

.addEventlistener(“事件没on”,function(){ },false) true捕获阶段就执行 ie旧版
旧版用attachEvent(“事件有on”,function(){ })　　添加事件绑定
事件响应函数其实分两步执行完　　触发前和触发后

window.onload 　页面加载完触发
.onscroll 滚动时触发
.onmousemove鼠标指针进入元素触发
confirm( ) 类似 alert( ) 　　有取消　返回布尔

从外到内捕获(读取不执行)－找到元素后不会继续向内－从内向外冒泡(执行)

event.cancelBubbl取消冒泡

BOM

浏览器对象模型　
通过各种对象及对象的方法　访问浏览器功能，控制浏览器行为
window对象　　所有全局作用域中声明的变量　对象　函数对象　都是它的属性和方法

窗口

整个网页大小　innerWidth 浏览器视窗大小　　　outerWidth
打开窗口　　新标签
window.open(~~URL,name,specs,replace~~ )
URL 没有则打开空白窗口
name _blank 新窗口默认名字　name 自定义名字　 _self　替换当前页面名字　
specs 项目列表　逗号分隔
replace 是否保留当前历史记录　
true跳转替换当前页面记录　false跳转保留当前页面记录

执行时间控制

等一段时间后执行

setTimeout(函数或需控制的代码段　数字　~~函数参数ie~~ 　）　
数字默认单位毫秒
都在全局作用域中执行
clearTimeout( )取消控制

循环执行且每次执行前都等一段时间

setInterval(执行的代码　数字 )
clearInterval( )取消控制

系统对话框

alert( )
comfirm( )有取消按钮　返回布尔
prompt(显示文字，框内默认文字 )有输入框

外观有操作系统或浏览器设置决定　不是Css
显示系统对话框会导致程序终止　　关闭后恢复

location对象

href= 属性 assign( )　replace( ) 　跳转页面
assign地址错误返回参数　　　 replace无历史记录
reload( ) 强制刷新页面

history对象

浏览器窗口打开时开始记录
go( )在历史记录中任意跳转　 back( ) 向后　　forward( )向前
navigator.userAgent检查浏览器版本

document对象

window.document 　是window对象的属性

DOM

对整个HTML页面　WEB页面　　网页文档进行操作
改变大小　内容　增删会重新渲染　　　　　改变样式会重绘

文本节点

HTML标签以外的内容
常是元素节点的子节点　　因为内容一般在标签内　　一般也是通过父元素节点获取

属性节点
是元素节点的一部分　　一般不用　　可以通过对应的元素节点获取

节点获取

元素节点 document. 可省略 getElementById( ) getElementsByTagName(
) getElementsByName( )　 ByName在ie只能在form使用
元素节点的子节点　任意节点为父元素节点. .childNodes
所有子节点　　.firstChild第一个子节点　.lastChild最后一个子节点
节点的父节点和兄弟节点　　任意节点
.parentNode父节点　.previousSibling前一个兄弟节点　　.nextSibling后一个兄弟节点
css选择器法获取
querySelector(css选择器“字符串” style标签中的选择器)

节点操作

创建
document.createElementt(新标签名 )
删除
父节点.removeChild(子节点)
替换
父节点.replaceChild(新节点，旧节点)
插入
父节点.appendChild(子节点) 　
父节点.insertBefore(新节点，旧节点)

通过element对象　　　只能操作对象

节点.element.appendChild( ) 　添加子元素到尾部
节点.element.childNodes 　返回子节点的NodeList
节点.element.className 返回class属性
节点.element.hasAttribute( )　是否有此属性　返回布尔
节点.element.innerHTML 　设置或返回内容
节点.element.removeChild( ) 移除子节点
节点.element.replaceChild( )　替换子节点
节点.element.setAttribute( )　　设置或修改属性

其他操作方法

.nodeValue 获取和设置文本内容
.innerHTML 获取和设置内部代码　可以带标签
元素.offsetParennt获取当前元素父元素

属性操作

function getStyle(obj,name){

if(window.getComputedStyle){ 　 return getComutedStyle(obj,null)[name]; 　 }else{ 　
　 return obj.ourrentStyle[name]; 　}

元素.style.样式名通过此法设置和读取的都是内联样式　　　　只读
元素.currentStyle.样式名读取当前元素正在显示的样式仅仅IＥ支持
getComputedStyle(元素，null )此法是 window的方法其他浏览器　只读

事件

委派和冒泡做增加表列自动带属性的格式表　给父元素加格式

event.cancelBubble=true取消冒泡
event.target.className触发事件的对象class名

事件１

if(info.scrollHeight - info.scrollTop == info.clientHeight)
//滚动到底

事件２

元素.事件=function(event){　　　//event默认值指事件触发这个动作　是个对象
event = event || window.event;　//解决兼容

事件３

var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft||document.documentElement.scrollLeft;
//滚动条距离获取　解决兼容

事件３

//事件绑定多个响应
function bind(obj , eventStr , callback){
				if(obj.addEventListener){
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr , callback , false);
				}else{
					/*
					 * this是谁由调用方式决定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on"+eventStr , function(){
						//在匿名函数中调用回调函数
						callback.call(obj);