WINDOW对象
Location对象
Screen对象
js对数组操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组函数</title>
</head>
<script>
var a = [1, 2, 3, 4, 5]
console.log(a) //数组
/**
* join()
*/
var strArr = a.join();
console.log(strArr) //1,2,3,4,5
//join("")转换成不带逗号的字符串
var strArr2 = a.join("");
console.log(strArr2) //12345
//join("-") 以指定占位符拼接
console.log(a.join("-")); //1-2-3-4-5
/**
* 排序
* reverse()倒序
* sort()
* sort(function()) 按照指定规则排序
*/
console.log(a.reverse()); // [5, 4, 3, 2, 1]
//sort() 排序
var b = [99, 2, 55, 6, 11]
console.log(b.sort()); //sort会将数值转换成字符串后排序 比如55比6小
//结果 [11, 2, 55, 6, 99]
//sort(function()) 按照指定规则排序
var sortArr = b.sort(function (x, y) {
return x - y
})
console.log(sortArr) //[2, 6, 11, 55, 99]
/**
* concat 连接数组
*/
var arr1 = [1, 2]
var arr2 = [3, 4]
console.log(arr1.concat(arr2, [5, 6])) // [1, 2, 3, 4, 5, 6]
/**
* slice(start,end) 截取
* 如果有负数就用负数加数组长度 来确定下标
*/
var arr3 = [0, 1, 2, 3, 4, 5, 6]
console.log(arr3.slice(0, 1)) //[0]
console.log(arr3.slice(-5, 5)) //[2,3,4]
/**
* splice 删除/插入/替换
* splice(index,count) 删除
* splice(index,0,arg1,...arg2) 插入
* splice(index,count,arg1,....arg2) 替换
*/
var arr4 = ['a', 'b', 'c', 'd']
var result = arr4.splice(0, 3)
console.log(arr4) //[d]
arr4 = ['a', 'b', 'c', 'd']
arr4.splice(2, 0, 'c', 'd')
console.log(arr4) //[a,b,c,d,c,d]
arr4 = ['a', 'b', 'c', 'd']
arr4.splice(2, 2, 'e', 'f')
console.log(arr4) //[a,b,e,f]
/**
* indexof() 检测指定值的位置
*/
var arr5 = [2, 3, 5, 7, 4, 6, 7]
console.log(arr5.indexOf(7)); //3
console.log(arr5.indexOf(7, 4)) //6
</script>
<body>
</body>
</html>
js对字符串操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字符串</title>
</head>
<body>
<script>
/**
* charAt(index) 取出指定下标字符
*/
var str1 = "hello";
console.log(str1.charAt(0)); //h
console.log(str1[0]); //h
/**
* indexOf() lastIndexOf() 返回指定字符串在字符串中出现的位置
*/
console.log(str1.indexOf("l")); //2
console.log(str1.lastIndexOf("l")); //3
console.log(str1.indexOf("a")); //-1
/**
* slice(),substr(),substring() 字符串截取
*/
console.log(str1.slice(0, 1)); //h
console.log(str1.substr(2, 2)); //ll
console.log(str1.substring(3, 4)); //l
/**
* 练习，输入字符串返回字符串对应的后缀 3种方法
*/
var str2 = "1.txt"; //输入的字符串
console.log(str2.substring(str2.lastIndexOf("."), str2.length));
console.log(str2.slice(str2.lastIndexOf("."), str2.length));
console.log(str2.slice(str2.lastIndexOf(".")));
/**
* split(分隔符) 分割转换成数组
*/
var arrStr1 = str1.split("");
console.log(arrStr1); //["h", "e", "l", "l", "o"]
/**
* replace("要替换的","替换后")
*/
var str3 = "111,222";
var newStr = str3.replace("1", "1,");
console.log(newStr); //1,11,222
</script>
</body>
</html>
js对DOM操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dom元素方法</title>
<style>
.box {
color: blue;
}
</style>
</head>
<body>
<div id="box" data-type="str">box</div>
<ul>
<li>前端</li>
<li>UI</li>
<li>设计</li>
<li>java</li>
<li>c</li>
</ul>
</body>
<script>
/**
* document.getElementById("") 根据ID获取元素
*/
var box = document.getElementById("box");
console.log(box); //<div id="box"></div>
/**
* document.getElementsByTagName 获取整个页面所有的指定元素
*/
var li = document.getElementsByTagName("li");
console.log(li);
/**
*
* 设置元素样式
* 元素.style.样式 样式必须要用驼峰
*
*/
box.style.color = "red"; //设置box中的字体颜色为红色
box.style.fontSize = "40px"; //驼峰文字大小
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].style.background = "blue";
}
/**
* innerHTML 获取标签中的值
* innerHTML= 指定标签中的值
*/
var html = document.getElementById("box");
console.log(html.innerHTML);
html.innerHTML = 'new-box';
/**
* className() 设置类，如果标签已经有class 则覆盖
*/
html.className = "box";
/**
* getAttribute("id") 获取指定属性
* setAttribute("data-type") 设置属性
* removeAttribute 删除属性
*
*/
console.log(html.getAttribute("id")); //box
console.log(html.getAttribute("class")); //box
console.log(html.getAttribute("data-type")); //自定义属性 str
html.setAttribute("dataColor", "red"); //datacolor="red"
html.removeAttribute("dataColor");
</script>
</html>
