前端 里的面向对象
Posted fengkun125
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端 里的面向对象相关的知识，希望对你有一定的参考价值。
前端 : 面向对象
1.对象的创建方式
字面量方式创建 :
var object = {name : "zhg",
age : 13,
fav : function(){ } };
构造函数方式创建 :
var a = new Object();
a.name = "yyy";
a.age = 12 ;
a.fav = function(){ };
2.原型继承方式创建:
function Student(name,age){
this.name = name;
this.age = age ;
};
Student.prototype.fav = function(argument){
console.log(this); console.log(this.name);}
实例化对象
var s1 = new Student("太亮",18);
s1.fav();
2.定时器 :
一次性定时器 (setTimeout)
1000毫秒 = 1秒 , 异步如果请求数据时出现数据阻塞,那么可以简单实用 异步调用 应用: 异步
var a = setTimeout(function(){console.log(1);},3000);
清除定时器 : clearTimeout(a);
周期性循环定时器 : 每50毫秒执行对应的回调函数,应用 : 动画效果;
setInterval(function(){ },50);
例子 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 1.setTimeout只在指定时间后执行一次
// 定时器 异步运行
// function hello(){
// alert("hello");
// }
// 使用方法名字执行方法,1000ms等于1秒
// var t1=window.setTimeout(hello,1000);
// 使用字符串执行方法
// var t2=window.setTimeout("hello()",3000);
// window.clearTimeout(t1);//去掉定时器
// 2.setInterval在指定时间为周期循环执行
// setInterval("refreshQuery()",8000);
// function refreshQuery(){
// console.log("每隔1秒调一次")
// }
</script>
</body>
</html>
3.BoM : window.open()
window.location中对象的属性
e.preventDefault()阻止默认事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// window.open("http://www.baidu.com","_self")//默认为_black,打开链接地址
console.log(window.location.href);
// location //对象属性
// href：跳转
// hash 返回url中#后面的内容，包含#
// host 主机名，包括端口
// hostname 主机名
// pathname url中的路径部分
// protocol 协议 一般是http、https
// search 查询字符串
// location.reload()：重新加载
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="text" name="wd" value="路飞学城">
<input type="button" value=‘搜索‘>
</form>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
// document.getElementsByTagName(‘form‘)[0].onsubmit = function (e) {
alert(1);
// 阻止默认事件
// e.preventDefault()
// console.log(1111);
// ajax请求
// $.ajax({
// url:‘http://127.0.0.1:8800‘,
// method:‘get‘,
// success:function (data) {
// console.log(data);
// }
// })
//}
console.log(2);
//需求:2秒之后打开百度网页
setTimeout(function() {
// open(‘http://www.baidu.com‘,‘_self‘);
// console.log(window.location.href);
// // localhost:8080
// console.log(window.location.host);
// console.log(location.hostname)
// // /前端%201/day53/06-BOM.html
// console.log(location.pathname);
// console.log(location.protocol);
// // ?wd=路飞学城&key=value
// console.log(location.search)
// window.location.href = ‘http://www.baidu.com‘
// window.location.reload();
// ajax技术 XMLHttpRequest
//socket
//wsrigrf
//django
}, 2000);
</script>
</body>
</html>
以上是关于前端 里的面向对象的主要内容，如果未能解决你的问题，请参考以下文章