初学javascript笔记整理 (上)

得到某人的启发，学习是一个输入的过程，但很多时候却忽略了输出的重要性。所谓输出 就是把自己学过的东西，通过整理 把它说出来教给别人或者写文章发博客、知乎、简书等等。这样做不仅可以把学过的知识吃透、牢记得更加深刻，而且也可以当作网络电子笔记，同时也可以提高 写作 技能，何乐而不为呢。

PS :  由于大多数语言都是相通的，很多基本的语法或者简单的知识就不再写出来。

一、 js的作用与用途

1.  js的作用：网页特效 、用户交互 、表单验证

js就是可以用来控制结构、样式和行为的一种脚本语言

 

那么js是怎么来控制结构和样式的呢？首先先找人，找准对象

document.getElementById(id)

document.getElementsByTagName(div)

2.  js的书写位置

js的书写位置很灵活，可以参照 CSS的位置来分类

行内式

内嵌式

 <script type=”text/javascript”>  </script>   可放在任何一个地方

外链式

<script type=”text/javascript” src=”xx.js”></script>  注意:这对标签之间不能写任何的东西

二、 三个输出语句

wondow.Alert()   弹出警示框  window 可以省略

Console.log() 控制台输出 普通语句

document.write();  文档打印输出

三、入口函数

window.onload = function(){ 

            内部放js

  }

这个函数的意思就是说，当我们页面加载完毕之后，采取执行函数体里面的js部分。 

所以，这句话也可以页面的顶端即可。

四、变量 var   使用时需要声明

变量根据其作用范围可分为全局变量和 局部变量

 全局变量:

  1. 在最外层声明的变量。

  2. 在函数体内部，但是没有声明var 的变量也是全局变量

变量与属性的关系

变量是自由的        属性是所属的，属于某个对象的  也可以给某个变量赋予属性

五、事件三要素

事件源   事件   事件处理程序

事件源.事件 = function(){  事件处理函数 }

常见事件:

事件名	说明
onclick	鼠标单击
ondblclick	鼠标双击
onkeyup	按下并释放键盘上的一个键时触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	获得焦点，表示文本框等获得鼠标光标。
onblur	失去焦点，表示文本框等失去鼠标光标。
onmouseover	鼠标悬停，即鼠标停留在图片等的上方
onmouseout	鼠标移出，即离开图片等所在的区域
onload	网页文档加载事件
onunload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单时

六、 函数 

 

1.内置对象

指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能

 

函数使用跟变量一样，需要声明

 

2.自定义函数

2.函数直接量声明

3.利用Function 关键字声明

变量声明提升：

在函数体内部，声明变量，会把该声明提升到函数体的最顶端。 只提升变量声明，不赋值。

3.argument 

 Javascript在创建函数的同时，会在函数内部创建一个arguments对象实例.
 arguments对象只有函数开始时才可用

 arguments.length;  返回的是  实参的个数。不是形参    
 但是这个对象有讲究，他只在正在使用的函数内使用。 
 arguments.callee;    

 返回的是正在执行的函数。 也是在函数体内使用。 在使用函数递归调用时推荐使用arguments.callee代替函数名本身

4.返回值 return

一个函数实际上就是一个计算过程，计算完成之后的结果就是返回值。
一个函数只能有一个返回值, 在函数内部用return来设置返回值,同时，终止代码的执行。

所有的自定义函数默认没有返回值；函数内Return 后面如果还有代码将不要换行

5.this

指向事件的调用者，函数的使用者 ，在函数内部使用

七、5个数据类型

1.  Number

数值的前面带  0  表示 八进制  

 Var num = 020;   

  0*80+2*81  = 16  

 数值的前面带  0x  表示 十六进制

  var result = 0xb;   11  

 转换为数值型:

  1. 利用 -  *  / 都可以转换

  2  利用Number( )  

 

ParseInt()    parseFloat()  

parseInt(值, 进制);

parseInt(110,2)

表示2进制   把110 这个2进制转换为 10进制   

0*20+1*21  + 1*22   =  6  

var a="15.15abc" , b='10.15' , c='10.0abc';

alert(parseInt(a)+Number(b)+parseFloat(c));

 

2.   String  

转换为 字符型      

    var num = 12345;
    1.num+ “”
    2.String(num);  

    3.num.toString()

String的一些常用方法：

charAt(index)  根据位置返回字符

indexOf(Stirng)  根据字符返回字符位置

charCodeAt(index)  返回所在位置的unicode编码

lastIndexOf(Sting)  从右边开始检索，返回字符位置，注意：是从左边数的index

concat()   连接字符串

split(separator,howmany)  把一个字符串分割成字符串数组 数 separator 可选。指定要使用的分隔符。

如果省略该参数，则使用逗号作为分隔符。

howmany 可选。该参数可指定返回的数组的最大长度

howmany 可选。该参数可指定返回的数组的最大长度

slice(“取字符串的起始位置”, [结束位置]) ; [] 可选的  起始位置一定要有  结束位置可以省略，不包括结束位置 

起始位置可以是负数  ，如果是负数 , 则是从 右边往左边开始取

substr(起始位置,[取的个数])  常用

附:保留小数位数的方法

 

 

大小写转换

 

toUpperCase()，转换为大写（参数： 无）

toLowerCase（），转换为小写（参数：无）

 

3.   boolean   (布尔型)

数据类型转换为布尔型：

  1. 利用 !!   

   console.log(typeof !!num);

  2. 利用 Boolean()  

 false、undefined 、null、0、””  为 false

 true、1、”somestring”、[Object]  为 true

 

4.  null     空的     没有值   

 

5.  undefined  未定义的，应该有值，但是没被定义

 

八、判断真假

九、数组

数组声明

案例：1. 隔行变色

 2.  排他思想：

数组的常用方法：

push(obj)       向数组尾部添加一个或多个元素，并返回新数组的长度

unshift(obj)   向数组的开头添加一个或更多元素，并返回新的长度

 

 

pop()         移除最后一个元素 返回最后一个值

shift()       把数组的第一个元素从其中删除，并返回第一个元素的值

 

concat()    用于连接两个或多个数组,它不会改变现有的数组，而仅仅会返回被连接数组的一个副本

jion(separator)   将数组各个元素是通过指定的分隔符进行连接成为一个字符串 .如果省略该参数，则使用逗号作为分隔符。

十、获得焦点、和失去焦点案例:

附:事件源.focus()   自动获取焦点

     鼠标经过选择表单全部内容  事件.select();

 

十一、用户输入事件

附:innerHTML 属于盒子的输入内容。表单的内容用value

十二、下拉菜单事件

 

十三、DOM(重点)

javascript由三部分组成   

ECMAscript     核心      （ECMAScript）欧洲计算机制造商协会 描述了JS的语法和基本对象】     

DOM              文档对象模型  处理网页内容的方法和接口

BOM              浏览器对象模型   与浏览器交互的方法和接口

 

DOM 为文档提浏览器对象模型供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM树

标签       标记      元素      节点       由结构图中我们可以看到，整个文档就是一个文档节点。而每一个HMTL标签都是一个元素节点。标签中的文字则是文字节点。标签的属性是属性节点。一切都是节点……

1.访问节点

前面学过几个访问节点 ：

getElementById(id)   id 访问节点

getElementsByTagName(div)    标签访问节点

getElementsByClassName(className)   类名    有兼容性问题

主流浏览器支持     ie 678  不认识    怎么办？ 我们自己封装自己的 类 。

 

2.封装自己的className

原理： （核心）

我们要取出所有的盒子， 利用遍历的方法 ， 通过每一个盒子的className 来判断。  如果相等就留下。

3.访问关系

其中   nextSibling  下一个兄弟    亲的       ie 678 认识       

nextElementSibling 其他浏览器认识的，   其他同理

解决兼容性问题 方法 : 必须先写 正常浏览器  后写  ie678 

childNodes： 标准属性   它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点  

火狐 谷歌等高本版会把换行也看做是子节点  (nodeType == 1   时才是元素节点     来获取元素节点  标签  元素)

children   重要  选取所有的孩子 （只有元素节点） 但是ie678 把注释也算为节点

4.节点操作

document.createElement(div);

appendChild();    (由节点调用)

insertBefore(插入的节点，参照节点)；    如果第二个参数  为 null  则 默认这新生成的盒子放到最后面。

removeChild()；

cloneNode();    可以有参数，如果true 则深层复制， 除了复制本盒子，还复制子节点  

如果为 false  浅层复制   只复制   本节点  不复制 子节点。

5.设置节点属性

getAttribute(属性)      获取属性

setAttribute(“属性”,”值”);  如 div.setAttribute(“class”,”demo”);

removeAttribute(“属性”);  如 demo.removeAttribute(“title”)  

 

十四、日期对象  Date()

var date = new Date(“2015/12/12”);  

如果date 括号里面写日期  就是 自己定义的时间  
如果 date括号里面不写日期 ， 就是当前时间 。

new Date(“2015/12/12 17:30:00”); 

日期和时分秒中间 有空格隔开 

 

date.getTime();        提倡使用

date.valueOf();        都是得到 距离 1970年的毫秒数

一些常用方法:

2.定时器

很多情况下，一些操作不需要人工干预， 代码自己会不断的去执行 。而且 会有 时间的绑定  。  比如每隔 5秒钟就去执行一次事件。

setInterval(fun, 1000)

setInterval(“fun()”,1000)     
setInterval( function(){} , 1000 )   三个书写格式都可以

setInterval(fun(),1000)  错误的写法

 

setTimeout(“fun()”, 5 )  类似于定时炸弹    每隔 5秒钟，就去执行函数fun一次

时钟案例:

倒计时案例：

自动跳转页面案例:  其中要用到  window.lacation.href="http://mp.csdn.net "  跳转页面

十五、网址编码:

我们知道不同页面也有自己id网址,我们经常会做一些， 把网址送入到后台。 但是后台再处理的 不认识比如 换行啊 等特殊符号的  ？  

如 ：var url =  “http://www.fdfd?name=ff”  所以我们要实现编码，然后再传到后台。

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
decodeURIComponent() 函数可把字符串作为 URI 组件进行解码

十六、最后在介绍两个案例

无缝滚动：

缓动动画:

 缓动公式   leader = leader + (target - leader ) /10 ;

 

PS: 以上就是我整理出来javascript基础笔记，如有地方不正确，欢迎指出。