Good Luck

2018-09-03 本文已影响23人 magic_pill

概念

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

概念

HTML以及CSS篇，集中在CSS

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

盒模型

flex 布局

实现水平居中的几种方法？

animate和translate有没有用过，一些常见的属性说下？

CSS实现宽度自适应100%，宽高16:9的比例的矩形。

如何实现左边两栏一定比例，左栏高度随右栏高度自适应？

其它

一、JS 变量提升

答案参考

二、Ajax 请求原理解析

发送Ajax请求，使用的是js

五步使用法:

实际工作中，使用 jQuery 封装的 ajax

1. jQuery - AJAX load() 方法

2. AJAX get() 方法

3. jQuery $.post() 方法

4. $.ajax({})方法（了解）

三、 Node.js 创建服务

猜你喜欢

热点阅读

Good Luck

概念

HTML以及CSS篇，集中在CSS

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

盒模型

flex 布局

实现水平居中的几种方法？

animate和translate有没有用过，一些常见的属性说下？

CSS实现宽度自适应100%，宽高16:9的比例的矩形。

如何实现左边两栏一定比例，左栏高度随右栏高度自适应？

其它

一、JS 变量提升

答案参考

二、Ajax 请求原理解析

发送Ajax请求，使用的是js

五步使用法:

实际工作中，使用 jQuery 封装的 ajax

1. jQuery - AJAX load() 方法

2. AJAX get() 方法

3. jQuery $.post() 方法

4. $.ajax({})方法 （了解）

三、 Node.js 创建服务

猜你喜欢

热点阅读

4. $.ajax({})方法（了解）