前端里的面向对象

前端 : 面向对象

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>

前端 里的面向对象

前端里的面向对象