zoukankan      html  css  js  c++  java
  • 前端 里的面向对象

    前端 : 面向对象 

    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>
  • 相关阅读:
    十分钟内学会:将HTML格式化为合法的XML
    十分钟内学会:根据数据库生成站点导航
    Adobe Apollo vs Joyeur Slingshot
    英语阅读推荐:你真的懂UPDATE语句吗 & 当有layout之时
    欲练 CSS ,必先宫 IE
    英语阅读推荐:海明威写作技巧 & UpdatePanel为何失灵
    英语阅读推荐:在AJAX中制作自定义验证服务 & 优秀网站的5个因素
    Code is Configuration
    十分钟内学会:自动识别GB2312与UTF8编码的文件
    学习 Ruby on Rails 真的很爽!
  • 原文地址:https://www.cnblogs.com/fengkun125/p/9544077.html
Copyright © 2011-2022 走看看