web前端篇：JavaScript基础篇（易懂小白上手快）-2

最新推荐文章于 2024-11-04 14:35:19 发布
最新推荐文章于 2024-11-04 14:35:19 发布
阅读量100 收藏 1
点赞数
文章标签： 前端 javascript python ViewUI
原文链接：http://www.cnblogs.com/xujunkai/p/11028267.html
版权

目录

一.内容回顾：

ECMAScript基础语法

1.基本数据类型和引用数据类型

基本数据类型number,string,boolean,undefined,null
引用数据类型：Array,Object,Function

2.条件判断和循环

switch(name){
    case 'xxx';
        break;
    case 'xxx';
        break;
    default:
        break;
}

for (var i=0;i<10;i++){
    run to code
}
三元运算：
1>3? '真的':'假的';

3.赋值运算符，逻辑运算符

&& || !
i ++
==比较值 ===比较值和数据类型

4.字符串的常用方法

slice() 切片 一个参数从当前位置切到最后，两个参数顾头不顾尾
substring()
substr()  如果有两个参数，第二个参数表示切字符串的个数
join()

字符串拼接
concat()
+
es6的模版字符串
    ··插入变量用${变量名}

//获取索引
indexOf()
lastIndexOf()
//获取字符
charAt()
//获取字符ascii码
charCodeAt()

//转大写
toUppercase()
//转小写
tolowercase()

typeOf 校验当前变量的数据类型
trim 清除左右的空格

5.数组的常用方法

toString()
join('#')
concat()
//栈
push()
pop()
//堆
unshift()
shift()

splice(起始位置，删除的个数，添加的元素);
//增加，删除，替换
reverse()
sort()
slice()
length

//迭代方法
forEach() //仅能在数组对象中使用。
for
    
在函数中arguments  这个对象是伪数组

6.对象

function fn(name){
    var obj = {};
    obj[name]='mjj';
    return obj;
}
fn('age')
//遍历对象
for (var key in obj) {
    obj[key]
}

7.函数

1.创建方法
//普通函数
function fn(){

}
fn();
//函数表达式
var fn = function(){
    run to code
}
//匿名函数
(function(){})()//this指向一定指向window

全局作用域，函数作用域，函数作用域中this指向可以发生改变，可以使用call() 或者apply()
e.g.:
var obj = {name:'mjj'};
function fn(){
    console.log(this.name);
}
fn();//是空制，因为函数内容this指向window
fn.call(obj);//此时函数内部的this指向obj


构造函数
new object();
new Array();
new String();


父级定义一个属性必须使用prototype

8.日期对象

var data = new Data();

date.toLocaleString()  //2018/08/21 21:33:23

9.Math数学对象

Math.ceil(); 向上取整,天花板函数
Math.floor(); 向下取整，地板函数
Math.round(); 标准的四舍五入

随机数
Math.random();获取到0-1之间的数

function random(min,max){
    Math.floor(Math.random()*(max-min))+min;
}

10.数值和字符串转换

1.数值转字符串
toString()
数字+空字符串
2.字符串转数值
parseInt() 转整数
parseFloat() 转浮点型
Number()

NAN
isNaN()

Infinity 无限大

11.let var 区别

1.ES6可以用let定义块级作用域变量
2.let 配合for循环的独特应用
3.let没有变量提升与暂时性死区
4.let变量不能重复声明

12.看代码写结果

var a = 99;            // 全局变量a
f();                   // f是函数，虽然定义在调用的后面，但是函数声明会提升到作用域的顶部。 
console.log(a);        // a=>99,  此时是全局变量的a
function f() {
  console.log(a);      // 当前的a变量是下面变量a声明提升后，默认值undefined
  var a = 10;
  console.log(a);      // a => 10
}
//undefined
//10
//99

二.详细内容：

1.BOM(浏览器对象模型)

  • BOM的核心对象是Window,它表示浏览器的一个实例，在浏览器中，window对象有双重角色，即是JavaScript访问浏览器窗口的一个接口。

    又是ECMAScript规定Global对象。

1.系统对话框方法
1.alert() 警告框
<body>
    <script type="text/javascript">
        window.alert('mjj');
    </script>
</body>
  • 效果显示：

1644171-20190615173217502-1758004098.png

  • 例题

    //例题：
<script>
    console.log(window.location);
    var i=1;
    function f(){
        i++;
        console.log("打印 :  "+i);
        return k;
        function k() {
            return "I love you!"
        }
    }
    f();
    console.log("111111111111");
    f()();
    alert(f()());
</script>
//打印2
//11111111111
//打印3
//打印4
//警告框出现"I love you!"
2.confirm()确认框
  • 如果点击确定,返回true,点击取消,返回false。
<body>
    <script type="text/javascript">
        var src = window.prompt("今天天气如何");
        switch (src) {
            case '晴天':
                console.log('出去打球');
                break;
            case '阴天':
                console.log('在家睡觉');
                break;
            default:
                console.log("什么都不做");
                break
        }
    </script>
</body>
  • 效果显示：

1644171-20190615173242216-34641145.png

3.prompt()弹出框
  • prompt默认接收两个参数，第一个参数显示文本，第二个参数默认的文本。
<body>
    <script type="text/javascript">
        var src = window.prompt("今天天气如何",'晴天');
        switch (src) {
            case '晴天':
                console.log('出去打球');
                break;
            case '阴天':
                console.log('在家睡觉');
                break;
            default:
                console.log("什么都不做");
                break
        }
    </script>
</body>
  • 效果显示

1644171-20190615173307939-401770322.png

2.定时方法**********
1.一次性任务setTimeout()
  • setTimeout()方法表示一次性定时任务做某件事情,它接收两个参数,第一个参数为执行的函数,第二个参数为时间(毫秒计时:1000毫秒==1秒)
    <script type="text/javascript">
        window.setTimeout(function(){
            console.log('2秒后我将打印');
        },2000);
        console.log('立刻打印');
    </script>
//setTimeout(参数1，参数2);参数1为一个函数，参数2为时间以毫秒为单位。此处要知道setTimeout是异步。

1644171-20190615173332709-492828106.png

  • 一次性任务的清除

    var timer = setTimeout(callback,1000);
clearTimeout(timer);
//清除定时器。

  • href属性

    //2秒后跳转 百度网页
setTimeout(function () {
  location.href = 'https://www.baidu.com';
},2000);

  • replace

    //2秒后跳转 百度网页,在当前页面跳转
setTimeout(function(){
    location.replace('https://www.baidu.com');
},2000)
2.周期性循环setInterval
  • setInterval()方法表示周期性循环的定时任务.它接收的参数跟setTimeout()方法一样.

<script>
    var num = 0;
    var timer = null;
    //开启定时器
    timer = window.setInterval(function(){
        num++;
        if (num===10){
            //当num===10  清除定时器
            clearInterval(timer);
        }
        console.log(num);//console打印出数字
    },1000);//1000ms=1s
</script>

//每2秒刷新。
setInterval(function(){
    //做测试
    location.reload();
},2000);

//局部刷新  ajax技术，在不重载页面上，对网页进行操作
3.locaion对象属性
  • location是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息，还提供了一 些导航功能。事实上，location 对象是很特别的一个对象，因为它既是 window 对象的属性，也是document 对象的属性;
    <script>
        console.log(window.location);//获取属性
        setInterval(function(){
            location.reload();//刷新页面
        },2000);
    </script>
//局限较大，通常都是局部刷新，通过AJAX技术，在不重载页面的情况，对网页进行操作

  • reload()方法

    location.reload();//重新加载（有可能从缓存中加载）
location.reload(true;)//重新加载（强制从服务器加载）

  • history

    history.go(-1);//后退一页
history.go(1);//前进一页
history.go(2);//前进两页
console.log(window.location);
//获取属性
  • 显示效果

1644171-20190615173356396-158972419.png

2.DOM（文档对象模型）

  • 顶层对象BOM---->文档------>文档内容
2.1节点
  • 元素节点
    • 像<body>、<p>、<ul>之类的元素这些我们都称为叫元素节点（element node）。
  • 文本节点

    • 元素只是不同节点类型中的一种。如果一份文档完全由一些空白元素构成，它将有一个结构，但这份文档本身将不会包含什么内容。在网上，内容决定着一切，没有内容的文档是没有任何价值的，而绝大数内容都是有文本提供。

      //示例：
<p>这是一个文本</p>
//‘这是一个文本’ 是一个文本节点
  • 属性节点

    • 还存在着其他的一些节点类型。例如，注释就是另外一种节点类型。但这里我们介绍的是属性节点。

      //示例
<p title='book'>这是一本书！</p>
//title='book'是一个属性节点
2.3获取节点对象的三种方式
2.3.1 document.getElementById 方法
  • getElementById 的方法只有一个参数，用于获得元素的id属性值，这个id值必须为字符串类型。
<body>
    <div id="box">MJJ</div>
    <ul id="box2">
        <li class="active"></li>
        <li></li>
        <li></li>
    </ul>
        <script>
        var box = document.getElementById('box');
        console.log(box);
        console.dir(box);
    </script>
<body>
//

1644171-20190615173418255-1816518367.png

2.3.2document.getElementsByTagName()方法
  • 通过标签名字获取节点对象（获取是伪数组），这个方法将返回一个元素对象集合。
//示例1：
<body>
    <div id="box">MJJ</div>
    <ul id="box2">
        <li class="active"></li>
        <li></li>
        <li></li>
    </ul>   
    <script>
        var box = document.getElementsByTagName('div');
        console.log(box);//HTMLCollection [div#box, box: div#box]   
    </script>
</body>
//示例2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //css
    <style>
        ul li.active{
            color:red;
        }
    </style>
</head>
<body>
     //html
    <div id="box">MJJ</div>
    <ul id="box2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
//JS:
    <script>
        var lis = document.getElementsByTagName('li');
        //三个li签
        console.log(lis);//HTMLCollection(3) [li, li, li]
        for (var i=0;i<lis.length;i++){//循环将li标签添加class 属性，让CSS渲染
            lis[i].className = 'active';
        }

    </script>
</body>
</html>

//示例3：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //css
    <style>
        ul li.active{
            color:red;
        }
    </style>
</head>
<body>
     //html
    <div id="box">MJJ</div>
    <ul id="box2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
//JS:
    <script>
        var lis = document.getElementsByTagName('li');
        //三个li签
        console.log(lis);//HTMLCollection(3) [li, li, li]
        for (var i=0;i<lis.length;i++){//循环
            lis[i].onclick = function(){
                this.className = 'active';//鼠标点击获取事件，并将li标签添加class 属性，让CSS渲染
            };
        }

    </script>
</body>
</html>

//示例4：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //css
    <style>
        ul li.active{
            color:red;
        }
    </style>
</head>
<body>
     //html
    <div id="box">MJJ</div>
    <ul id="box2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
//JS:
    <script>
        var lis = document.getElementsByTagName('li');
        //三个li签
        console.log(lis);//HTMLCollection(3) [li, li, li]
        for (var i=0;i<lis.length;i++){//循环
            lis[i].onclick = function(){
                for (var k=0;k<lis.length;k++){ 
                    lis[k].className = '';//排他思想，让其他li默认class=''
                }

                this.className= 'active';//鼠标点击获取事件，并将li标签添加class 属性，让CSS渲染
            };
        }

    </script>
</body>
</html>
2.3.3document.getElementsByClassName()
  • DOM中也提供了通过类名来获取某些DOM元素对象的方法.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li.active{
            color:red;
        }
    </style>
</head>
<body>
    <div id="box">MJJ</div>
    <ul id="box2">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
        <script>
        var lis = document.getElementsByClassName('active');
        console.log(lis);//HTMLCollection [li.active]
        var box = document.getElementById("box2");
        console.log(box.children);//获得box2下所有的子元素   HTMLCollection(3) [li.active, li, li]
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li.active{
            color:red;
        }
        ul li.att{
            color:blue;
        }
    </style>
</head>
<body>
    <div id="box">MJJ</div>
    <ul id="box2">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
//红色蓝色来回切换
    <script>
        var lis = document.getElementsByClassName('active')[0];
        var des = true;
        lis.onclick = function(){
            if (des){
                this.className = 'att';des=false;
            }else{this.className = 'active';
                des = true;
            }
        };
    </script>
</body>
</html>
2.4对样式的操作
  • box.style.属性(CSS属性带-，其后面字母大写)
//示例1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">MJJ</div>
    <script type="text/javascript">
        // 1.获取事件源对象
        var box = document.getElementById('box');
        // console.log(box);
        //鼠标悬浮，更改样式
        //2.绑定事件
        box.onmouseover = function () {
            box.style.backgroundColor = "green";
            box.style.fontSize = '30px';
            box.style.width = "200px";
            box.style.height = '200px';
        };
        //鼠标离开更改样式
        box.onmouseout = function(){
            box.style.backgroundColor = 'red';
            box.style.fontSize = '15px';
            box.style.width = "400px";
            box.style.height = '400px';
        };
    </script>
</body>
</html>

//示例2：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">MJJ</div>
    <script type="text/javascript">
        var box = document.getElementById('box');
        des = true;
        box.onclick = function(){
            if (des){
                box.style.backgroundColor = 'blue';
                des = false;
            }else{
                box.style.backgroundColor = 'green';
                des = true;
            }
        }
    </script>
</body>
</html>
2.5对属性的操作
  • getAttribute() 接收一个参数，打算查询的属性名字。
  • setAttribute() 语序我们对属性节点的值做修改，传递两个参数，第一个参数为属性名，第二个参数为属性值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            color:red;
            font-size:30px;
        }
        p.active{
            color:blue;
        }
    </style>
</head>
<body>
    <p title="my class" id = 's21' class="a">21</p>
    <script>
        var p1 = document.getElementById('s21');
        console.log(p1.getAttribute('title'));//my class
        console.log(p1.getAttribute('class'));//a
        p1.setAttribute('class','s20'); //更改属性class  值为s20
        p1.setAttribute('hello','python');//建立属性hello 值为python
        console.log(p1.getAttribute('hello'));//python
        console.log(p1.className);//s20
        console.log(p1.title);//my class
        console.dir(p1);//p#s21.s20 属性
        p1.onclick = function(){
            this.className = this.className + ' active';//加上' active' CSS可用 p.active
        };



    </script>
</body>
</html>

1644171-20190615173450163-744664793.png

2.6节点的创建添加删除
2.6.1 createElement()创建节点

  • 此方法可返回一个Element对象。

    var newNode = document.createElement(tagName);

  • appendChild添加节点

2.6.2 innerText属性

  • 仅仅对元素获取或者设置文本

    newNode.innerText = '你好';
2.6.3 innerHTML属性

  • 既可以设置文本又可以设置标签

    newNode.innerHTML = `<a>mjj</a>`

注意：如果想获取节点对象的文本内容，可以直接调用innerText或者innerHTML属性来获取。

<body>
    <div id="box">MJJ
        <ul id="box2">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <script>
        var box = document.getElementById('box');
        console.log(box.innerText);
        console.log(box.innerHTML);
    </script>
 </body>

//这是innerText结果
//MJJ
//1
//2
//3

//这是innerHTML结果
//MJJ
//      <ul id="box2">
//          <li class="active">1</li>
//          <li>2</li>
//          <li>3</li>
//      </ul>
2.6.4 appendChild() 插入节点

  • 在指定的节点的最后一个子节点之后添加一个新的子节点。

    appendChild(newNode);
2.6.5insertBefore() 插入节点

  • 方法可在已有的子节点前插入一个新的子节点

    insertBefore(newNode,node);

2.7 removeChild() 删除节点

  • removeChild()方法从子节点列表中删除某个节点。如果删除成功，此方法可返回被删除的节点，如失败，则返回NULL。

  • 例题：

<body>
    <ul id = 'box'></ul>
    <script type = 'text/javascript'>
        //通过ID获取单个节点对象
        var ul = document.getElementById('box');
        var li1 = document.createElement('li');
        var li2 = document.createElement('li');

        //innerText 只能设置文本格式内容
        li2.innerText = '你好';
        //innerHTML 可以设置HTML格式，如标签
        li1.innerHTML =`<a href='#'>123</a>`;



        //给li1子标签(a)添加属性
        li1.children[0].style.color = 'blue';
        li1.children[0].style.fontSize = '28px';

        //给li2标签添加属性（也就是li）color
        // console.log(li2);//li
        li2.style.color = 'red';


        //将创建好的标签加入ul里。
        ul.appendChild(li1);
        ul.appendChild(li2);


        //将li2更改text值，并在li1前面，插入ul标签li2,
        li2.innerHTML = '第一个';
        ul.insertBefore(li2,li1);
        //将li2标签移除
        ul.removeChild(li2);
    </script>
</body>

2.8 DOM中heigh,clientHeight,offsetHeight属性

1644171-20190615173510766-505266174.png

直观的理解一波

  • clientHeight: 样式的height + 上下padding(内边距区域)
  • offsetheight:样式的height+上下padding+上下border-width。
  • height :样式高度的height，但在浏览器显示undefined，通过style.height能设置高度，但无法获取。
  • 示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            height: 300px;
            padding: 10px;
            border: 1px solid red;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        var box = document.getElementById("box");
        console.log(box.height);//undefined 
        console.log(box.offsetHeight);//322
        console.log(box.clientHeight);//320
    </script>
</body>
</html>

3.事件

​ 事件是您在编程时系统内发生的动作或者发生的事情，系统通过它来告诉您在您愿意的情况下您可以以某种方式对它做出回应。例如：如果您在网页上单击一个按钮，您可能想通过显示一个信息框来响应这个动作。

主要事件有：

事件说明
onclick鼠标单击事件
onmouseover鼠标经过事件
onmouseout鼠标移开事件
onchange文本框内容改变事件
onselect文本框内容被选中事件
onfocus光标聚焦事件
onblur光标失焦事件
onload网页加载事件

关于事件相关学习参照：https://www.cnblogs.com/majj/p/9102401.html

4.应用

1.遍历数据操作页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li p.name{
            color:red;
        }
        li span.price{
            color:blue;
        }
    </style>
</head>
<body>
        <ul id="box"></ul>
        <script>
        //通过ID获取单个节点对象
        var box = document.getElementById('box');
        var data = [
                {id:1,name:'小米8',subName:'你真好',price:98},
                {id:2,name:'小米6',subName:'你真好2',price:948},
                {id:3,name:'小米4',subName:'你真好3',price:100},
                {id:4,name:'小米2',subName:'你真好4',price:928},
                {id:5,name:'小米10',subName:'你真好5',price:918}
                ];
        //遍历data，以便操作数组每个元素
        for (var i=0;i<data.length;i++){
            //创建标签li  创建节点
            var li = document.createElement('li');
            //插入数据
            li.innerHTML = `<p class="name">${data[i].name}</p>
            <p class="subName">${data[i].subName}</p>
            <span class="price">${data[i].price}元</span>
            `;
            //提交数据
            box.appendChild(li);
        }
    </script>
</body>
</html>
2.切换图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id = 'box'>
        <img src="images/1.jpg" alt="" id = "imgBox">
    </div>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
    <script>
        //获取id = 'box'
        var imgBox = document.getElementById('imgBox');
        //获取id = 'next'
        var next = document.getElementById('next');
        //获取id = 'prev'
        var prev = document.getElementById('prev');
        var num = 1;
        //事件点击next,此时执行nextImg函数
        next.onclick = function () {
            nextImg();

        };
        //nextImg函数增加num值获得下一张图片，最后一张做判断，返回第一张
        function nextImg() {
            num ++;
            if (num===5){
                num = 1;
            }
            imgBox.src = `images/${num}.jpg`;

        }
        //事件点击prev 此时执行prevImg()函数
        prev.onclick = function(){
          prevImg();
        };
        //prevImg函数减少num值获得上一张图片，当num=0返回最后一张图片
        function prevImg() {
            num --;
            if (num===0){
                num = 4;
            }
            imgBox.src = `images/${num}.jpg`;
        }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/xujunkai/p/11028267.html

weixin_30315435
关注
点击上一个为上一张图片，点击下一个为下一张图片
weixin_30591551的博客
06-02 723
如图效果 原理： 大体上还是一个简单的选项卡，但是由于上一个和下一个固定，点击第几下的时候，是第几张图片，所以，要对点击的次数做一个定义，即iNum;同时，点击“下一个”的时候，点击的次数要依次递增，如果点击的次数大于等于图片的个数的时候，要回归到第一张图片；点击“上一个”的时候，点击的次数要依次递减iNum可能会0；为0的时候，为第一张图片，那么在递减一下，iNum就为负数了，而这...
web前端篇：JavaScript基础篇（易懂小白上手快）-1
weixin_30607659的博客
06-15 177
目录 详细内容： 0.JavaScript的引入 1.第一个JavaScript 2.变量 3.变量的类型 4.数组 5.条件语句 6.三元运算符 7.循环 8.函数 9.对象（obje...
js中当等于最小值是让代码不执行_web前端篇：JavaScript基础篇（易懂小白上手快）-1...
weixin_39915694的博客
12-21 182
javascript技术文章开发web前端篇：JavaScript基础篇(易懂小白上手快)-1 详细内容：0.JavaScript的引入Titlemjj//js代码1.第一个JavaScript1.alert语句用途：弹出警告框。alert('你好')2.注释：JavaScript对换行，缩进，空格不敏感。单行注释(ctrl +/)//我是单行注释多行注释(ctrl+shif...
JavaScript 基础知识：简单易懂，快速上手（超详细全文约二万多字）
星辰迷上大海的博客
09-12 382
在当今的网页开发中，JavaScript 是一门不可或缺的编程语言。无论你是初学者还是有一定基础的开发者，掌握 JavaScript 的基础知识都是至关重要的。本教程旨在为读者提供一个简单易懂的学习路径，帮助你快速上手这门语言。本文内容涵盖了 JavaScript 的核心概念，包括变量、数据类型、函数、对象和数组等知识。无论你是希望提升自己的编程技能，还是面试，这篇超详细的 JavaScript 教程都将是你不可或缺的学习资源。让我们一起踏上这段编程之旅，探索 JavaScript 的无限可能！
web前端年刊-2020年(88篇精选文章)
枫星辰的博客
01-11 1491
2020年web前端年刊，收录了包括JavaScript、Node.js、CSS；浏览器、网络、性能优化；前端框架、小程序；前端相关知识、原理、实践；前端相关思考；微前端、Serverless、中台、微服务；技术实现、原理、基本知识；其它实践经验、开发思想、心得总结；方面的好文。 JavaScript、Node.js、CSS： Node.js 模块系统源码探微 本文剖析了部分核心源码实现，方便读者了解Node.js模块加载过程的一些实现，比如CommonJS规范实现、模块定位和加载策略、文件解析和编译执.
vue2+vue3小白零基础教程-vue3篇，全网2021最详细教程
lvyuanxiang的博客
09-23 1417
Vue2+Vue3小白零基础教程—vue3篇 提示：Vue2系列请参考Vue2+Vue3小白零基础教程—vue2篇文章，本文为vue2小白零基础教程续集。 6. Vue3快速上手 6.1 简介 2020年9月18日,uejs发布3.0版本,代号: One Piece(海贼王) 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址: https://github.com/vuejs/vue-next/releases/tag/v3.0.0 6.2
详细前端面试题CSS篇--持续更新
jyl919221lc的博客
05-12 2354
margin(外边距)- 清除边框外的区域，外边距是透明的。border(边框)- 围绕在内边距和内容外的边框。padding(内边距)- 清除内容周围的区域，内边距是透明的。content(内容)- 盒子的内容，显示文本和图像。W3C的标准盒模型：在标准的盒子模型中，width指content部分的宽度IE的盒模型：在IE盒子模型中，width表示content+padding+border这三个部分的宽度如何开启不同盒子模型标准盒子模型IE盒子模型Grid。
100本最棒的web前端图书推荐
热门推荐
GaojbSunny的博客
03-07 1万+
100本最棒的web前端图书推荐 01、《JavaScript DOM编程艺术第二版（中文）》 语言：中文 类型：pdf  简介：这本书作为被大家推荐的最多的前端入门书籍是有道理的。 他能真正让大家了解dom脚本编程，或是说前端编程技术背后的思路和原则。 对于初学者来说，这本书没有任何门槛，按部就班跟着书籍实例编写代码即可。我们会知晓如何对浏览器元素操作和掌控，
前端入门超级攻略：你的第一步学习指南
海风依旧
07-03 2209
由于前端技术的快速迭代性，国内的高校基本上不会去专门开设前端开发这一门课程，与之相对应的是大数据和软件工程，围绕python和java等生态和开发路线较为稳定的语言去开设课程，这就导致大部分学生在校对前端的了解局限于前端三剑客直到现在，还有不少学生到了大三以为学了三剑客就能找到实习，所以笔者总结了一份如何学习前端的指南，希望能帮助到想入门或即将入门前端的同学如果想系统的学习一门课程，只凭一时兴趣是无法长久的学习的
web前端开发最新技术（入门篇）：免费获取学习资料和视频教程
Web前端开发是指利用HTML、CSS和JavaScript等技术进行网站或Web应用程序界面的设计与开发工作。前端开发主要负责实现用户能够直接看到和交互的部分，包括页面布局、样式设计、交互逻辑等方面。 ## 1.2 Web前端开发...
电商前端工程师：国内WEB前端开发经验之路
09-01 2036
一直想写这篇“十日谈”，聊聊我对Web前端开发的体会，顺便解答下周围不少人的困惑和迷惘。我不打算聊太多技术，我想，通过技术的历练，得到的反思应当更重要。 　　我一直认为自己是“初级”前端开发工程师，一方面我入道尚浅，只有短短几年，另一方面我自知对技术的钻研并不深入，可能是由于环境的原因，当然最重要的是，我幸运的参与到互联网崛起的浪潮之巅。时势造就了一批技能薄弱但备受追捧的“弄潮者”，这在很大
"JavaScript 入门教程：基础语法篇实现与应用
JavaScript入门教程V 1.0通过简单易懂的例子和解释介绍了如何运用JavaScript嵌入HTML页面中，使得读者能够快速上手并理解JavaScript的基础语法。这些知识不仅有助于改进网页设计，增加特效，还可以使网页更具交互性...
〖程序员的自我修养 - 认知剖析篇③〗- 十大编程语言的优缺点
易编橙 · 终身成长社群，相遇已是上上签！
07-26 1万+
我们掌握不了所有的编程语言，但我们掌握的语言越多，在未来的发展与可塑性上就越强，就越容易受到企业的青睐，如果是作为自由开发者的话，也就越会有客户和开发团队与我们合作。 考虑到这一点，希望各位小伙伴能规划好自己的学习计划，并开始一一学习，以成为某一细分领域的技术专家或者某个蓬勃发展领域的顶级专家。
Three.js简化 WebGL 的使用
weixin_44719499的博客
11-03 774
Three.js 是一个流行的 JavaScript 库，旨在简化 WebGL 的使用，使开发者能够轻松创建和渲染 3D 图形。它提供了丰富的功能和工具，适合游戏开发、数据可视化和互动应用等。
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 386
关于react hooks的一些知识与应用
做一个能适配「手机」的网站需要注意什么
illidri的博客
11-01 280
像现在主流会采用 H5 响应式布局，仅涉及前端的开发工作，代码量少，效果佳，是一种性价比比较高的选择，如果题主有意要进行网站建站，特别是想要手机浏览也有一定效果，可以选择这种~当然还有一种类似的方式叫自适应布局，俗称 AWD（AdaptiveWebDesign），同样是检测视口分辨率，判断不同尺寸和分辨率是什么设备，从而返回不同布局页面。最根本的区别在于，响应式页面的代码量少，但质量要求高，根据不同分辨率自动调整排版，而自适应页面需要根据不同设备准备不同的页面，这样前期的开发工作就大了很多。
js操作数组的方法 / js操作字符串的方法
m0_64520392的博客
11-01 548
js操作数组的方法 / js操作字符串的方法
前端 常见开发工具使用
weixin_45534301的博客
10-31 477
【代码】前端 常见开发工具使用。
Vue 自定义icon组件封装SVG图标
最新发布
gaowxx的博客
11-04 144
通过自定义子组件CustomIcon.vue使用SVG图标，相比iconfont下载文件重新替换更节省时间
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值