初探js

第一章

1.JS的位置

1-1.行间

1-2.内嵌

1-3.外联

2.JS的标签位置

页面中的代码在一般情况下会按从上到下的顺序，从左往右的顺序执行。

因此当JS放在了元素上面的时候，就不能正常执行。

解决

* window.onload 页面加载完成之后再执行JS

* window.onload=function(){

* //当页面中的元素全部加载完成后执行这里的代码

3.JS变量

* 变量

* 可变的量（值）

* 变量的好处

* 1、可以复用代码

* 2、可以精简代码

* 声明变量方式

* var 变量名＝值

3-1

* 变量全名规则

* 1、允许是字母，数字，下划线(_)，美元符($)任意组合而成

* 2、不允许数字开头

* 3、不允许使用关键字和保留字

* 关键字：当前语法中正在使用的单词

* http://www.w3school.com.cn/js/pro_js_keywords.asp

* 保留字：将来可能在语法中使用的单词

* http://www.w3school.com.cn/js/pro_js_reservedwords.asp

* 变量的命名风格

* 语义化

* 写的变量名尽量贴近实际的意思

* nav

* 驼峰命名

* 大驼峰

* 首字母就大写

* Math、Date

* 小驼峰

* 从第二个单词开始首字母大写

* getElementById

* get 获取

* Element 元素

* By 通过

* Id id

var box=document.getElementById('box');

4.函数

* 复用代码，它复用是多行代码

* 函数的名字在声明的时候尽量遵守变量的全名规则

* 函数的定义

* function 函数名(){

* //这里面的代码，是要复用的代码，这里面可以放多行代码

* }；

* 函数调用

* 函数名()

必须要调用函数才能实现函数内的代码。

function fn(){

alert(1);

}；

fn();

4-1匿名函数

匿名函数不能直接声明，会报错

* 当匿名函数是以被赋值的形式所出现，并且它是被事件调用才会正确执行。

* 事件 window.onload

* 赋值＝

window.onload=function (){

alert(1);

};

当点击窗口便会弹出1

5.属性操作

* 1、. 的

* 元素.属性名

* 如果属性是单一属性(例如font-size)，用点操作符是取不到的，而且还会报错

* 如果想用点操作符去获取带横杠的属性，那首先要把横杠去掉，然后把横杠后面的第一个字母大写

XXX.style.fontSize=

* 2、[ ] 的

* 如果属性中带横杠，用[]的方式去操作属性,并带上一对引号

XXX.style['font-size']=

3、区别

'.' 点操作属性的时候，后面只能跟真正的属性名称，不能跟变量名

XXX.style.background=
'[ ]'操作属性的时候，里面可以放属性名称与变量名，如果放的时属性名，那要加引号，如果放的是变量名，那不需要加引号

var name=background；

XXX.style[name]=

6.字符串

* 字符串是js数据类型中的一种

* 用一对单引号或者双引号包含起来的由0个或者多个字符组成的串

例 var str='kaivon'；

* 字符串拼接

* +

* 1、数学中的加法运算

* 2、字符串连接

* 当加号的任意一边有一个是字符串，那它就是字符串连接的意思

'img/'+imgArr[n]+'.jpg' 的意思为 img/imgArr[n].jpg

'a'+10 的意思为 a10

'1'+1 的意思为 11

7.innerHTML

格式 XXX.innerHTML=' ';

* 获取到是一个标签对里的所有内容

* 如果标签对当中有其它的标签，那一样会拿的到

<div id="box"><p>标题</p>这里是一段文字</div>

那么 var box=document.getElementById('box');

box.innerHTML 代表的就是 <p>标题</p>这里是一段文字

* 在给innerHTML设置值的时候，如果这个值里面有html标签，那放到网页当中，会把它解析成一个真正的html标签

box.innerHTML='<span>XXX</span>';

这个div里面显示的内容则为XXX

如果赋予的值自带一对引号‘’ 则不需要再加引号

var name='HAHA';

box.innerHTML=name;

这个里面显示的内容则为HAHA

8.if

* 当代码有不同的情况需要去处理，这个时候就要用if

* 语法

* if(判断条件){

* 当判断条件成立的时候，会执行这里的代码

* }

* 在判断条件中，因为js “=” 被喻为赋值的功能，所以真真的等号为“ =="

if(n==true) 或则 if(n==false)

也不能以 style作为判断的条件，因为style操作的是行间样式，除非这个style是写在行间的。

* if的判断条件为被转化成一个布尔值

* 布尔值

* true 真

* false 假

* if的条件会被转化成布尔值，如果布尔值为true（真）,大括号里的代码就会被执行，如果布尔值的结果为false(假)，那大括号里的代码就不会被执行

if(1<2){

//当1<2这个条件成立，这里的代码才会执行

alert('成立');

}

if(1<0){

//1<0是不成立的，所以这里面的代码不会执行

alert('不成立');

}

alert(1<2); //true

alert(1<0); //false

9.if else

* if 如果当页面中只有一种特殊情况要去处理

* else 否则当页面中有两种特殊情况要去处理

* 语法

* if(条件判断){

* 当条件判断成立的时候，会执行这里的代码

* }else{

* 当条件判断不成立的时候，会执行这里的代码

* }

            if(1>2){

                //条件满足了，这里的代码执行了（只有当条件成立的时候，才走这里的代码）

                alert('成立');

            }else{

                //当条件不成立的时候，执行这里的代码

                alert('不成立');

}

10.else if

* if 如果只有一种特殊情况要去处理

* else if 否则如果有多种特殊情况要去处理

* else 否则有两种特殊情况要去处理

* 语法

* if(判断条件){

* 当判断条件成立的时候，执行这里的代码

* }else if(判断条件1){

* 当头条条件1成立的时候，执行这里的代码

* }else if(判断条件2){

* 当判断条件2成立的时候，执行这里的代码

* }else{

* 当以上条件都不成立的时候，执行这里的代码

* }

* 当一个条件满足的时候，代码只会走满足条件对应的大括号里的内容。其它的都不会走

* 一个非0数字转布尔值的结果是true

* = 赋值

* ＝＝对比

            var n=12;

            if(n<10){

                //这个条件成立，说明n是小于10的

                alert('n小于10');

            }else if(n==10){

                //这个条件成立，说明n是等于10

                alert('n等于10');

            }else{

                //以上条件都不成立，才会走这里的代码，代表n大于10

                alert('n大于10');

}

11.数组(自己定义的组合)

* 数组

* 数据的组合

* 语法

* []

* 每个数据之间是用逗号隔开的，最后一个数据是没有逗号

* 每个数据都会对应一个下标（序号）

* 下标代表的意思是，每个数据都有一个自己的标识，用于方便获取

* 下标值是从0开始

* 数据会有一个length属性，代表数组中数据的个数

* 取数组中的某个数据

* 数组[下标值]

// 0 1 2 3 4 5 length=6

var color=['red','green','blue','white','black','pink'];

console.dir(color);

console.log(color[1]); //green

console.log(color[4]); //black

console.log(color[color.length-1]); //pink

12.获取元素的方法（在括号里面一定要给一对引号）

* 主语(限制范围)：

* document 从整个文档中去获取一组元素

* 父级从父级下面去获取一级元素

1.document.getElementById(id名称)

var text1=document.getElementById("text1");

* 通过id名称去获取一个元素,它只有一个主语,document(整个文档)

2. getElementsByTagName(标签名称)

var lis=document.getElementsByTagName('li');

* 通过标签名称去获取一组元素，它获取到的是一组元素

如果这一组元素在同一个父级下，获取到的是一个集合，类数组

类数组：类似数组，但是数组中的一些方法，它没有

它只具备数组中的length属性，以及每个数据都会有一个自己对应的下标

3. querySelector(css选择器)

var red=document.querySelector('#color li:first-child');

* 通过css选择器去获取一个元素

* 它获取到的只有一个元素，如果说有重复的，那它只取第一个

4. querySelectorAll(css的选择器)

var lis=document.querySelectorAll('li');

* 通过css选择器获取到一组元素

* 它获取到的也是一组元素，它也是一个类数组

13for

* for循环

* 根据一定的条件，重复的执行一行或者多行代码

* 语法

* for(条件初始化;条件判断;条件变化){

* 当条件成立的时候（true）重复执行这里的代码

* }

* 步骤

* 第一步：条件初始化（声明了一个变量，给这个变量一个初始值）

* var i=0;

* 第二步：条件判断（把变量的值限定了一个范围）

* i<10;

* 第三步：走大括号里的代码（当条件判断成立的时候，走大括号里的代码）

* console.log('kaivon');

* 第四步：条件判断（循环一次让变量的值加上1）

* i++;

* 注意：从第二次循环开始，它就不走第一步了。不断的走第二步、第三步、第四步

* 结束

* 当判断条件不成立的时候，就结束循环

* 循环什么时候结束由判断条件来决定的。一定要给一个条件（能够不成立的时候），否则就是一个死循环

* 循环什么时候用

* 当需要操作一组元素做同一件事件的时候就用for循环

//获取到所有的li
var lis1=document.querySelectorAll('li');
//把所有的li的背景色全部变为红色
// lis1[0].style.background='red';
// lis1[1].style.background='red';
// lis1[2].style.background='red';
// lis1[3].style.background='red';
// lis1[4].style.background='red';
for(var i=0;i<lis1.length;i++){
//i 0 1 2 3 4
lis1[i].style.background='red';
}
};
<ul>
<li>red</li>
<li>green</li>
<li>blue</li>
<li>yellow</li>
<li>pink</li>
</ul>

14this

* 指的是当前对象

* 它是关键词，不能当作变量名

* 只能读，不能写。它的值只能用，不能修改

* 被事件所调用，并且是以赋值的形式出现

* this指向是，谁调用了函数，那this就指向谁

//获取到所有的li
var lis1=document.querySelectorAll('li');
//给每一个li都添加点击事件
for(var i=0;i<lis1.length;i++){
lis1[i].onclick=function(){
//找点击的那个对象
//这里的this代表谁点击了就指向谁
//在循环的时候，给每个元素都添加了点击事件，想要在点击事件里找到点击的那个对象，不能用i的值作为下标去取，要用this,this指的就是点击的那个对象
this.style.background='red';
};
}
};
<ul>
<li>red</li>
<li>green</li>
<li>blue</li>
<li>yellow</li>
<li>pink</li>
</ul>

15.自定义属性

* 属性

* 元素身上所具有的一些特征

* 1、系统自带的属性

* type、id、style、value、src

* 2、自己添加的属性

* 自定义属性，系统当中是没有的，我们自己添加的

* 系统自带的属性，满足不了我们的需求，给一个自己添加的属性

inputs[i].index=i; //给每个按钮添加一个自定义属性，存的是它们对应的索引值

* inputs[0].index=0;

* inputs[1].index=1;

* inputs[2].index=2