2.JSJQ课程期末复习之复习JS2

1.dom包括css-dom和html-dom

 document.html.head.title
         .body
         .h1
  #下面才是常用的
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
         

2.节点的属性

1. getElementsByName(“”).
   parentNode
   childNodes
   firstChild第一个孩子 || firstElementChild 可以解决兼容性问题
   lastChild || lastElementChild
   nextSibling 下一个兄弟
   previousSibing || previousElementSibing
   nodeType 1是一个元素 2 3是文本
   nodeName type为3 为 #text
   nodeValue 是text的话可以拿到节点里面的文本

3.只保留2位小数

 .toFixed(2);

4.操作节点

1. 属性
   html:
   name=“book”;
   name=“book”;
   js:
   .getAttribute(“xxx”);
   .setAttribute(“src”,“./dogdog.jpg”);
   book[0].check
2. 创建节点
   document.getElementsByTagName(“div”)[0];
   document.createElement(“img”);
   .appendChild(img);
   //克隆
   xx.cloneNode(false);
   xx.insertBefore(copyNode,xx.firstChild);//要在一个节点下,第三个是节点的插入位置
3. 删除节点
   xxNode=xxxgetElement();//必须先得到节点
   xxNode.parentNode.removeChild(xxNode);//父节点删除子节点
   oldNode.parentNode.replaceChild(newNode,oldNode);//

3.改变样式属性

1. .style.color=‘#aaaaa’;
   .backgroundColor=“#xxxxxx”
   .zIndex=“100”
   .borderBottom=“none”; //底边框 solid 1px #aaa
   .display=“none”; //block显示
   .position=“relative”;
   .top=“10px”;
   .className=“xxx”;

3.事件 οnmοuseοver=“over” 在上面 οnmοuseοut=“out” 离开
4.在html可以写this,代表当前这个元素的对象

 <div id="cart">
   <p onclick="del(this)">p>
 div>
 del(obj){
     var delNode=obj.parentNode;
     delNode.parentNode.removeChild(delNode);

5.js改变元素(css参数的驼峰命名)

  xxdom.style.color="#aaa";
              .className="";
              .currentStyle#浏览器兼容
              .value 获取表单的值
              .setAttribute("src","image/dog.jpg");
  }

6.随机数

   Math.floor(Math.radom()*4);  //[0-4)
   //div添加img节点
     div.appendChild(img);

7.滚动位置(相当于css的position:fixed的js实现) 需要兼容谷歌和火狐和ie

document.body.scrollTop;
	
function cl(){
	document.querySelector("#float").style.display = "none"
	document.querySelector("#close").style.display = "none"
}
function place(){
	console.log("aaa");
	closeObject = document.querySelector("#close");
	floatObject = document.querySelector("#float");
	//支持IE
	if(closeObject.currentStyle){
		console.log("aaa1");
		console.log(closeObject.currentStyle.style);
		closeTop=closeObject.currentStyle.top;
		closeLeft=floatObject.currentStyle.left;
		floatTop=closeObject.currentStyle.top;
		floatLeft=floatObject.currentStyle.left;
	}else{
		
		
		closeTop = parseInt(document.defaultView.getComputedStyle(closeObject,null).top)//支持IE9以上版本,支持火狐,只读属性
		closeLeft = parseInt(document.defaultView.getComputedStyle(closeObject,null).left)
		floatTop = parseInt(document.defaultView.getComputedStyle(floatObject,null).top)
		floatLeft = parseInt(document.defaultView.getComputedStyle(floatObject,null).left)
	}
	
}
function roll(){
	console.log("bbb");
	let closeScrollTop = parseInt(document.documentElement.scrollTop||document.body.scrollTop)
	let closeScrollLeft = parseInt(document.documentElement.scrollLeft || document.body.scrollLeft)
	let floatScrollTop = parseInt(document.documentElement.scrollTop||document.body.scrollTop)
	let floatScrollLeft = parseInt(document.documentElement.scrollLeft||document.body.scrollLeft)
	
	closeObject.style.top = closeTop+closeScrollTop+"px";
	closeObject.style.left = closeLeft+closeScrollLeft+"px";
	floatObject.style.top = floatTop+floatScrollTop+"px";
	floatObject.style.left = floatLeft+floatScrollLeft+"px";
}

window.onload = place; //启动时加载这个函数
window.onscroll = roll;  //监听函数,如果滚动条滚动可以调用函数

8.js script标签写了src,里面不能写内容 !!!