JavaScript学习笔记

数据类型及其操作

数据类型的值：基本类型和引用类型
基本类型包括：Null、Undefined、Number、String、Boolean。引用类型主要包括：Object、Array、Date、RegExp、Function。Undefined：未初始化的变量，null：空对象指针
返回数据类型
typeof console.log(typeof age）
类型转换：
数值转换Number()、parseInt()、parseFloat() 会忽略前面的空格，直到找到第一个非空字符直到字符串末尾或者遇到符合数据类型为止 ：parseFloat(“34.5.6”); //34.5 parseInt(“xyx123”); //NaN parseInt(“123xyx”); //123
字符串转换：var num = 123; num.toString(); //“123” var boo = false;boo.toString(); //“false”
基本数据类型的运算
运算是从左往右; 任何类型的变量与string类型的变量拼接就会被强转为string
var str1 = 10 + 10 + ‘10’; //2010 （左边先number相加后与字符拼接）
var str2 = ‘10’ + 10 + 10; // 101010
var str3 = (10 + ‘10’) + 10; // 101010

数组操作
var len = arrayObj. push() 添加到数组未尾 数组新长度
var len = arrayObj.unshift()数组开始返回数组新长度
arrayObj.pop();移除最后一个元素并返回该元素值
arrayObj.shift(); 移除最前一个元素并返回该元素值
arrayObj.concat();返回数组的拷贝数组，注意是一个新的数组，不是指向
arrayObj.reverse(); 反转元素（最前的排到最后、最后的排到最前），返回数组地址
arrayObj.sort();对数组元素排序，返回数组地址

== 值比较 === 类型比较

函数

有传参有返回值

function sum(num1, num2) {
    return num1 + num2;
}
var result = sum(12, 323);

匿名函数

 var res = function () {
        console.log('我是匿名函数');
   }  
   //调用匿名函数
   res();

创建对象

  var Dog = function (name, age, dogFriends, height) {
        this.name = name;
        this.age = age;
        this.dogFriends = dogFriends;
        this.height = height;
        this.eat = function (someThing) {
            console.log(this.name + '吃' + someThing)
        };
        this.run = function (someWhere) {
            console.log(this.name + '跑' + someWhere)
        }
    };
    var dog3 = new Dog('安黄', 10, ['wq'], 1.55);

JS两大内置对象 window 和 document

window的用法

第一大用法:
1> 所有的全局变量都是window的属性
2> 所有的全局函数都是window的函数
第二大用法:动态跳转
window.location.href = ‘http://www.520it.com’;

页面加载js有四种方式

1. window.onload = function(){}; —-js
2. $(window).load(function(){});——Jquery
3. $(document).ready(function(){});–Jquery
4. $(function(){});———————Jquery

1.2表示：页面全部加载完成（引用文件，图片）在加载内部函数，且只能执行一个（当文件由多个onload或者load，只加载最后一个）
3.4在window.onload执行前执行的，在DOM加载完毕后，页面全部内容（如图片等）完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。

DOM文档加载步骤：
1.解析HTML结构
2.加载外部的脚本和样式文件
3.解析并执行脚本代码
4.执行$(function(){})内对应代码
5.加载图片等二进制资源
6.页面加载完毕，执行window.onload

document用法

1.动态的获取网页中所有的标签
2.可以对获取到的标签进行增删改查操作(CRUD)

动态的获取网页中所有的标签
//通过标签拿到对应的标签 取出的是数组

var img = document.getElementsByTagName('img')[0];

// 通过类名拿到对应的标签 取出的是数组

var img = document.getElementsByClassName('icon')[0];

// 通过id拿到对应的标签

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

//通过标签拿到对应的标签

var oUl = document.getElementById('list1');
var aLi2 = oUl.getElementsByTagName('li');

对获取到的标签进行增删改查
添加

 document.write('<input type="file">');

添加新建一个标签

 var div = document.createElement('div');
  div.className = 'myDiv';
  div.style.width = '500px';
  div.style.height = '150px';
document.body.appendChild(div);

添加标签下面添加标签

  var img = document.createElement('img');
  img.src = 'images/img_01.jpg';
  div.appendChild(img);

删除标签

   var mt = document.getElementsByClassName('mt')[0];
   document.body.removeChild(mt);

修改元素包括的内容

	var oDiv = document.getElementById('div1');
	// 读取元素里面的内容
	var sTr = oDiv.innerHTML;
	// 写元素里面的内容
	oDiv.innerHTML = "修改的文字";
	oDiv.innerHTML = "<a href='http://www.itcast.cn'>传智播客</a>"

查看网页中所有的HTML

  console.log(document.body.outerHTML);
  console.log(document.body.innerHTML);

修改div里面的文字
div.innerText
oDiv.id 获取标签的id

倒计时 毫秒
var timer = setInterval(function(){ },1000);
clearInterval(timer);

HTML中href、src区别

<script src="js/index.js" type="text/javascript"></script>

<link href="reset.css" rel=”stylesheet“/>

src用于替换当前元素；href用于在当前文档和引用资源之间建立联系

网页换肤 引入css 的link可以打上id 通过切换link的href来切换css样式

<link rel="stylesheet" type="text/css" href="css/skin01.css" id="link01">
<script type="text/javascript">
	window.onload = function(){
		var oBtn01 = document.getElementById('btn01');
		var oBtn02 = document.getElementById('btn02');
		var oLink = document.getElementById('link01');

		oBtn01.onclick = function(){
			oLink.href = "css/skin01.css";
		}
		oBtn02.onclick = function(){
			oLink.href = "css/skin02.css";
		}
	}

封装修改传参样式

function fnChangestyle(mystyle,val,elementID){
	var oDiv = document.getElementById(elementID);
	oDiv.style[mystyle] = val;
}
fnChangestyle('fontSize','30px','div1');

tab选择

   //封装一下id去标签
    function $(id){
            return typeof id === 'string' ? document.getElementById(id) : id;
    }
    //当网页加载完毕的时候
    window.onload = function(){
   // 取出头部所有的li标签 和  li标签所对应的内容完美利用类取出的是数组根据选择切换ID切换样式
        var lis = $('tab-header').getElementsByTagName('li'); // 数组
        var divs = $('tab-content').getElementsByClassName('dom');
        // 判断
        if(lis.length != divs.length) return;
        // 遍历
        for(var i=0; i<lis.length; i++){
            var li = lis[i];
            // 增加一个id
            li.id = i;
            console.log(li);
            //监听鼠标在li上面的移动事件
            li.onmousemove = function(){
                for(var j=0; j<lis.length; j++){
                    // 让所有的li都不被选中
                    lis[j].className = '';
                    divs[j].style.display = 'none';
                }
                // 让当前的li被选中
                this.className = 'selected';
                divs[this.id].style.display = 'block';
            }
        }
    }