前端-js基础，做特效之前要掌握的基础知识

1.获取某个dom对象

<div class="showdiv" id="showdiv">
	<div class="title">
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
	</div>
	<div class="title1"></div>
</div>
<div class="bottomdiv"></div>
<script type="text/javascript">
	// 获取的是id为showdiv的dom标签
	var showdiv = document.getElementById("showdiv");

	// 获取所有class=c1的div
	var div_all_c1 = document.getElementsByClassName("c1");
	// 或
	var div_all_c1 = showdiv.getElementsByClassName("c1");
	// 或
	var div_all_c1 = showdiv.children[0].children;

	//获取class=bottomdiv的div
	var bottomdiv = document.getElementsByClassName("bottomdiv")[0];

	//获取所有的div
	var divs = document.getElementsByTagName("div");

    //IE678不支持【返回获取到的元素的第一个】必须写完整选择器
    var divs = document.querySelector(".box");
    var divs = document.querySelector("#d1")
    var divs = document.querySelector("div")


</script>

2.js中的变量名、方法名等可以用 【钱】、【下划线】、【字母】开头，所以

<div id="box"></div>
<script type="text/javascript">
	function $(domid){
		return document.getElementById(domid);
	}
	var box = $("box");
</script>

3.获取dom对象的亲戚们

<div class="showdiv" id="showdiv">
	<div class="title" id="title">
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
	</div>
	<div class="title1"></div>
</div>
<div class="bottomdiv"></div>
<script type="text/javascript">
	function $(domid){
		return document.getElementById(domid);
	}
	var title = $("title");

	// 这是title的爹。很准，没有兼容问题
	var showdiv= title.parentNode;

	//这是title的（空格）兄弟，高级浏览器会将空格和回车看成他兄弟
	//  IE 678不会
	//，所以一般很少这么写,因为获取的很可能是空格，不对
	var title1 = title.nextSibling ;
	//这是title的兄弟 title1， 高级浏览器支持这个属性
	//但是IE678不认识
	//所以也不这么写，因为兼容问题。
	var title1 = title.nextElementSibling;
	//兼容写法这样写
	//但是一般情况下=>不用
	//先支持高级浏览器，如果获取不到这个元素，说明是IE678，换nextSibling
	var title1 = title.nextElementSibling || title.nextSibling;
	//同理还有上一个兄弟(空格兄弟？换行兄弟？)
	var title =  title1.previousElementSibling || title1.previousSibling;

	//第一个孩子
	//同上，可能是个空格孩子？或者是个回车孩子？
	var c1_one = title.firstChild;
	//最后一个孩子
	//同上，可能是个空格孩子？或者是个回车孩子？
	var c1_last = title.lastChild;

	//孩儿们
	// 如此可获取所有孩儿们，（包括空格孩子）
	// 配合nodeType==1 使用，来判断是否为标签元素
	// 麻烦，所以也不用
	var c1s = title.childNodes;
	if(c1s[0].nodeType==1){
		console.log("是个真娃");
	}
	//孩儿们
	// 这个很好用，经常用。
	// 但是需要注意，孩子里不能有注释 <!-- -->，因为注释也算一个娃
	var c1s = title.children;

	// 总结，我们经常用的两个。
	title.parentNode;
	title.children;
</script>

4.给dom对象设置样式，只要是CSS中写的部分都用dom.style.XXX = "";

但是为了泛用性和参数可变性，一般可以改写为dom.style["XXX"]="";

<div class="box"></div>
<script type="text/javascript">
	function $(domid){
		return document.getElementById(domid);
	}
	var box = $("box");
	box.style.background = "url(images/01.jpg) no-repeat";
    box.style["width"] = "200px";
</script>

5.dom对象的创建，添加，克隆等

<div class="showdiv" id="showdiv">
	<div class="title" id="title">
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
	</div>
	<div class="title1"></div>
</div>
<script type="text/javascript">
	function $(domid){
		return document.getElementById(domid);
	}
	var title = $("title");
	var span = document.createElement("span");
	span.style.display = "block";
	span.style.width = "300px";
	span.style.height = "200px";
	span.innerHTML = "雷吼斌抖啊！，我母鸡啊";
	span.onclick = function(){
		console.log(this.innerHTML);
	}
	//让	title 他爹添加这个标签，这样这个span就变成了
	// title的最后一个兄弟
	title.parentNode.appendChild(span);
	// 将title复制一份，追加到他爹后面
	// true 深拷贝。false浅拷
	title.parentNode.appendChild(title.cloneNode(true));
	//也是追加dom标签，不过是指定了位置，如果不指定，默认放最后
	//如下，是给title添加了一个哥哥，这个哥哥的位置是父亲下第一个元素
	title.parentNode.insertBefore(
		title.cloneNode(false) // 待插入的元素
		, title.parentNode.children[0] // 插入到谁前面
		);

</script>

5执行完毕后如下图

6.时间相关

<script type="text/javascript">
	var date = new Date(); // 2022-04-02 15:12:32 153
	var yyyy = date.getFullYear();//年[yyyy]=>2022
	var MM = date.getMonth();//月[0一月,1二月......11十二月]=>3
	var dd = date.getDate();//日[1-31]=>2
	var weekDay = date.getDay();//周几[0周日,1周一......6周六]
	var HH = date.getHours();//小时[24]=>15
	var mm = date.getMinutes();//分种[60]=>12
	var ss = date.getSeconds();//秒钟[60]=>32
	var ms = date.getMilliseconds();//毫秒[1000]153

	//从1970.01.01到现在的毫秒
	var total_ms = date.getTime();//1648883552153	
</script>

7.定时器【一般情况下，在调用setInterval之前，最好都调用一次clearInterval(timerid);】

        这样可以避免很多bug

<script type="text/javascript">
    var timerid = 0;
    //fun 反复待执行方法
    //30 间隔的毫秒数
    timerid = setInterval(fun, 30);

    //fun 只执行一次的方法
    //30 多少毫秒后才执行
    timerid = setTimeout(fun, 30);
</script>

8.数组的常用方法（json对象也可以）【这个狠tm重要】

var arr = [1,4,7];
// push()方法可以向数组的末尾添加一个或多个元素，并返回新的长度
arr.push(9,11);
console.log(arr);

var arr = [1,4,7];
// unshift() 方法可以向数组的前面添加一个或多个元素，并返回新的长度
arr.unshift(9,11);
console.log(arr);

var arr = [1,4,7];
// pop() 方法可以删除数组的最后一个元素，并返回这最后一个值
var temp = arr.pop();
console.log("arr:"+arr);
console.log("temp:"+temp);

var arr = [1,4,7];
// shift() 方法可以删除数组的第一个元素，并返回这第一个值
var temp = arr.shift();
console.log("arr:"+arr);
console.log("temp:"+temp);

 

8.绑定事件

//给box1绑定事件f1,特点：唯一，如果后续还有onclick绑定事件，那么只保留后续的绑定
box1.onclick = f1;
//特点：可以绑定多个，当被click的时候，被绑定的方法都会执行
box1.addEventListener("click", f1);
//接触绑定某个方法
box1.removeEventListener("click", f1);

function f1() {
    alert(10);
}