前端入门学习-JavaScript

以下是本人初学javascript时笔记，不足之处，多指教

1 javascript使用

<script >  代码  </script>

<script src = “js文件路径” ></script>

2种方式不能混合使用

2 输出结果的方式

alert (   )   警告框

document. write(   )  页面输出

3 使用变量

var  变量名  = 值;

var 变量名1,  变量名2 ;

开头：字母  _ $ 其余: 字母  _ $  数字

     不能使用关键字和保留字

     尽量见名知意

     骆驼命名法  userName   匈牙利  strUserName;

4 数据类型：string，number，boolean，null，undefined，object前5个是基本数据类型

1）数字   NaN （isNaN()  Number.isNaN() ） 无穷大  

2) 字符串  \”

3) 布尔  true     false

4）undefined   变量声明但是未赋值

5） null   typeof null  返回 object

6）object  数字 字符串  日期 数学  new Object();

5 运算符

1） 算术运算符   + - * / %( 取模)  ++ -- （前缀和后缀）

2） 赋值运算符  =  += -= *= /=  %=

变量名  =  表达式;

3) 关系运算符  > 、>=、 <、 <=、 ==、 ===、 !=、  !==

     ==  和 === 区别

4)  逻辑运算符

      && 与 || 或   ! 非

5) typeof  返回某个变量或者值的数据类型

  typeof  变量名

条件结构

1 逻辑运算符

&& 与   exp1为false,直接返回exp1

         exp1 为true，返回exp2

||  或   exp1为true，直接返回exp1

         exp2 为false, 返回exp2

!  非

2 if条件结构

if( 条件){

条件成立，执行语句块

}

 

if(条件){

条件成立，执行语句块

}else{

条件不成立，执行语句块

}

if(条件1){

条件1成立，执行的语句块

}else if(条件2){

条件1不成立，但条件2成立，执行的语句块

}else{

条件都不成立，执行的语句块

}

if(条件1){

if(条件2){

条件1成立，并且条件2也成立，执行语句块

}else{

条件1成立，但条件2不成立，执行语句块

}

}else{

条件1不成立，执行语句块

}

1） if括号中的表达式应该返回boolean值

2） else 一定要有if配对，不能单独使用

3） else紧跟if结束，中间不能有其他任何语句

4） else 不能直接跟条件，如果有条件必须使用if

3 switch

switch( 表达式){

case 值1:

匹配后要执行语句块;

break;

case 值1:

匹配后要执行语句块;

break;

default:

        都不匹配要执行的语句块

break;

}

1） switch括号中表达式可以是任何类型，但是case后的值类型要匹配。

2） case 后的值可以是一个表达式（不建议）

3） 如果多个值完成同一个操作，每个值都要有前有case，后有冒号

4 条件运算符

 Exp1  ?  Exp2 : Exp3    Exp1 为true返回Exp2 否则返回Exp3

函数

1定义函数的语法

function  函数名 ( 参数列表 ) {  函数体操作 }

1） 函数名的规范和变量一样

2） 参数列表，只有名字，如果多个参数用 , 分割

如果没有参数，括号不能省略

2调用函数

   通过  函数名字( ) 调用函数，跟参数个数无关 

3函数内的arguments（自带的）  参数变量

   参数的个数： arguments.length

   某一个参数值:  arguments[ 索引 ] 起始0

4函数的返回值

  return  表达式;

1） 如果没有return语句，则系统默认返回undefined

2） 如果只有return; 则默认返回undefined

5形参和实参

形参  定义函数时的参数

实参  调用函数时的参数

关系： 在调用函数是，把实参的值赋给形参

6事件

Js通过事件触发函数的调用

浏览器会监听这个页面的各种不同的事件，如果该事件有具体的调用函数，则该事件触发时调用该函数。

onclick  单击事件

ondblclick  双击事件

onmousedown  鼠标按下事件

onmouseup  鼠标抬起事件

onfocus 获得焦点（光标）事件

onblur  失去焦点事件

onkeydown  键盘按下事件

循环结构

1 循环要素

初始值 ；循环条件；变化

 

2 while

初始值;

while( 循环条件){

变化；

}

3 do-while

初始值;

do{

变化;

}while( 循环条件);

4 for

   for( 初始值 ; 循环条件  ; 变化  ){

}

for中结构表达式可以省略，但分号不能省略

for(;;){  }（建议不要完整的写法）

for中如果循环条件省略，默认永远为true

while\for 都是先判断，后执行，次数0~n

do-while 先执行，后判断，次数1~n

5 break与 continue

break 跳出所在的循环块，不在继续

continue 跳出所在本次循环块，继续下一次循环判断

break\continue在循环中要和if结合使用

6 嵌套循环

循环流程：

    内循环全部循环完毕，外循环执行一次

数组

1 创建数组

var arr =new Array(  容量/ 元素 );

var arr= [];

2 属性  length  （可读可写）

3 遍历数组

1)  for（ var  i=0;  i< arr.length; i++ ）{}

2) for （ var  i  in  arr） {   i数组索引号  }

3)  数组名. forEach( function( elemt, index ) {

elemt 元素  index 索引号

4 常用方法

逆序  reverse()

删除并添加  splice( 索引号,  个数，添加的元素)

尾部添加元素  push ( 元素)

尾部删除元素  pop()

头部添加元素  unshift( 元素)

头部删除  shift()

以上方法都会改变数组内容

concat （元素/数组） 返回合并后的数组

slice（ start,  end ）返回start开始到end之前

jion ( 连接符 )  返回字符串，每个元素用连接符连接

indexOf( 元素, 索引号 ) 从索引号开始向后检索，返回找到的索引号，没找到返回-1

lastIndexOf(  元素, 索引号) 从索引号开始向前检索，返回找到的索引号，没找到返回-1

5 排序

sort()   默认按字符串从小到大排序

sort( function( n1,n2  ) {

//return 1 则n1和n2需要交换位置

}  );

冒泡排序：临近2个元素比较

for(  var j=0; j< N-1; j++  ){

for(var i=0;  i< N-1-j; i++){

if( arr[i]   arr[i+1] )

}

}

选择排序：某个位置和后面的每一个比较

for  ( var j=0; j<N-1; j++ ){

for( var i=j+1; i<N;i++  ){

if( arr[j]   arr[i] )

}

}

字符串

1 字符串的创建

var  str = “      ”; //字面量

var str = new String();  //  “” 创建对象

var str = new String(“abc”);// “abc”

这两种创建字符串的方式区别

字面量：没有的话创建，取地址赋值；有的话，直接取地址赋值

创建对象：无论有没有，都再次创建对象，取地址赋值（比较字符串相等需要注意）

2 字符串的遍历

str.charAt( index)  返回index索引的字符串

str.charCodeAt(index) 返回index索引的字符串编码

str[index]  存在兼容问题

String.fromCharCode ( num1,num2,num3) 返回编码对应的字符串

3 字符串的检索（查找）

indexOf( str, start ) 从start向后找str的索引，没有返回-1

lastIndexOf( str, start ) 从start向前找str的索引，没有返回-1

search( str ) 从头找str的索引，没有返回-1 （str正则表达式）

match( str ) 返回所有匹配字符串构成的数组

4 字符串的截取

substring( start , end) 从start索引到end索引之前 （start <end）; 从end索引到start索引之前( start > end)

substr( start , count) 从start索引开始，截取count个（count>=0）

slice(start ,end)  从start到end前 （start位置 < end位置）

5 其他方法

replace( old , new) 将字符串中的old替换为new

如果没有正则表达式，则只替换第一次出现的old

split ( str,  length) 返回用str分割字符串后的数组，length设定返回数组长度

localCompare( s2 ) 返回数字 -1  前小  0 一样 1 前大

toLowerCase()  返回全部小写字符串

toUpperCase() 返回全部大写字符串

6 属性 length  字符串的长度（只读）

（上面的方法不会改变字符串本身）

 

Math与Date

1 Math 属性和方法

属性： Math.PI

方法： abs(x)  pow(x,y) floor(X) ceil(x) round(x) random()

       min(a,b,c,d....)  max(a,b,c,d...) sqrt(x)

2 Date

1）创建四种

new Date()  系统时间

new Date(  毫秒数 )  1970-1-1 本地时间开始过了毫秒数的时间

new Date( “ 时间格式” ) 创建字符串的时间

new Date(  yyyy, mm, dd, hh, mi,ss) month 0开始

2） 时间可以减法

时间1 – 时间2 获取两个时间的毫秒差

3）各个时间部分的获取

getFullYear()   getMonth() 0~11  getDate() 1~31

getHours()     getMinutes()  getSeconds()  

getDay() 0~6     getTime() 毫秒差

getUTCXXXX()

4) 各个时间部分的设置

setXXX(x)  x可以任意整数

3 延迟定时器

var 定时器名 =  setTimeout( 函数名,  延迟时间 );

clearTimeout (定时器名)

延迟多少毫秒后，执行函数（只会执行一次）

4 间隔定时器

var 定时器名 = setInterval( 函数名,  间隔时间 );

clearInterval( 定时器名 );

每个多少毫秒，执行函数 （反复执行多次）

5 获取某个标签

document.getElementById( “id值 ”)

标签设置内容

变量. innerHTML =””

标签设置行内样式

变量. style. 属性值

标签添加事件

变量. 事件属性 = function() { };

变量. 事件属性 = 函数名;

页面加载后执行操作

window.onload = function(){};

 

BOM

顶层对象 window

属性

1)location 地址栏对象

  location.href  http://

  location.search  请求参数 ?....

  location.assign( url ) 跳转url历史记录增加一条

  location.replace(url) 跳转url。历史记录不增加

2) history 历史记录对象

   history.back()  回退   history.forward()  前进

  history.go( num )  num>0 前进几个  num<0 回退几个 

3) navigator 浏览器对象

   navigator.userAgent  返回浏览器信息

   navigator.appName 返回浏览器名  除了IE返回都是网景

4) screen 屏幕信息  screen.width  screen.height

  screenX  screenLeft   窗口距屏幕的左边距

  screenY  screenTop   窗口距屏幕的上边距

5) window.innerHeight  window.innerWidth 可视区域的高度和宽度

  window.outerHeight  window.outerWidth  窗口的高度和宽度（以上低版本 不兼容，每个浏览器获取的值也不一样）

document.documentElement.clientHeight

document.documentElement.clientWidth  可视区域的高度和宽度

6）滚动属性

document.documentElement.scrollTop || document.body.scrollTop  滚动高度（上面出去多少）

document.documentElement.scrollLeft || document.body.scrollLeft  滚动宽度( 左边出去了多少)

弹框

1）alert( str)  警告框 返回undefined

prompt( str, inputstr ) 输入框, 返回输入内容或null

confirm( str) 确认框  返回true或false

2） open ( “路径”,”窗口名”,”子窗口特性” ) 打开一个窗口

子窗口特性有兼容性问题

height=100,width=200,top=50,left=100 无兼容问题

close() 关闭当前窗口

火狐不允许关闭父窗体

window.opener 父窗体对象

事件

onload 加载事件  

onunload 关闭/重新加载（先onunload、 onload）

onscroll 滚动事件

onresize 窗口改变

DOM

1 节点类型

元素节点1

属性节点2

文本节点3

获得所有子节点 childNodes ( 高版本浏览器中的空文本节点的存在)

获取所有的子元素节点（标签）children （兼容问题）

2 获取元素节点的方法

（1）document.getElementById( “ id的值”) 获取一个

（2）元素. getElementsByTagName(“标签名”) 获取一组

标签名”*” 获取所有元素节点

（3）元素.getElementsByClassName（”class的值”） 获取一组

   有兼容问题，需要自己封装函数

3 操作属性的方法

1） 元素. 属性

2） 元素.getAttribute( “属性名”) 获取属性值

元素.setAttribute(“属性名”,”值”) 增加或修改属性

元素.removeAttribute(“属性名”) 删除属性

3）元素[“属性”]  （不可预知的问题）

4 元素的常用属性

1） 标签名 tagName

2） Id值  id

3） Class值  className

4） 内的文本  innerHTML

5） 标签内容（含本标签） outerHTML

6） 行内样式 style  样式对象

5 Offset相关属性

1) offsetParent 定位父元素

离自己最近的那个被定位的元素

特殊：<table><td><th> 本身就是定位元素

2) offsetTop  相对定位父元素的上边距

offsetLeft 相对定位父元素的左边距

3) offsetWidth  width+padding*2+border*2

offsetHeight  height+padding*2+border*2

4) clientWidth  width+padding*2

clientHeight  height+padding*2

6 节点访问

父节点  parentNode

子节点 childNode

子元素  children

哥哥节点previousSibling

哥哥元素previousElementSibling

弟弟节点nextSibling

弟弟元素nextElementSibling

祖先ownerDocument

第一个节点 firstChild

第一个元素  firstElementChild

最后节点 lastChild

最后元素  lastElementChild

7 节点操作

创建节点

document.createElement ( “标签名” )

追加节点

父元素.appendChile ( 子元素 )

插入节点

父元素. insertBefor(  新元素,  原有元素  )

删除节点

父元素. removeChild ( 原有元素 )

克隆节点

原有元素. cloneNode ( boolean )

Boolean = true 克隆该节点及所有子节点

Boolean=false  只克隆该节点的标签

事件进阶

1、 事件流的种类

1） 事件冒泡

onXXX 事件冒泡

元素. addEventListener（”事件”, function, false）

元素.attachEvent(“on事件”,function) 特殊：后添加的处理先执行

流程：从具体到非具体，从内到外

2） 事件捕获

元素. addEventListener（”事件”, function, true）

流程： 从非具体到具体，从外到内

3） DOM事件流流程3个阶段：

事件捕获 具体目标处理 事件冒泡

2 事件对象 event

function fun1(event){

event = event || window.event;

}

3 事件委托

让父元素完成子元素该完成的操作

利用：事件的冒泡，在父元素的事件中判断事件源

获取事件源  event.target || event.srcElement

4 事件的组合

元素.onXXX = function(){

//定义其他的事件处理程序

document.onnmousemove = function(){};

//删除事件处理程序的时间点

document. onmouseup = function(){

document.onnmousemove =null;

document. onmouseup =null;

};

}

事件类型  event.type

事件源    event.target  ||  event.srcElement

取消事件默认动作  

event.preventDefault()   event.returnValue = false;

在Dom1中，让函数返回 return false就是取消事件的默认动作

阻止事件冒泡  event.stopPropagation()

event.cancelBubble = true;

鼠标事件对象  event.clientX  event.clientY

键盘事件对象   event.keyCode ( 不同浏览器下onkeypress获取的keyCode不一致，不同浏览器下onkeydown都是大写字母的ASCII )

 

5 键盘的组合

特殊键盘判断   event.shiftkey ===true

event.ctrlkey ===true

event.altkey ===true

event.XXXkey ===true && event.keyCode == 值

6 键盘的默认动作取消：onkeydown事件去取消默认动作

Cookie

1 保存Cookie

  document.cookie = “格式字符串”;

name = value; expires= 日期字符串; path=路径

2、读取

   var str = document.cookie;

   str 第一次用 ;  分割，结果 若干个cookie键值对

   cookies[i]   第二次用 = 分割，结果 [0] 键 [1] 值

3 删除

  设置cookie有效时间为过去的某个时间即可

正则表达式

1 元字符

.   任意字符

\b  分隔符

\s  空白字符

\w  字母数字下划线

\d   数字

\B  不是分隔符

\S   不是空白符

\W   除了字母数字下划线

\D    不是数字

^   字符串的开始

$    字符串的结束

2 量词

?  0或1个

*0或n个

+ 1或n个

{n}  n个

{n,m} n到m个

{n,} n到任意个

3 包含 [ ] 如[1357][a-h][1357a-h]

不包含[^]  [^1357]

选择  |  1|3|5|7  cuihua|erya|gousheng

分组 ()  分组后可以捕获内容，$1~$9

RegExp.$1

4 贪婪： 默认匹配方式，找最长符合规则

懒惰： 量词后面？  匹配最短符合规则

5 str.search( reg)  返回索引号

str.match(reg)  返回数组

str.replace(reg, “ $1 ”)  返回替换后的字符串