前端 裏的面向對象
阿新 • • 發佈：2018-08-27
鏈接 lac jquer itl new jquery href http oca
前端 : 面向對象
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>
前端 裏的面向對象