Second Week -JavaScript

鱼鱼鱼同学
216 阅读10分钟

基础

导入：
<script src="index.js"></script>
变量的命名有一些限制：只能包含字母，数字，和下划线，还有个特殊的$字符，
并且变量名只能以字母，下划线，还有$开头;

数据类型

数据类型分为基本数据类型和引用数据类型.
基本数据类型(栈):
1.number 
2.String(在JS中string为基本数据类型)
3.boolean 
4.undefined 
5.null 
引用数据类型(堆)
1.array 
2.object

判断数据类型

运用typeof判断数据类型
1.typeof "abc"  => "string"
2.typeof 123  => "number"
3.typeof true  => "boolean"
4.typeof "123"  => "string"
5.typeof undefined => "undefined"
6.typeof null => "object"
7.typeof 函数  => "function"
8.typeof [1,2,3] => "object"
9.typeof {name:'zs'} => "object"

判断数据和对象
1.console.log(arr instanceof Array);//判断arr是否是Array的一个实例化对象 true false
2.console.log(arr.constructor == Array);//返回arr的构造函数 
3.console.log( Array.isArray(arr));

加减乘除

1.字符串拼接
  var a='asdasd';
  var b='asdqwe';
  console.log(a+b);
  a=a+b;
  console.log(a);
2.c++ 先参与运算 再++
  ++c 先++ 再参与运算
3.+号运算 谁在前就先算谁 如果string在前就拼接 如果两个数字在前就先+
4.- * /运算 隐试转化 转换后能运算 就参与运算 ，运算不了会返回 NaN(not a number)

类型转换

1.字符串 转化为boolen型 非空即为真
        var str='some string';
        console.log(!!str);
2.数字 转化为布尔型 非0即为真
        var num=1;
        console.log(!!num);
3.快速转换为数字类型
        var num = '6';
        num *= 1;

函数

普通写法
function fn(){
    console.log("函数fn")
} 
// 调用
fn();

JS可以的写法
var fn = function(){
    console.log('hahah')
};
fn();

函数提升和变量提升

1.函数提升
fn1();
fn2(1,2);
function fn1(){
    console.log("函数fn")
} 
function fn2(a,b){
    console.log("函数fn")
} 
赋值型函数没有函数提升
(var a=function(){}无函数提升)

2.变量提升
//var a;
console.log(a);//undefined
a=1;(a之前会有一个var a;)

作用域

1.局部作用域
在函数内定义变量
eg:function fn(a,b){//局部变量
    var y = 100;
    var x = 20;
    console.log(x+y);
}
2.全局作用域
(1)定义变量 不写var 全局变量
(2)在函数外 定义变量
3.!!!!!先找局部作用域定义的变量 再找全局作用域变量

对象

内置对象
1.Array
2.Boolean
3.Date
4.Math
5.Number
6.String
7.RegExp
8.Global
自定义对象
1.
var obj=new Object;
obj.name="shiyu";
obj.age=20;
obj.rap =function(){
    console.log("唱跳");
}
console.log(obj);
console.log(obj.name);
obj.rap();
2.
var person1 = {
    name:"lisi",
    age:30,
    play:function(){
        console.log('打篮球');
    }
}
console.log(person1.name);
person1.play();
3.DOM对象

Date

Date方法及属性

后续补充

String

String方法及属性

后续补充

Math

Math方法及属性

后续补充

堆内存

1.
var a = "123";
var b = a;
a = "456";
console.log(a,b);
var arr1 = [1,2,3,4];
var arr2 = arr1;
console.log(arr2);
arr1[0] = 66;
console.log(arr1);
console.log(arr2);
2.
var obj = {
    name:'zs',
    age:20,
    father:{
        name:'zzz'
    }
}
var obj2 = {
    name:obj.name,
    age:obj.age,
    father:obj.father
}
obj.father.name = "zxs";
console.log(obj2.father.name);

示意图

BOM

*window子对象
1.document 对象
2.frames 对象
3.history 对象
4.location 对象
5.navigator 对象
6.screen 对象

*窗体控制
1.moveBy(x,y)——从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体
2.moveTo(x,y)——移动窗体左上角到相对于屏幕左上角的(x,y)点，当使用负数做为参数时会吧窗体移出屏幕的可视区域
3.resizeBy(w,h)——相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体
4.resizeTo(w,h)——把窗体宽度调整为w个像素，高度调整为h个像素

*窗体滚动轴控制
1.scrollTo(x,y)——在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置
2.scrollBy(x,y)—— 如果有滚动条，将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素)，将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)

*窗体焦点控制
1.focus()—— 使窗体或控件获取焦点
2.blur()——与focus函数相反，使窗体或控件失去焦点

*新建窗体
1.open()——打开(弹出)一个新的窗体 （opener属性——新建窗体中对父窗体的引用，中文"开启者"的意思）
2.close()——关闭窗体

*History 对象的方法
1.back()	加载 history 列表中的前一个 URL
2.forward()	加载 history 列表中的下一个 URL
3.go(num)	加载 history 列表中的某个具体页面
*Location 对象的属性
1.hash	设置或返回从井号 (#) 开始的 URL（锚）
2.host	设置或返回主机名和当前 URL 的端口号
3.hostname	设置或返回当前 URL 的主机名
4.href	设置或返回完整的 URL
5.pathname	设置或返回当前 URL 的路径部分
6.port	设置或返回当前 URL 的端口号
7.protocol	设置或返回当前 URL 的协议
8.search	设置或返回从问号 (?) 开始的 URL（查询部分）

*Navigator 对象的属性（userAgent重点）
1.appCodeName	返回浏览器的代码名
2.appName	返回浏览器的名称
3.appVersion	返回浏览器的平台和版本信息
4.browserLanguage	返回当前浏览器的语言
5.cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
6.cpuClass	返回浏览器系统的 CPU 等级
7.onLine	返回指明系统是否处于脱机模式的布尔值
8.platform	返回运行浏览器的操作系统平台
9.systemLanguage	返回 OS 使用的默认语言
10.userAgent	返回由客户机发送服务器的 user-agent 头部的值
11.userLanguage	返回 OS 的自然语言设置

时间等待和时间间隔函数

时间等待与时间间隔函数中this指向window
************************************************************
1.setTimeout()—— 暂停指定的毫秒数后执行指定的代码
·如果setTimeout(function(){},0)后面的延迟参数为0时，setTimeout()会在主线程结束后再执行任务队列中的setTimeout();
************************************************************1
2.clearTimeout()——取消指定的setTimeout函数将要执行的代码
3.setInterval()——间隔指定的毫秒数不停地执行指定的代码
4.clearInterval()——取消指定的setInterval函数将要执行的代码

window对话框

1.alert(str)—— 弹出消息对话框（对话框中有一个“确定”按钮）
2.confirm(str)—— 弹出消息对话框（对话框中包含一个“确定”按钮与“取消”按钮）
3.prompt(str,defaultValue)——弹出消息对话框（对话框中包含一个“确定”按钮、“取消”按钮与一个文本输入框），由于各个浏览器实现的不同，若没有第二个参数（文本框中的默认值）时也最好提供一个空字符串（prompt默认输出类型为string）

DOM

1.通过id 获取dom元素  返回的是DOM元素  找不到返回null
  var oDiv = document.getElementById('div1');
2.通过标签名 获取元素 返回数组  找不到空数组[]
  var aLi = document.getElementsByTagName('li');
3.通过class名 获取元素 返回数组  找不到空数组[]
  var aLi = document.getElementsByClassName('aa');
4.通过Name 获取元素 返回数组  找不到空数组[]
  var arr = document.getElementsByName("sex");
5.接收选择器  返回dom元素 如果有多个之返回第一个
  var oDiv = document.querySelector("#div1"); 
6.接收选择器  返回dom元素 返回数组  找不到空数组[]
  var aLi = document.querySelectorAll("li");
*********************************************************
2，3，4，6中都需要用循环去初始化每一个数组中对象

事件

事件源 
事件处理函数
事件

<script>
oDiv.onclick = function(e){
this //对当前对象的引用
e = e || window.event;//兼容写法
e.target //事件源
e.currentTarget == this //当前事件源
e.keycode //键盘码
e.clientX //鼠标距离左
e.clientY //鼠标距离上
}
</script>

冒泡和捕获

事件流
冒泡 从里向外
捕获 从外向里（ie不支持 ）
既有捕获 又有冒泡 先捕获 后冒泡
（先从外到里 再从里向外）

阻止事件冒泡
e.stopPropagation();//标准浏览器
e.cancelBubble = true; //ie
阻止默认行为 
e.preventDefault();//标准浏览器
e.returnValue = false; //ie

事件绑定

first
oDiv1.onclick = function(){
console.log(111);
}

second
//第一个会被覆盖，第二个不会，绑定几个就是几个
oDiv1.addEventListener('click',function(){
console.log(111);
},false); //冒泡或捕获 false 冒泡 true捕获

事件委托

事件委托 
1后生成元素的事件绑定问题 2绑定的事件少
将事件绑定在父元素身上，点击子元素的时候会发生事件冒泡 触发父元素的点击事件
通过事件源（e.target）判断是否是要绑定事件的子元素 执行相应的处理函数

oBtn.onclick = function(){
var oLi = document.createElement('li');
oLi.innerHTML = Math.random();
oUl.appendChild(oLi);
}
oUl.onclick = function(e){
// 判断事件源的标签名 是否是li
if(e.target.tagName == "LI"){
console.log(e.target.innerHTML);
  }
}

节点

节点类型
节点类型共12种
常用的类型
Node.ELEMENT_NODE (1) -> 元素
Node.ATTRIBUTE_NODE (2) -> 接口
Node.TEXT_NODE (3) -> 文本
Node.COMMENT_NODE (8) -> 注释

节点遍历
1.nextSibling 指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null ie下一个元素  标准浏览器返回"↵    "   
  nextElementSibling ie不支持
2.previousSibling 指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null  
  previousElementSibling ie不支持
3.firstChild 指向在childNodes列表中的第一个节点
4.lastChild 指向在childNodes列表中的最后一个节点
5.children 指向在childNodes列表中所有节点

查找到下一个节点的函数
function next(elem){
do{
elem = elem.nextSibling;
}while(elem && elem.nodeType != 1) //如果找到下一个兄弟节点 并且下一个兄弟的不是元素节点 接着循环
 null(无效值)
return elem;
}
console.log( next(oLi) )//下一个元素节点

节点操作

createElement() 创建节点
父元素.appendChild() 插入节点在父元素的内部的后边
父元素.removeChild() 移除节点
父元素.replaceChild(newnode,oldnode) 替换
父元素.insertBefore(newnode,refnode) 在前边插入
cloneNode(true); //true 深克隆 没有参数 只克隆当前元素

类

类是具有相同属性和方法的对象集合

//创建类 属性写在构造函数中 方法写在原型下 
// 类中this指向new出来的实例化对象
function Person(name,age,weight){
this.name = name;
this.age = age;
this.weight = weight;
// this.eat = function(){
// console.log("chichi....");
// }
}
// 原型 构造函数下 有一个prototype属性 指向原型对象，
// 写在原型对象下的属性和方法能够被所有实例化对象所共享 
Person.prototype.eat = function(){
console.log("chichi....");
}

this指向

1. 定时器中this -> window
eg:
setInterval(function(){
    this
},10)
2. this -> oDiv 对当前对象的引用
eg:
oDiv.onclick = function(){
    this
}
3. 函数中  this指向window 
eg:
function a(){
    console.log(this);
}
a();
4.this -> obj
eg:
var obj = {
    name:'zs',
    age:20,
    say:function(){
        console.log(this.name +"hah")
    }
}
obj.say();
5. this-> new出来的实例化对象 
eg:
function Person(){
    this.name = "zs";
}
var p1 = new Person();

改变this指向

1.call 用来改变this指向 第一个参数 this指向，后边依次是参数
  eg:fn.call(obj,1,2);
2.apply 用来改变this指向 第一个参数 this指向，后边依次是用方括号括起来的参数
  eg:fn.apply(obj,[1,2]);
3.bind 只改变this指向  需要手动调用
  eg:fn.bind(obj,1,2)();
  实例:
    <body>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
    <script>
        var aLi = document.getElementsByTagName('li');
        for(var i=0; i<aLi.length; i++){
            aLi[i].onclick = function(){
                setTimeout(function(){
                    console.log(this.innerHTML);
                }.bind(this),1000)
            }
        }
    </script>
</body>

出现undefined的情况

返回undefined 
1. 定义变量没有赋值
2. 数组越界
3. 访问对象下没有的属性
4. 函数没有返回值
null getElementById('') 取不到元素 返回null(空对象)

补充

1.oDiv.style.width 只能获取内联样式的属性  "200px"
2.offsetWidth = width+padding+border
3.offsetWidth 只能取值 不能赋值
  offsetHeight 只能取值 不能赋值
  offsetTop 只能取值 不能赋值
  offsetLeft 只能取值 不能赋值
  offsetParent 只能取值 不能赋值

一些例子

选项卡-基于基本的DOM的编写方式

思路： 被选择的标签获得active的状态 给active写样式
    和上方的标签索引相同的div获得selected的状态，进行显示，其他div隐藏
    因为用到的索引，所以给每一个标签自己添加索引，
    然后在点击事件中把所有的classname清空，点击了哪个标签哪个标签的classname改为active
    同时根据索引改变下方的div

滑动轮播图

 思路：比如有五个图和五个索引，与选项卡的思路相同，都是先清空classname，在给被点击的
    赋classname，需要一个iNow记录当前的索引，然后上一个和下一个按钮根据iNow去走，
    同时注意边界问题，划入锁定划出移动如下：
     var timer = setInterval(oNext.onclick,1000)
        oContainer.onmouseout = function(){
            timer = setInterval(oNext.onclick,1000);
        }
        oContainer.onmouseover = function(){
            clearInterval(timer);
        }

无缝滚动轮播图

思路：思路跟上边一部分相似，因为是无缝滚动，所以是根据图片长度去进行平移，做一个动画，
    并且多加一张1号图，加在5号图后边，如果要从5号图切换到下一个（也就是一号图），
    那么先切换到6号图，然后六号图迅速拽到1号图不加任何动画
avatar
文章
阅读
粉丝