美文网首页
Good Luck

Good Luck

作者: magic_pill | 来源:发表于2018-09-03 17:07 被阅读23次

概念

HTML以及CSS篇，集中在CSS

说下你常用的几种布局方式，集中往盒模型、flex布局说(至于grid布局，这个我看过没有用到过)
盒模型

  • 盒模型的组成，由里向外 content，padding，border，margin。

  • 在标准模型中，盒模型的宽高只是内容（content）的宽高；

  • 在IE模型中盒模型的宽高是 内容(content) + 填充(padding) + 边框(border) 的总宽高。

  • css如何设置两种模型？这里用到了 CSS3 的属性：box-sizing

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;
  • 工作中，有时会出现给子元素设置 margin-top:50px，出现了“元素向下走50px，子元素和父元素之间并未出现 50px 的间距”，解决方案点这里
flex 布局
实现水平居中的几种方法？
animate和translate有没有用过，一些常见的属性说下？
CSS实现宽度自适应100%，宽高16:9的比例的矩形。
如何实现左边两栏一定比例，左栏高度随右栏高度自适应？

其它

一、JS 变量提升

function Foo() { 
  getName = function () { alert(1); }; 
  return this; 
} 
Foo.getName = function () { alert(2); }; 
Foo.prototype.getName = function () { alert(3); }; 
var getName = function () { alert(4); }; 
function getName() { alert(5); } 

//求以下各表达式的值
Foo.getName(); // ? 
getName(); // ? 
Foo().getName(); // ? 
getName(); // ? 
new Foo.getName(); // ? 
new Foo().getName(); // ? 
new new Foo().getName(); // ?
答案参考

二、Ajax 请求原理解析

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
使用 AJAX 的应用程序案例：微博、优酷视频、人人网等等。

发送Ajax请求，使用的是js
五步使用法:
  • 1.创建异步对象：var ajaxObj = new XMLHttpRequest();
  • 2.使用open方法设置请求的参数：
    • ajaxObj.open('get','xxx.php');
    • 参数1为请求的方法，参数2为请求的url；
  • 3.发送请求：（发送请求报文）
    • ajaxObj.send();
  • 4.注册事件:（服务器返回响应报文）
    • 状态改变时就会调用，如果要在数据完成请求回来的时候才调用，我们需要手动的写一些判断的逻辑；
ajaxObj.onreadystatechange = function (){
        //为了保证数据完整回来，我们一般会判断两个值
        if (ajaxObj.readyState==4 && ajaxObj.status==200){
            //在注册事件中，获取返回的内容，并修改页面的显示
        }
}

  • 5.在注册的事件中，获取返回的内容，并修改页面的显示。


    浏览器与服务器的关系
  • 示例代码：GET（get的数据，直接在请求的url中添加即可）
  • html中的代码：
<body>
    <input type="text" class="user">
    <button>发送请求</button>
    <script>
        document.querySelector("button").onclick = function () {
            //1.创建异步对象
            var xhr = new XMLHttpRequest();

            //2.设置method、url等参数
            var userName = document.querySelector(".user").value;
            xhr.open("get","03-XMLHttpRequest.php?name="+userName);

            //3.发送数据
            xhr.send();

            //4.绑定事件
            xhr.onreadystatechange = function () {
                if (xhr.readyState==4 && xhr.status==200){
                    //5.在绑定事件中获取返回的数据，显示页面
                    console.log(xhr.responseText);
                }
            }
        }
    </script>
</body>
  • php中的代码：
<?php
        echo $_GET['name']."，欢迎你";
?>
  • 示例代码:POST
  • 有两点不同
    1.发送的数据写在send方法中；
    2.必须要在open和send之间添加setRequestHeader("Content-type","application/x-www-form-urlencoded");
  • html中的代码：
<body>
    <input type="text" class="user">
    <button>发送请求</button>
    <script>
        document.querySelector("button").onclick = function () {
            //1.创建异步对象
            var xhr = new XMLHttpRequest();

            //2.设置method、url等参数
            xhr.open("POST","03-XMLHttpRequest.php");

            //如果使用post发送数据，必须要添加如下内容，修改发送给服务器的请求报文的内容。form表单使用post发送数据不需要设置，因为form表单默认会进行转换
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            //3.发送请求，发送请求的数据写在send方法中
            //格式 name=jiang & age=18
            var userName = document.querySelector(".user").value;
            xhr.send("name="+userName);

            //4.绑定事件
            xhr.onreadystatechange = function () {
                //5.在绑定事件里获取数据，展示页面
                if (xhr.readyState==4 && xhr.status==200){
                    console.log(xhr.responseText);
                }
            }
        }
    </script>
</body>
  • php中的代码：
<?php
        echo $_POST["name"]."，你好";
?>
  • 实际开发中，get和post的选取：
    由后台程序员以文档或者口头形式告知；
    如果不考虑提交文件，那么get/post的作用基本一致，只是写法不同。
实际工作中，使用 jQuery 封装的 ajax
1. jQuery - AJAX load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据替换被选元素。

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

2. AJAX get() 方法
  • 从指定的资源请求数据。

语法：$.get(URL,callback);

  • 实例：
$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});
  • $.get() 的第一个参数是我们希望请求的 URL（"demo_test.asp"）。
  • 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
3. jQuery $.post() 方法
  • 向指定的资源提交要处理的数据。

语法：$.post(URL,data,callback);

  • 实例：
$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});
  • $.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.asp")。
  • 然后我们连同请求（name 和 city）一起发送数据。
  • "demo_test_post.asp" 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。
  • 第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
4. $.ajax({})方法 （了解）
  • 更多自由的定制性。

语法：jQuery.ajax([settings])
settings：可选。用于配置 Ajax 请求的键值对集合。

  • 示例代码：这里演示的是常用的属性
$.ajax({
        url:'01.php',   //请求地址
        data:'name=fox&age=18',     //发送的数据
        type:'GET',     //请求的方式
        success:function (argument) {},     // 请求成功执行的方法
        beforeSend:function (argument) {},  // 在发送请求之前调用,可以做一些验证之类的处理
        error:function (argument) {console.log(argument);},   //请求失败调用
});

三、 Node.js 创建服务

const express = require('express');

// 新建app
const app = express();

app.get('/',function(req,res){  //访问 localhost:9003
  res.send('<h2>Hello New App</h2>')
})

app.get('/data',function(req,res){  //访问 localhost:9003/data
 res.send('<h2>My baby，come on.</h2>')
})

app.listen(9003,function(){
  console.log('端口为 9003 的服务已启动')
})

相关文章

网友评论

      本文标题：Good Luck

      本文链接：https://www.haomeiwen.com/subject/jtxiwftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Good Luck|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！