js 基础用法记录

1，获取html页面元素

document.getElementById('id') : 通过 id获取元素。
document.getElementsByName('名字'): 通过name属性获取。
document.getElementsByTagName('标签名')： 通过元素的标签名，来获取一组元素。
document.getElementsByClassName('类名'): 通过类名获取。
document.documentElement ： 获取html元素
document.body? ： 获取body 元素

1.1获取父元素

document.getElementById("demo").parentNode;

1.2修改页面元素

更改元素内容 ： document.getElementById("demo").innerHTML = "Hello  JavaScrip";
更改图片地址： document.getElementById("demo").src="../img/a.jpg"
改变元素样式： document.getElementById("demo").style.fontSize = "25px";
隐藏元素：document.getElementById("demo").style.display="none";
显示元素：document.getElementById("demo").style.display="block";

1.3在移动端我们获取元素方法

document.querySelector() ：? 获取一个
document.querySelectorAll() ： 获取多个

---

2.变量

2.1? ?变量必须以字母开头；
2.2变量也能以$ 和 - 符号；头
2.3变量名称对大小写敏感（y 和 Y 是不停的变量）；

---

3.数据类型

1.字符串 string
2.数字 number
3.布尔
4.数组
5.对象?
6.null
7.undefined

---

4.javascript 事件：详细js 事件地址

onchange：    HTML 元素已被改变
onclick ：    用户点击了 HTML 元素
onblur  ：  元素失去焦点。

---

5.字符串

// search() 方法搜索特定值的字符串，并返回匹配的位置：
let aa = 'stingdesd';
let cc = aa.search('desd');
console.log(cc); // 5

// slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
let aaee = aa.slice(2, 5);
let aabb = aa.slice(-2);
console.log(aaee); // ing
console.log(aabb); // sd

// substring() 类似于 slice()。 不同之处在于 substring() 无法接受负的索引。
let hh = aa.substring(2, 5);
console.log(hh); // ing

// substr() 类似于 slice()。 不同之处在于第二个参数规定被提取部分的长度。
let ccaa = aa.substr(2, 5);
console.log(ccaa); // ingde

// concat() 连接两个或多个字符串
let qqee = 'fafdsfd';
let ppoo = '1234454';
let iiee = qqee.concat(ppoo);
console.log(iiee); //fafdsfd1234454

// trim() 方法删除字符串两端的空白符
let hjhj = '   cede   ';
let cq = hjhj.trim();
console.log(cq); // cede

// 以通过 split() 将字符串转换为数组：
let sas = 'abcdef';
let sasarr = sas.split('');
console.log(sasarr); //["a", "b", "c", "d", "e", "f"]

---

6.数组

// toString() 把数组转换为数组值（逗号分隔）的字符串。
let x = [1, 2, 3, 4, 5, 6, 7, 8];
let xy = x.toString();
console.log(xy); //1,2,3,4,5,6,7,8

// join() 方法也可将所有数组元素结合为一个字符串。
let xyz = x.join(',');
console.log(xyz); //1,2,3,4,5,6,7,8

// pop() 方法从数组中删除最后一个元素：
let po = x.pop();
console.log(po); // 8
console.log(x); //(7)?[1, 2, 3, 4, 5, 6, 7]

// push() 方法（在数组结尾处）向数组添加一个新的元素：
let tfy = x.push(9);
console.log(tfy); // 新数组的长度
console.log(x); // [1, 2, 3, 4, 5, 6, 7, 9]

// shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。
let cyu = x.shift();
console.log(cyu); // 1
console.log(x); // [2, 3, 4, 5, 6, 7, 9];

// unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：
let hup = x.unshift('u');
console.log(hup); //8
console.log(x); //?["u", 2, 3, 4, 5, 6, 7, 9] 先走shift 方法后走unshift方法

// splice() 方法可用于向数组添加新项：
let add = x.splice(8, 0, 'ee', 'ff');
console.log(add); // []
console.log(x); // ["u", 2, 3, 4, 5, 6, 7, 9, "ee", "ff"]
let dsds = x.splice(3, 2);
console.log(dsds); // [4, 5]; splice() 方法返回一个包含已删除项的数组：

// concat() 方法不会更改现有数组。它总是返回一个新数组。
let newsa = ['a', 'b', 'c', 'd', 'e'];
let newsb = [1, 2, 3, 4, 5, 6, 7, 8];
let ab = newsa.concat(newsb);
console.log(ab); // ["a", "b", "c", "d", "e", 1, 2, 3, 4, 5, 6, 7, 8]

// slice() 方法创建新数组。它不会从源数组中删除任何元素。
let newsc = ['one', 'two', 'three', 'four'];
let newsd = newsc.slice(2);
console.log(newsd); // ["three", "four"]


//reverse() 方法翻转数组
let array = [1,2,3,4,5,6];
let arr = array.reverse();
console.log(arr) //[6, 5, 4, 3, 2, 1]


//处理数组  find() filter() some() every() map() reduce()

---

7.时间

---

8、事件

事件：

onchange  元素改变

onclick  元素点击

onmouseover   鼠标移动到元素上

onmouseout   鼠标离开元素

onkeydown  用户按下键盘

onload  浏览器已经完成页面加载

---

9，待续