前端知识汇总小结

孙LL

于 2021-06-06 13:22:20 发布

阅读量118

点赞数

分类专栏：前端知识

本文链接：https://blog.csdn.net/weixin_49640037/article/details/117622421

版权

前端知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML：内容
CSS：样式管理
JavaScript：

HTML和CSS都是静态的，JavaScript可以让网页与用户二者产生动态的交互。
ECMAScript，DOM（Document Object Model），BOM（Browser Object Model）

JavaScript示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="btn">点我啊</button>

</body>
<script>
    document.getElementById("btn").onclick = function () {
        alert("点你个🔨子点");
    }
</script>
</html>

JQuery：其实就是JavaScript的一个库，封装了很多操作而已，比如下面这样：

	原先JavaScript获取元素：document.getElementById("btn")
	导入JQuery获取元素：$("#div")

AJAX（Asynchronous JavaScript and XML）：异步的JavaScript和XML
原先我们要实现网页的更新，必须整个网页刷新，而AJAX则是实现了异步的局部更新。比如你搜索栏里面跳出来的提示就是这么一回事。举个例子：
你有这样的一个网页：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  <button id="btn">来吧，点我啊！</button>
  <div id="div1"></div>
  </body>

<script>
	//AJAX在这里开始了
  document.getElementById("btn").onclick = function () {
    let xmlhttp = new XMLHttpRequest();
    //第一个参数是请求方式，第二个是Servlet的路径，第三个是否异步
    xmlhttp.open("GET","user",true);
    //发送该请求
    xmlhttp.send();

    xmlhttp.onreadystatechange = function () {
      //readyState代表请求状态，status代表响应状态
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        //根据响应的内容修改对应id的元素
          document.getElementById("div1").innerHTML = xmlhttp.responseText;
      }
      
    }
  }
</script>
</html>

同时，当然，你有这样的一个路径为/User的Servlet：

@WebServlet("/user")
public class UserService extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.getWriter().write("SunLL");

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

最后，你点一下按钮就会跳出来下面这个界面，你可以看到id为div1的部分已经被修改了。
在这里插入图片描述

BootStrap：
响应式布局：可以根据不同的分辨率来进行页面的展示。

其实你就把他当作一个库来用就行了，其实就是个响应式布局比较有用，其他的就是有一堆样式库，你去网站上看，会复制粘贴改一改就好了。

Vue：
VUE就是响应数据的绑定和组合的视图组件，因为我们之前学过JavaScript其实提供了DOM（Document Object Model）来操作视图和数据。但是显然这是很麻烦的，你每次都要获取到某个Object，然后再去设置他的数据，你还要手动的同步视图里的数据更新。这时候我们使用Vue的数据双向绑定就很好用了，数据改变，视图就改变，视图改变（比如用户改变了某个选项），后台数据也随之改变。同时Vue也有饿了么提供的Element库，你可以直接使用库中的代码样式，这一点上与BootStrap类似。

BootStrap和Vue二者都作为前端的框架，其实Vue是更加强大的，BootStrap更像是一个库，而Vue则不仅有栅格布局，同时也具有数据绑定的功能。

孙LL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端知识汇总小结

HTML：内容CSS：样式管理JavaScript：HTML和CSS都是静态的，JavaScript可以让网页与用户二者产生动态的交互。ECMAScript，DOM（Document Object Model），BOM（Browser Object Model）JavaScript示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title
复制链接

扫一扫