前端学习快速

最新推荐文章于 2023-03-30 21:09:09 发布

春风不会绿大地

最新推荐文章于 2023-03-30 21:09:09 发布

阅读量79

点赞数

分类专栏：大数据文章标签： css html javascript

本文链接：https://blog.csdn.net/MRzhenglea/article/details/120451524

版权

大数据专栏收录该内容

40 篇文章 1 订阅

订阅专栏

html 管架构， css是修饰，js是动态交互

CSS

 <style>标签写修饰
 <link>写连接的css

选择器

基本选择器

类选择器
<style>
.demo{
}
</style>
<h1 class=demo>
id选择器
<style>
#demo{
}
</style>
<h1 id=demo>

javaScript

jQuery

jQuery库，里边存在大量javaScript函数
原生的js选择器的种类有：

标签选择器：document.getElementByTagName()
id选择器： document.getElementByID()
类选择器： document.getElementByClassName()

jq选择器有（css中的选择器他全部都能用）：

标签选择器：$(‘p’).click();
id选择器：$(’#id名’).click();
class选择器：$(’.class名’).click();

事件捕获鼠标移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        #divMove {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
mouse : <span id="mouse"></span>
<div id="divMove">
    在这里移动鼠标
</div>
<script>
    $(document).ready(
        function () {
            $('#divMove').mousemove(
                function (e) {
                    $('#mouse').text('x:' + e.pageX + "y:" + e.pageY);
                }
            )
        }
    )
</script>
</body>
</html>

nodejs

给前端一个交互

const http = require('http');
//创建一个http服务
http.createServer(function (request, response) {
    response.writeHead(200, { 'Content-type': 'text/plain' });
    response.end("heelo server")
}
).listen(8888);
console.log("aadddddddd80888")

NPM包管理器

类似于Maven
作用：1快速构建nodejs工程
npm init
然后根据输入提示命令依次输入参数
{
“name” : “test1”,
“version”:“1.0.1”,
“description”:“我是一个node工程”，
“main”:“index.js”,
“scripts”:{
“test”:“echo “Error: no test specified” && exit 1”
},
”author“:“学相伴”
“license” :“ISC” //授权协议
}
类似于pom.xml
要想引入别人的 .json文件直接把这个.json复制到你的项目中，然后在当前路径 cmd
npm install
2快速安装和依赖第三个模块

Babel转换

把ES6转换成ES5
1 创建npm init
2 然后 cnpm 下载babel和一个中间件
3 写一个 .babelrc 文件里边配置转换
4 然后运行命令也可以写到。json的脚本里

模块化

common js

const sum = (a,b)=>a+b
model.exports={ sum :sum}

require()
ES6
export function get List(){}

import 导入

webpack

写一个webpack.config.js的文件
写一个入口js
然后cmd webpack -config 路径

春风不会绿大地

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习快速

html 管架构， css是修饰，js是动态交互CSS <style>标签写修饰 <link>写连接的css选择器基本选择器类选择器<style>.demo{}</style><h1 class=demo>id选择器<style>#demo{}</style><h1 id=demo>javaScriptjQueryjQuery库，里边存在大量javaScript函数原
复制链接

扫一扫