Java Script

一、JS

1、js

　　js:基于对象，解释执行

　　java:面向对象，编译执行

2、html引入js方式

(1)内部js：body的最后一行

　　<script>

　　　　...

　　</script>

(2)外部js

　　<script src="path"></script>

3、js变量和数据类型

(1)变量的声明

　　1）var varName;

　　2）let varName;

(2)赋值式确定变量的类型

　　1）获取变量的实际类型　　var  str = typeof(var);

　　2）string类型

　　　　a. var int = parseInt(str)　　　　　　　　　　　　　　 //字符串转化为整数

　　　　b. var float = parseFloat(str)　　　　　　　　　　　　 //字符串转化为小数

　　　　c. var length = str.length;

　　　　d. var ix = str.indexOf(subStr[ , beginIndex]);　　　　//查找

　　　　f. var subStr = str.substring(subStr[ , beginIndex]);  //截取

　　　　g. var arr= str.split(sepStr)　　　　　　　　　　 　　 //拆分

 　　3）number

　　　　var float = float.toFixed(n) 　　　　　　　　　　　　　//保留精度

　　4）boolean(true  false)

　　　　在JS中：0,"" ,null,undefined 都可以作为false使用

　 　5）object引用类型

　　　　a.数组

　　　　　　var arr = new Array(var1,var2,var3...)

　　　　b.数组的常用属性以及方法

　　　　　　arr.push(item)　　　　　　　　　　　　　　　　　　//尾部追加元素

　　　　　　arr.splice(beginIndex,howManytoDelete,item...)

　　　　　　　　从beginIndex开始删除howManytoDelete个元素，并插入item...

　　　　　　var peak = arr.pop();　　　　　　　　　　　　　　 //获取并删除最后一个元素

　　　　　　var top = arr.shift();　　　　　　　　　　　　　　//获取并删除第一个元素

　　　　　　var str = arr.join(joinStr);　　　　　　　　　　　//将所有数组连城一个字符串

 　　　　c.数组遍历的四种方式

　　　　　　<1>for(var i=0;i<names.length;i++){

　　　　　　　　　　console.log(names[i]);

　　　　　　　　}

　　　　　　<2>for(const i in names){

　　　　　　　　　　console.log(names[i]);

　　　　　　　　}

　　　　　　<3>names.forEach((e,i)=>{

　　　　　　　　　　console.log(i+","+e);

　　　　　　　　})

　　　　　　<3>names.forEach(e=>{

　　　　　　　　　　console.log(e);

　　　　　　　　})

　　　　d.日期

　　　　　　var date = new Date(long);　　　　　　　　　　　　//获取日期

　　　　　　var year = date.FullYear();

　　　　　　var month = date.getMonth();　　　　　　　　　　　//获取月份

　　　　　　　　　　...

　　　　　　var second = date.getSecond();　　　　　　　　　　//获取秒

二、JS获取html标签对象

 　　1、根据选择器获取

　　　　(1)根据id选择器获取唯一对象

　　　　　　var e = document.getElementById(idStr);

　　　　(2)根据class选择器获取对象数组

　　　　　　var arr = document.getElementsByClassName(classStr);

　　　　(3)根据标签选择器获取对象数组

　　　　　　var arr = document.getElementsByTagName(tag name);

　　　　(4)根据表单元素的name属性 获取对象数组

　　　　　　var arr = document.getElementsByName(formName);

　　2、根据家族关系获取

　　　　(1)var child = ref.children;　　　　　　　　　　　　　 //获取子元素数组

　　　　(2)var prevEl = ref.preiousElementSibing;

　　　　　　var nextEl = ref.nextElementSibing;　　　　　　　  //获取兄弟元素

　　　　(3)var parentEl = ref.parentElement;　　　　　　　　　 //获取父级元素

三、JS操作html标签对象　　

　　1、操作值

　　　　（1）表单元素的值：var val = el.value;

　　　　（2）非表单元素的文本：var txt = el.innerText;　　el.innnerText = new _txt;

　　　　（3）非表单元素的内部结构：var structor = el.innerHTML;　　el.innerHTML = new _structor;

　　2、操作属性

　　　　var attrVal = el.attr;

　　　　el.attr = new _attr;

 　　3、操作样式

　　　　（1）具体样式

　　　　　　el.style.xxxYyy = "value";

　　　　（2）类选择器

　　　　　　el.className = "cn";

　　　　　　el.classList.add();

　　　　　　el.classList.remove();

　　　　　　el.classList.toggle();

　　4、操作元素

　　　　添加子元素：el.appendChild(tagEl)

　　　　删除元素：el.remove();