Javascript 初级

函数

.index(i)    //索引
typeof    //检测数据类型
arguments    不定参
typeof() 检查变量数据类型
​​​.length 返回数组、字符串等...的长度，数组的可以设置长度
isNaN() 判断是否NaN  用于检查其参数是否是非数字值
.charCodeAt() ASCII码转换
encodeURI() 将空格编码
encodeURIComponent() 将特殊符号编码
decodeURI() 将空格解码
decodeURIComponent() 将特殊符号解码
navigator.plugins 检测浏览器插件
.value 获取input的值
eval() //可计算某个字符串，或者执行其中的的 JavaScript 代码
event.preventDefault() 取消默认行为

Javascript 内置函数

---

字符串数组函数

数组或字符串.indexOf() 
    查找数组索引，第二个参数为开始查找的索引 (字符串亦可)
    查找到的结果的空是0，不是-1

数组或字符串.lastIndexOf() 
    倒序查找数组，从后面查，但索引也是从前面算（字符串亦可）

字符串函数

.substring(2,4) 
分割字符串(至少一个参数,可负数)
(顾头不顾尾，参数是位置)

.slice(2) 
(第二个参数是返回的字符数)
.substr(2,4)

清除字符串的前后空格
.trim()

文本小写、大写
.toLowerCase()
.toUpperCase()

.split() 字符串分割成数组
.charAt(i)    从大的字符串截取其中的某一位

parseInt() 从字符串中读取数字，从左到右提取直到不是数字的东西，开始没有数字就是NAN not a number
parseFloat()   浮点数(小数)相加 指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。

数组函数

Array.isArray() 检查是否数组

.toString() 将数组转字符串(二者在对象调用和转换时间有所区别)
.toLocaleString() 将数组转化为字符串

.join('|') 将数组元素指定字符分割成字符串


栈(瓶子) 后进先出 
.push() 向数组最后添加内容
.pop() 删除数组最后一项

队列 先进先出
.unshift() 向数组开头添加一项
.shift() 删除数组第一项

.reverse() 数组倒序

var str = 'aa-bb-cc-dd';
str.split('-');使用括号里的元素分割字符串变成数组

oUl.appendChild(oLi);在之前插入
oUl.insertBefore(oLi,aLi[0]);在之后插入

.sort() 数组排序(默认升序但按ASCII码比对)
var str = [12,34,5,3,6,8];
function px(a,b){
    return a-b;  位数比对，1、-1和0的问题
}
str.sort(px); 
console.log(str);
/*
* 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
* 若 a 等于 b，则返回 0。
* 若 a 大于 b，则返回一个大于 0 的值。
*/

.concat() 数组合并，可连接数组、对象或者字符，通常不用拼接字符串


.slice(1，3) 从数组索引向后切割到结尾，返回一个新的数组，如有第二个参数，从索引开始，取到参数的索引，参数亦可为负，顾头不顾尾，就是说，第一个参数为1，第二个参数如果为3，从第2个值开始，就取到第4个数组值，负数值计算的时候用数组元素的总和加上负数的值

.splice() 删除 插入 替换 第一个参数是开始删除索引位置(只写一个参数就全部删除了)，第二个是结束删除索引位置，第三个是替换的元素，第二个元素写0就是不删除任何元素


迭代
filter() 将数组元素过滤
.filter(function(item,index,array){
    return a > 22
}

将数组所有元素变化并返回一个新的数组&元素
.map(function(item,index,array){
    return a * 2
}

数组遍历
.arr.forEach(function(item,index,array){
    console.log(item);
});

Date时间对象

new Date(1995,08,06,14,05,08); 时间的创建，4种方式，里面写的形式不一
.getDate(); 获取月份的第几天
.getMonth(); 获取月份 从0开始
.getFullYear(); 获取年份
.getDay();获取星期的那一天，0-6 星期日是0

.getHours(); 时 从0开始
.getMinutes(); 分 从0开始
.getSeconds(); 秒 从0开始


获取时分秒上下午

.toDateString(); Sat Dec 05 2020
.toTimeString(); 16:05:21 GMT+0800 (中国标准时间)
		
常用
.toLocaleTimeString();下午4:05:21
.toLocaleDateString();2020/12/5
.toLocaleString();2020/12/5 下午4:05:21
		
.toUTCString();Sat, 05 Dec 2020 08:05:21 GMT

类型转换

parseInt(); 整形转换
parseFloat(); 浮点型转换

Number(); 转换数字
    Number(xxx.toFixed());保留几位小数点

toString(); 可以将所有的的数据都转换为字符串，但是要排除null 和 undefined
String(); 可以将null和undefined转换为字符串，但是没法转进制字符串

其它函数

 地址栏的信息函数

console.log(location.host); //带端口号的服务器
console.log(location.hostname); //获取没有端口号的服务器名称
console.log(location.href); //完整的url 有中文编码
console.log(location.pathname); //获取端口号后面整个文件名和目录
console.log(location.port); //获取端口号
console.log(location.protocol); //获取协议名 例http
console.log(location.search); //地址栏查询的名称+值

跳转网页

location.href = "http://www.baidu.com";//跳转链接
location.replace("http://www.baidu.com"); //无历史记录
location.reload(); //刷新网页

 JavaScript 数学对象

Math //数学运算

数学函数
Math.max();最大值
Math.min();最小值
Math.abs    //绝对值
    .apply(null,arr); //遍历数组比较大小

Math.ceil() 天花板 小数点向前进一位 向上取整
Math.floor() 地板 舍一位 向下取整
Math.round() 四舍五入

 Math.random() 0-1随机数

BOM&Window

window.open('http://www.baidu.com','_self');

//弹框
confirm,提问弹框，返回ture或false
prompt,弹出输入框，返回字符串或null

window.close();关闭窗口(注意，火狐脚本不得关闭非脚本打开的窗口，就是只能关闭脚本打开的窗口)

setTimeout(); 代码写在里面，延迟执行

setInterval(); 定时器
clearInterval(); 清除定时器

window.onload = function(){};
location //跳转网页

事件：

.onclick 鼠标单击
.onMouseOver//鼠标移入
.onMouseOut//鼠标移出
.onmousedown//鼠标按下
.onmouseup//鼠标抬起

.onpress//键盘按下抬起
.onkeydown//键盘按下
.onkeyup//键盘抬起
.keyCode//获取键盘的code值

.onLoad//页面加载之后立即执行一段JavaScript
.onUnLoad//页面关闭之前立即执行一段JavaScript

.onscroll,元素滚动时执行
.onresize,浏览器被重置大小时执行

.oncontextmenu //鼠标右键菜单，阻止默认行文， return false

.onsubmit //表单提交事件


.onchange 
在域的内容改变时发生 支持该事件的 HTML 标签：
<input type="text">, <select>, <textarea>
支持该事件的 JavaScript 对象：
fileUpload, select, text, textarea

.onselect 文本框内容被选中使劲
.onfocus 光标聚焦事件
.onblur 光标失去焦点事件
.onload 网页加载事件

JQuery选择器

//层次选择器：
$("div span");//直接子元素
$(".one + div");//紧跟.one的兄弟元素div
$(".one ~ div");//.one元素后面所有的兄弟元素

//过滤选择器
$("div:first");//所有div元素中第一个元素
$("div:last");//所有div元素中最后一个元素
$("div:not(.myClass)");//选取class不是myClass的div元素
$("div:even");//选取索引是偶数的div,索引从0开始
$("div:odd");//选取索引是奇数的div
$("div:eq(1)");//选取索引为1的div元素
$("div:gt(1)");//选取索引大于1的div元素(不包括1)
$("div:lt(5)");//选取索引小于5的div元素(不包括5)
$(":header");//选取网页中所有h1-h6元素
$("div:animated")//选取正在执行动画的div元素
$(":focus")//选取当前获取焦点的元素

//内容过滤选择器
$("div:contains('文本')");//选取含有文本的div元素
$("div:empty");//选取不包含子元素的div空元素(包括文本元素)
$("div:has(p)");//选取含有p元素的div元素
$("div:parent");//选取拥有子元素(包括文本元素)的div元素

//可见性过滤选择器
$(":hidden");//选取所有不可见元素
$(":visible");//选取所有可见元素

//属性过滤选择器
$("div[id]");//选取拥有属性id的元素
$("div[title=text]");//选取属性title等于text的div元素,加个!是不等于
$("div[title^=text]");//选取属性title以text开头的div元素,加个$是结束
$("div[title*=text]");//选取属性title含有text的div元素
$('div[title|="en"]');//选取属性title等于en或者以en为前缀的元素(该字符串后跟一个连字符'-')
$("div[id][title$='test']");//选取拥有属性id，并且属性title以test结束的div元素

//子元素过滤选择器
$("div:nth-child(index/even/odd/equation)");//下标以1开头
$("div:first-child");//选取每个父元素的第一个子元素
$("div:last-child");//选取每个父元素的最后一个子元素
$("div:only-child");//选取每个父元素的唯一一个子元素

//表单对象过滤选择器
$("#form1:enabled");//选取id为form1的表单内所有可用元素
$("#form1:disabled");//选取id为form1的表单内所有不可用元素
$("input:checked");//选取所有被选中的input元素
$("select option:selected");//选取所有被选中的选项元素

//表单选择器
$(":input");//选取所有input textarea select button元素
$(":text");//选取所有单行文本框
$(":password");//选取所有密码框
$(":radio");//选取所有单选按钮
$(":checkbox");//选取所有多选框
$(":submit");//选取所有提交按钮
$(":image");//选取所有图像按钮
$(":reset");//选取所有重置按钮
$(":button");//选取所有按钮
$(":file");//选取所有上传域

DOM函数

.className('string')    //设置或返回元素的 class 属性   不能直接用.class
.innerHTML()    //获取或者设置一段字符串或者html
//创建节点添加节点
var oLi = document.createElement("li");//创建一个元素
oLi.innerHTML=oTxt.value; 
oUl.appendChild(oLi);//插入父节点oUl
oUl.insertBefore(oLi,aLi[0]);//在父节点前边插入

removeChild    //移除节点
this.parentNode    //父节点
oUl.removeChild(this.parentNode);//移除父节点


//获取子节点
childNodes
nodeType
children
parentNode
offsetParent
children//获取所有子节点

//获取父节点
parentNode
获取定位的父节点(就是找到relative)

//上一个下一个兄弟节点
oLi.previousSibling.style.background="red";
oLi.nextSibling.style.background="green";
oLi.previousElementSibling.style.background="blue";
oLi.nextElementSibling.style.background="yellow";


.nodeName 节点名称
.nodeType 节点类型
.nodeValue 节点值

    .attributes 获得元素属性的集合
    .childNodes 获得元素子节点集合
    .firstChild 获得第一个元素子节点
    .lastChild 获得最后一个元素子节点
    .prentNode 获得父元素节点
    .nextSibling 获得下一个兄弟节点
    .previousSibling 获得上一个兄弟节点

.setAttribute() 设置属性(class 等...)
.createTextNode() 创建文本节点

//父节点操作
.insertBefore(插入的新节点，定位的节点) 向前插入节点
.appendChild() 向节点插入最后一个节点

.innerHTML() 设置或获取位于对象起始和结束标签内的HTML
.removeChild() 删除节点
.replaceChild(新节点，旧节点) 替换节点 


//设置、获取、删除元素
oTxt.value = '123';
oTxt['value'] = '456';
oTxt.setAttribute('value','789');
alert(oTxt.getAttribute('id'));
oTxt.removeAttribute('id');


//尺寸及坐标
var oEvent=ev||event;
scrollTop距离页面顶点距离
scrollLeft距离页面左距离
scrollLeft元素内容距离左的距离
scrollTop元素内容距离顶部的距离
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//兼容
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;//兼容

clientX //可视区鼠标X坐标
clientY //可视区鼠标Y坐标
clientHeight //元素可视内容区域的高度
clientWidth //元素可视内容区域的宽度

.offsetWidth    //获取宽度，有影响的都获取，padding border有影响
.offsetHeight    //获取高度
.offsetLeft    //获取左边距，margin和absolute有影响
.offsetTop    //获取上边距

理论

运算

var  变量前三个字母

在js内 + 是连接符，也可以作为运算+，-，*，/，%，()，++， --，

//隐式类型转换
===、==、-、*、/ 先转换类型，加法在js里字符串连接，数字加法，

报错

uncaught：未捕获； 
syntax： 语法； 
invalid：无效的； 
unexpected: 意外的； 
token：表征，记号；

 函数小例子 

比较

var hello= 12;
var age= 13;
document.write(hello==age);
//==，!=，>，<，>=，<=  是比较运算符 结果是布尔值false
//字符串在比较的时候底层会自动转换G比H要小

    <script>
        function print(s) {
            document.write(s);
        }
        function println(s) {
            print(s + "<br />");
        }
        //--------------------------------------------------
        var u = 42;
        var v = 24;
        function gcd(u, v) {
            var a = u;
            var b = v;
            var temp = v;
            while (v != 0) {
                temp = u % v;
                u = v;
                v = temp;
            }
            return u;
            // print(a+"和"+b+"最大公约数是"+u+"<br />");
        }
        println(u + "和" + v + "最大公约数是" + gcd(u, v));
        //--------------------------------------------------
        function max(a, b) {
            return a > b ? a : b;
        }
        println(max(42, 24));
        function add(a, b){
            return a+b;
        }
        function cal(f, a, b){
            return f(a, b);
        }
        println(cal(add, 5, 6));
    </script>

数组追加

数组函数

.join()方法将数组中的所有元素连接成一个字符串。

<script>
    var colors = ["red","blue","green"];
    colors[colors.length] = "black";
    colors[colors.length] = "brown";//length永远比下标大一号，相当于追加，可扩展性代码
    console.log(colors.toString());//把一个逻辑值转换为字符串，并返回结果
    console.log(colors.valueOf());//String.valueOf就转为字符串，Integer.valueOf就转为基本类型
    console.log(colors.join("|"));//将数组中的所有元素连接成一个字符串
</script>

先进后出，进栈出栈，如果没有数组里没有元素的话打印下标是undefind未定义

<script>
        var colors = new Array();
        var count = colors.push("red","green");//在栈后追加一个
        var item = colors.pop();//弹出最后追加的元素
</script>

后进先出

<script>
    colors.shift();//删除并返回数组的第一个元素
</script>

排序

<script>
function compare(value1,value2){     //排序的函数
    if (value1 < value2) {
        return 1;
    }else if(value2 > value1){
        return -1;
    }else{
        return 0;
    }
}
var values = [0,1,10,5,15,20,70];
console.log(values.sort(compare));//0,1,10,15,20,5,70
console.log(values.reverse(compare));//70,5,20,15,10,1,0
</script>

数组的  删除、插入、替换

//splice(开始位置，删除个数，插入元素, , ,)
splice(0,2)//从0开始，删除2个数组元素
splice(2,0,"red","green")//从2开始，删除0个数组元素,插入元素
splice(2,1,"red","green")//从2开始，替换"red","green"数组元素

对象

<script>
    var book = new Object();
    book.title = "html5";
    book.color = "red";
    book.name = "gz";
    book.age = "18";
    book.sex = "男";
    // alert(book);
    // console.log(book);
    delete book.color;//删除对象中的某一项
    // console.log(book);
    for( var x in book){
        console.log(x+"="+book[x]);
    }
    
    //打印所有document对象中的元素
    for ( x in window.document ) {
        document.write(x+"<br />");
    }
</script>

document.write('Hello Word');
/*
点是一个运算符，点左边的对象，做右边的动作
document做write的动作，给write一个参数，引号是字符串
让Hello Word写到document里面
*/

定时器

<body onload="setInterval('update()',1000);">
<script>
    var count = 10;
    function update(){
        if(count >= 0){
            status = count--;
            alert(status);
        }
    } 
</script>

var timer = null;
var num = 0;
timer = setInterval(function(){
    num++
    if(num>3){
        clearInterval(timer);
		return
	}
	console.log("数字为："+num);
},1000)

计算代码执行时间

console.time();
for (i = 0; i < 10000; i++) {
    console.log(i);
}
console.timeEnd();

初始化事件

<body onLoad="alert('hi')">
/*
在页面或图像加载完成后立即发生
支持该事件的 HTML 标签：
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

支持该事件的 JavaScript 对象：
image, layer, window
*/

网页换肤，切换css的href

<!--网页换肤-->
<link id="css1" rel="stylesheet" href="./css1.css">
<button onclick="red()">红色</button>
<button onclick="green()">绿色</button>
<script>
    function red(){
        document.getElementById('css1').href='./css1.css';
    }
    function green(){
    	document.getElementById('css1').href='./css2.css';
    }
</script>

提取行间事件

<style>
	#div1{width: 100px; height: 100px; background:red;}
</style>
<div class="box" id="div1"></div>
<script>
	window.onload = function(){
		var oDiv = document.getElementById('div1');
		oDiv.onmouseover = toGreen;
		oDiv.onmouseout = toRed;
	}
	function toGreen(){
		var div1 = document.getElementById("div1");
		div1.style.width='200px';
		div1.style.height='200px';
		div1.style.background='green';
	}
	function toRed(){
		// var div1 = document.getElementById("div1");
		div1.style.width='100px';
		div1.style.height='100px';
		div1.style.background='red';
	}
</script>

随机数

function random(max,min){
    return Math.floor(Math.random()*(max-min)+min);
}
random(0,36);
[0,1,2,3,4,5,6,7,8,9,'Q','W','E','R','T','Y','U','I','O','P','A','S','D','F','G','H','J','K','L','Z','X','C','V','B','N','M'];

 Document 对象属性

document.title

打开新窗口

var oNewWin = window.open('about:blank');
oNewWin.document.write(oTxt.value);