Web之一 JS

最新推荐文章于 2022-10-04 18:10:25 发布

icanhaha

最新推荐文章于 2022-10-04 18:10:25 发布

阅读量364

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/icanhaha/article/details/50699486

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.js各种弹窗

1).alert
	alert("hello");
2).confirm
	if(confirm("how are you?") == true){
		document.write("好");
	}else{
		document.write("不好");
	}
3).prompt
	var scope = prompt("请输入你的成绩","100");
	alert("我的成绩是： " + "scope");

2.打开、关闭窗口

	var win = window.open(url);
        win.close();

3.事件

1)onclick 鼠标点击事件
	<input type="button" οnclick="message()">
2)onmouseover 鼠标经过事件
	<input type="button" οnmοuseοver="message()">
3)onmouseout 鼠标移开事件
	<input type="button" οnmοuseοut="message()">
4)onfocus 光标聚焦事件
	<input type="button" οnfοcus="message()">
5)onblur 失焦事件
	<input type="button" οnblur="message()">
5)onselect 选中事件
	<textarea οnselect="message()">hello！</textarea>
5)onchange 内容改变事件
	<input type="text" οnchange="message()">
5)onload 加载事件
	<body οnlοad="message()">
	  欢迎学习JavaScript。
	</body>
5)onunload 卸载事件
	<body οnunlοad="message()">
	  欢迎学习JavaScript。
	</body>

4.内置对象

4.1 String对象

	var str = "Hello World";
	//全部大写
	str.toUpperCase();
	//全部小写
	str.toLowerCase();
	//返回指定位置的字符
	str.charAt(2);
	//返回字符串首次出现的位置,下面为o第二次出现的位置，第二个参数为开始索引的位置
	str.indexOf("o",str.indexOf("o")+1)；
	//切割
	str.split(";");
	//截取字符串
	str.substring(startPos,endPos);
	str.substr(startPos,length);

4.2 Math对象

	//PI常量
	Math.PI;
	//向上取整
	Math.ceil(6.3);//7
	//向下取整
	Math.floor(6.3);//6
	//四舍五入
	Math.round(6.3);
	//随机数 0~1
	Math.random();

4.3 数组对象

	//定义数组
	var arr = new Array();
	var arr = [1,2,3];
	//数组连接
	arr1.concat(arr2,arr3);
	//指定分隔符连接数组
	arr.join(";");
	//数组排序
	arr.sort();
	//颠倒数组元素顺序
	arr.reverse();
	//从已有数组里返回选定的数组
	arr.slice(start,end);
	//从数组中删除或新增元素
	arr.splice(start,delNum,item1,item2)

4.4 Date对象

	//新建对象
	var mydate = new Date();
	//年 
	mydate.getFullYear();
	mydate.setFullYesr(2016);
	//月 0~11
	mydate.getMonth();
	mydate.setMonth(0);
	//天1~31
	mydate.getDate();
	mydate.setDate(20);
	//小时 0~23
	mydate.getHours();
	//分 0~59
	mydate.getMinutes();
	//秒 0~59
	mydate.getSeconds();
	//星期 1~7
	mydate.getDay();
	mydate.setDay(1);

5.浏览器对象(window对象)

5.1 setInterval() setTimeout() 延时器

     //setInterval() clearInterval()
    function clock(){
       var time=new Date();               	  
       document.getElementById("clock").value = time;
    }
    var tt = setInterval(clock,1000);
    <input type="button" value="Stop"  οnclick="clearInterval(tt)"/>

5.2 history()

	//返回上一个页面
	window.history.back();
	window.history.go(-1);
	//返回下一个页面
	window.history.forward();
	window.history.go(1);
	//返回当前页面之后浏览过的第三个历史页面
	window.history.go(3);

5.3 location()

	//url
	window.location.href
	//锚点
	window.location.hash
	//主机名和端口号
	window.location.host
	//主机名
	window.location.hostname
	//端口号
	window.location.post

6.DOM对象

5.1 获取元素

	//根据id取元素
	document.getElementById("id");
	//根据name取元素
	document.getElementsByName("name");
	//根据标签名称去元素，如p、a等
	document.getElementsByTagName("tagName");

5.2 节点

        //getAttribute() 根据节点的属性名称获取属性值 
	var node = document.getElementById("id");
	var title = node.getAttribute("title");
	
	//setAttribute() 设置属性值
	node.setAttribute("title","WEB前端技术");
	
	//节点的属性
	var nodes = document.getElementsByTagName("li");
	for(var i=0; i<nodes.length; i++){
		documents.write(nodes[i].nodeName); //LI
		documents.write(nodes[i].nodeValue); //null
		documents.write(nodes[i].nodeType); //1
	}
	
	//创建节点
	document.createElement(tagName)；
	
	//子节点
	var childNodes = node.childNodes;
	//子节点的第一项和最后一项
	node.firstChild;
	node.lastChild;
	
	//父节点
	node.parentNode;
	
	//兄弟节点
	node.nextSibling；
	node.previousSibling；  
	
	//添加节点  appendChild()
	var otest = document.getElementById("test");  
	var newnode = document.createElement("li");
	newnode.innerHTML = "PHP";
	otest.appendChild(newnode);
	
	//插入节点 insertBefore()
	parantNode.insertBefore(newNode,node);
	
	//删除节点
	node.removeChild(node)；
	
	//替换节点
	node.replaceChild (newnode,oldnode);

	//创建文本节点 createTextNode()
	var pNode = document.createElement("p");
        var text = document.createTextNode("I love JavaScript!");
        pNode.appendChild(text);
        document.body.appendChild(pNode);