js

1.js

html 骨架
css  美化
js   动态交互效果
js   javascript  livescript
java 和javascript   雷锋和雷峰塔的关系
网景公司，弱类型脚本语言。
Js的组成部分
ECMAscript   基本的语法
BOM  浏览器对象模型
DOM  文档对象模型
可写在网页的任何位置，一般写在头部script里

2.常用函数

alert(内容)  消息弹出框
document.write(内容);将内容写到body
prompt() 弹出输入框

3.变量       

容器---》变量需要容器，去买需要一个变量 ，去声明一个变量  var

 4.数据类型

typeof（）  检测数据的数据类型
number  数值类型，包括小数，整数负数
string  字符串类型，用双引号或单引号包裹的数据
undefined  声明了未赋值
boolean  布尔类型 只有两个值  true  false
object   对象类型 ，比如数组..

5.运算符

算术运算符 + - *  /  %+   加法运算 ，字符串的连接
 -   减法运算
 *   乘法运算
 /   除法
 %   取余
 ++  自加1 --  自减1
比较运算符 >  <   >=  <=  ==  ===   !=
　　n ==  比较值，不比较数据类型
　　　　比如：22 == “22”   true
　　n ===  既比较值，也比较数据类型
　　　　比如 22===“22”  false
逻辑运算符  &&  ||  !
　　n &&  与（且）
    A&&B
　　只有A和B都为true, A&&B才为true;
　　其中任何一个为false ,A&&B为false
　　n ||  或
　　A || B
　　只要A和B中有一个为true，A||B为true.
　　!    非
   !A   取反
　　如果A为true.!A为false.
NaN 不是一个具体的数值，但是属于number类型

6.注释

单行注释   //注释的内容
多行注释    /*注释的内容*/

7.分支 结构

 

if
　　if(条件){
   　　//代码块
　　}
当条件为true时，执行{}里的代码块
当条件为false时，不执行执{}里的代码块
If  else
　　if(条件){
  　　//代码块1
　　}else{
   　　//代码块2
　　}
当条件为true 执行代码块1
条件为false，执行代码块2
If..  else if .. else if.. else..
　　if(条件1){
   　　//代码块1
　　}else if(条件2){
  　　 //代码块2
　　}else{
   　　//代码块3
　　}
 判断条件1，如果为true,执行代码块1
    如果为false  ,再判断条件2
         如果条件2为true,执行代码块2
          如果条件2位false ,执行代码块3
Switch
　　switch(变量){
  　　　　case 值1:
　　　　　　　　代码块1；
　　　　　　　　break；
　　　　　　case 值2:
　　　　　　　　代码块2；
　　　　　　　　break；
　　　　　　　　…
  　　　　default:
　　　　　　　　代码块n;
　　　　　　}
当变量==值1，执行代码块1
当变量==值2，执行代码块2
。。。。
注意：break 跳出switch ,如果不加break,会穿透

8.If 和switch的区别

If 可以用来等值判断和范围的判断
switch 只能用来等值的判断
switch能实现的，用if也能实现 。

 9.循环结构

while(){}
　　while(①条件){
 　　　　②循环体
　　}
　　③循环外
do{} while()
　　do{
　　　　①循环体
　　}while(②条件);
　　③循环外
do{}while()和while的区别
　　While 是先判断条件，再执行循环体
　　Do while 先执行循环体，再判断条件，所以do while的循环体至少执行一次
 for(){}
　　for(①初始值;②条件;③增量){
   　　　　④循环体
　　　　}
　　　　⑤循环外

10. break和continue的用法

break 用在switch，表示跳出switch。
break用在循环，表示跳出当前循环。（后期循环嵌套，加上标记可跳出标记的循环）
continue 用在循环，表示结束本次循环，进入下一次循环

11.数组

类型：object
　　创建一个数组    var  数组名=[元素1,元素2……];
　　var arr=[1,2,6,9,82];
数组的长度     
　　数组名.length
　　arr.length
下标  ：数组里的每一个元素都有一个下标，下标是从0开始，也即第一个元素的下标为0，第二个为1，依次类推
　　通过下标获取数组里的元素     
　　数组名[下标]
　　arr[1]    获取数组中的第二个元素
循环遍历数组
　　for(var i = 0;i<arr.length;i++){
            arr[i];//得到数组中的元素
　　}
练习：数组[2,8,9,45,23,56]，求出数组中元素之和
　　var a = [2,8,9,45,23,56];
　　var sum = 0;
　　for(var i = 0;i<a.length;i++){
　　　　sum = sum + a[i];
　　}
　　alert(sum);
Js中的一个数组可以放多种数据类型
　　var b = ["a","k",true,false,1,6];
数组的创建方式有多种
　　var arr = [1,5,6,9]; 
　　var arr = new Array();创建一个长度为0的数组
　　var arr = new Array(5);创建一个长度为5的数组
　　var arr = new Array(5,2);//创建一个长度为2的数组,元素为5，2

 

12.Math

 

 类型  object
 　　Math.random()  得到一个随机数。范围是0-1
 　　Math.ceil(-2.3)  向上取整   -2
 　　Math.floor(-2.3);//向下取整   -3
 　　Math.max(5,3)  取两数中的最大值
 　　Math.min(5,3)  取两数中的最小值
 　　Math.abs(-5.56);//取绝对值
 　　Math.round(2.6);  四舍五入
 　　Math.PI; 圆周率

 

 

 

13.String

 

String的split()方法 切割字符串得到一个数组
　　数组的join方法  将数组的元素组合成字符串

 

14.Date  日期

 

var da = new Date(); 获取 当前系统时间
var year = da.getFullYear();//获取年
var month = da.getMonth();//获取月
var day = da.getDate();//获取日
var hour = da.getHours();//获取时
var minute = da.getMinutes();//获取分
var seconds = da.getSeconds();//获取秒
var week = da.getDay();//获取星期

15.定时器

周期性定时器
　　setInterval(方法,时间)
每隔指定时间执行一次方法
　　clearInterval（定时器的名字）  清除定时器
一次性定时器
　　setTimeout(方法,时间)
过了指定时间执行方法，只执行一次
　　clearTimeout（定时器的名字）  清除定时器

 

16.函数（方法）

具有一定功能的代码块
 系统函数 
　　　　alert()  typeof()……  
　　　　直接可以使用，不需要自己定义
 自定义函数
　　function 函数名(){
　　}
　　调用函数 ：函数名();
　　匿名函数：没有名字的函数
　　函数的作用：提高代码的复用性
　　形参（形式参数） 函数定义时，写在（）里的变量名
　　实参（实际参数） 函数调用时，写在（）里的值
　　函数的返回值  return
　　　　return 将结果返回给调用者
　　　　代码执行到return ,
　　　　会跳出函数 ，函数中return后的代码不执行
定义函数求n-m之间数据的和，将和返回
定义函数求圆的面积，将面积返回

17.变量的作用域

全局变量：定义在函数外部的变量,
　　不用var关键字定义在函数内部的变量
局部变量：用var定义在函数内部的变量

18.DOM    document  object  model

文档对象模型
　　当网页被浏览器解析后，会生成树（DOM树），
　　网页的元素就是树的节点，我们利用DOM树
可以：
　　获取网页元素
　　设置获取元素的属性
　　对元素设置样式
　　给元素绑定事件
　　动态的创建新的元素，删除元素

19. 获取元素

根据id获取页面元素
　　document.getElementById(id名)
　　该方法会返回一个object，
　　该object对应的就是该id对应的元素
　　注意：浏览器解析网页顺序是从上往下
通过class获取元素，返回的是一个数组
　　var clas = document.getElementsByClassName("cla");
通过标签名获取元素，返回的是一个数组
　　var tags = document.getElementsByTagName("div")
通过name获取元素，返回的是一个数组
　　var ns = document.getElementsByName("liu");

20. 获取或设置元素的属性

　　 object.innerHTML  标签里的所有内容，包括子标签
　　 object.innerText  //标签里的文本
　　 img  
　　·src  　　　　　　　　 图片的路径
　　·value   　　　　　　 获取或设置value属性 ，
　　　　　　　　　　　　   通常用于具有value属性的元素
　　getAttribute(属性名)  　　　　获取指定属性的属性值
　　setAttribute(属性名，属性值)  设置属性
设置样式
　　object.style.样式属性  =   …
给元素绑定事件
 　　onclick  　　　　鼠标单击事件
 　　ondblclick  　　鼠标双击事件
 　　onmouseover  　 鼠标移入事件，经过子区域也会触发
 　　onmouseout　　　鼠标移出事件
 　　onmouseenter　　鼠标移入事件
 　　onmouseleave 　 鼠标移出事件
 　　onchange  　　  内容改变事件
 　　onload   　　　　加载完毕事件
 　　onblur   　　　　失去焦点事件
　　 onfocus 　　　　 获得焦点事件
　　 onkeyup  　　　　键盘弹起事件
　　 onkeydown   　　键盘按下事件
设置层级  z-index
　　设置z-index必须要设置position  ,否则无效

21.下拉选择框属性和方法

 selectedIndex   获取所选中option的索引
 length   　　　　option 的个数
 new Option(text,value)  创建一个option
 add(option)  　　在select中添加一个option  

22.dom节点操作   与BOM思想

 

创建节点
　　document.createElement(标签名);
将节点添加到其他节点上
　　//将pic追加到my内部
　　//my.append(pic);   //appendChild()
　　//将pic放在my内部中dd的前面
　　my.insertBefore(pic,dd);*/
移除节点
　　pic.remove();//移除pic
浏览器对象模型
　　window  顶级对象
　　所有的函数，以及全局变量都是属于window对象。

23.location   与  history 浏览历史 and  Screen

 

window.location.href  //页面地址window.location.reload()//刷新页面
hoistory
　　window.history.back()   后退
　　window.history.forward()  前进
　　window.history.go(整数)   

　　　　正数:前进
　　　　负数：后退
screen
　　alert(window.screen.width);//宽度
　　alert(window.screen.availHeight);//可用高度
jquery    jq
　　一个js的框架（用js定义好的函数）。Js库
　　如何引入外部js文件？
　　　　<script type="text/javascript" src="demo.js"></script>
　　注意: script标签要么用来引入文件，要么写js代码，不能一个script两用。
　　引入在前，使用在后。