前端入门进阶实战
分享
扫一扫
专栏适合计划学习前端的小白，专栏按照清晰前端学习路线更新内容，涵盖html5，css3，js，jq精讲javascript,同时加入ajax架构以及丰富的前端案例（从静态页面到动态页面，还有小游戏实战），另外还包含微信小程序入门基础教程和小程序实战项目，在文章内结合知识点假日面试题，让你真正学以致用
超级会员免费看
周偏偏偏
真正能让你走远的 是自律积极和勤奋
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
前端小案例汇总（附上原码）
一.交叉动画效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>交...原创 2020-05-07 15:38:11 · 11455 阅读 · 6 评论
-
原生JavaScript小项目之贪吃蛇小游戏（附源代码）
公开课链接渡一教育贪吃蛇连接<body> <div class="content"> <div class="btn startBtn"><button></button></div> <div class="btn pauseBtn"><button></button></div> <div id="snakeWrap"&原创 2020-05-12 07:59:18 · 4541 阅读 · 4 评论 -
HTML标签+CSS样式（一）
文章目录一.HTML常用标签类一.HTML常用标签类1. < meta >告诉搜索引擎爬虫我们的网站关于什么内容 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。在 HTML 中， 标签没有结束标签,永远位于 head 元素内部。<head><meta content="服装" name=...原创 2020-04-13 10:11:48 · 30692 阅读 · 13 评论 -
HTML5和CSS3 介绍开发实战需要的（二）
文章目录1.HTML5相较于HTML1.1HTML5新增的语义化标签1.1.1语义化标签总结1.2 HTML5新增的多媒体标签1.2.1多媒体标签总结1.3 HTML5新增的input属性1.4 HTML5新增表单属性2.CSS3现状2.1 CSS3 新增选择器2.1.1属性选择器2.1.2 结构伪类选择器结构伪类选择器总结2.1.3伪元素选择器（重点）1.HTML5相较于HTMLHTML5的新增特性主要是针对以前的不足，增加了一些新的标签，新的表单，和新的表单属性等。这些新特性都有兼容性的问题，基本是原创 2020-06-22 15:51:48 · 7741 阅读 · 1 评论 -
web前端开发专业素养+专业知识（三）
文章目录一.专业素养二.专业知识三.开始学习JavaScript一.专业素养web发展史Mosaic，是互联网历史上第一个获得普遍使用和能够显示图片的网页浏览器，于1993年问世。JavaScript最初的设计目标是改善网页的用户体现浏览器的组成1.shell部分(shell)英文翻译成贝壳，是用户看得见的，例如菜单，工具栏 等内核部分（用户看不到）a. 渲染引擎...原创 2020-04-19 15:48:23 · 7634 阅读 · 5 评论 -
JavaScript函数+闭包（四）
文章目录一.函数以下更得是JavaScript函數以及闭包等内容，有需要的可参考前两篇博客，这里主要记得是HTML和css部分，这里主要记的是js最基础部分。一.函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。函数就是包裹在花括号中的代码块，前面使用了关键词 function，函数名functionnamefunction functionname(){ ...原创 2020-04-23 16:52:07 · 5489 阅读 · 1 评论 -
JavaScript正则表达式（RegExp）（五）
文章目录1.转义字符2.正则表达式两种创建方式3.正则表达式规则4.正则表达式方法5.贪婪匹配与非贪婪匹配6.正则表达式对象属性支持正则表达式的 String 对象的方法7.分组和反向引用一个子表达式里面的内容8.优先级顺序9.断言1.转义字符*转义字符 *\r叫做行结束符,\n叫做换行符,\t叫做制表符var str = "abcde\"d\"f";console.log(str);//abcde"d"f多行字符串第一种：var test = "\<div&g原创 2020-05-10 21:12:58 · 5422 阅读 · 0 评论 -
JavaScript继承模式+对象枚举+习题（六）
解决：在node1和master节点分别输入 # start-dfs.sh解决原创 2020-04-29 16:01:59 · 2521 阅读 · 0 评论 -
JavaScript对象克隆+数组函数，数组去重+封装（七）
JavaScript对象克隆浅拷贝浅拷贝引用值是要相互影响的，因为它是栈内存之间的赋值，赋值的是地址，一个更改，其他的都要更改。var obj = { name :'abc', age : 123, sex : 'female', card : ['visa','master']//存在一个引用值 } var ...原创 2020-05-02 17:18:02 · 6969 阅读 · 1 评论 -
JavaScript之Data对象+定时器+脚本化css化（八）
Date 对象Date 对象用于处理日期和时间。var myDate=new Date()注释：Date 对象会自动把当前日期和时间保存为其初始值。贴个链接 自个看看文档，当字典用 点这看data（）getTime()获取时间戳，记录时刻求时间差var firstTime=new Date().getTime();for(var i=0;i<1000000;i++){...原创 2020-05-05 20:49:20 · 6661 阅读 · 0 评论 -
JavaScript_DOM知识点+案例应用（九）
HTML DOM当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。HTML DOM 属性是您能够设置或改变的 HTML 元素的值。- 输入关键字栏目，实现效果：如果光标不在里面就显示请输入关键字，不在里面...原创 2020-05-04 11:11:14 · 9500 阅读 · 0 评论 -
JavaScript对象增删改查+原型+构造函数+包装类（十）
AXURE整理复习自用 ????原创 2020-04-25 20:48:32 · 3813 阅读 · 3 评论 -
JavaScript事件处理模型之冒泡与捕获，绑定与解除（十一）
文章目录事件处理模型冒泡捕获触发顺序，先捕获，后冒泡取消冒泡事件阻止默认事件事件对象事件委托事件绑定处理函数的三种方式事件处理程序的内部this指向事件处理模型以下就是事件处理模型例子的代码 <style> .red{ width: 200px; height: 200px; background-color: red; ...原创 2020-05-07 22:25:18 · 6842 阅读 · 1 评论 -
JavaScript实现TAB栏切换+面向对象案例+完整代码（十二）
文章目录实现功能代码**HTML代码****CSS代码**js代码实现功能切换，添加，删除，修改代码HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de...原创 2020-04-10 20:42:10 · 5430 阅读 · 9 评论 -
一篇文章理解AJAX- 异步的JavaScript 和 XML（十三）
文章目录1.AJAX是什么2.创建XMLHttpRequest对象3.向服务器发送请求get or post？4.服务器响应5.onreadystatechange 事件6.ASP/PHP 实例1.AJAX是什么AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。AJAX是基于现有的Internet标准，并原创 2020-06-08 22:26:00 · 4679 阅读 · 5 评论 -
jQuery基础语法+函数+选择器+事件（十四）
文章目录一.需要了解1.基础语法2.入口函数3.jQuery选择器元素选择器一.需要了解1.基础语法Query 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。基础语法： $(selector).action()美元符号定义 jQuery选择符（selector）"查询"和"查找" HTML 元素jQuery 的 action() 执行对元素的操作实例:$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有 <p> 元素$(原创 2020-05-30 17:34:34 · 4940 阅读 · 1 评论 -
jQuery.动态效果的实现+跟着敲系列（十五）
文章目录1.隐藏和显示hide() 和 show() 方法可选的 speed 参数规定隐藏/显示的速度使用回調函數jQuery toggle()可选的 callback 参数说明2.淡入淡出jQuery fadeIn() 方法jQuery fadeOut() 方法1.隐藏和显示hide() 和 show() 方法隐藏和显示 HTML 元素$(selector).hide(speed,callback);$(selector).show(speed,callback);<!DOCTYPE原创 2020-05-31 00:03:22 · 4403 阅读 · 0 评论 -
jQueryDOM操作+添加删除元素+内容属性设置（十六）
文章目录DOM 操作获得内容 - text()、html() 以及 val()， attr()jQuery - 获取内容和属性jQuery 拥有可操作 HTML 元素和属性的强大方法。DOM 操作DOM = Document Object Model（文档对象模型）jQuery 中非常重要的部分，就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。获得内容 - text()、html() 以及 val()， attr()三个简单实原创 2020-06-02 20:07:17 · 2774 阅读 · 1 评论 -
案例练习-jQuery实现tab栏切换 +源代码（十七）
<!DOCTYPE html><html><head> <title>tab切换</title> <link rel="stylesheet" type="text/css" href="jq.css"></head><body><div class="tab-panels"> <ul class="tabs"> <li re.原创 2020-05-18 23:20:03 · 2522 阅读 · 4 评论 -
ES6的新特性？？_ES6是什么+30分钟带你了解ES6核心内容（十九）
ES6的新特性？？_ES6是什么+30分钟带你了解ES6核心内容（上）文章目录一.函数参数的扩展默认参数不定参数箭头函数适合使用的场景不适合使用的场景二.javascript标准函数thisnew 对象指定的对象上下文对象全局对象或 undefined三.箭头函数和this四.Class类基础用法类的主体方法封装与继承一.函数参数的扩展默认参数基本用法function fn(name,...原创 2020-04-10 16:05:26 · 1415 阅读 · 0 评论 -
JavaScript ES6中类和对象学习（十八）
文章目录写在前面：一.如何创建类和对象二.在类中添加方法三.类的继承四.super 关键字调用构造函数调用普通函数五.注意点写在前面：在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。class 的本质是 function。它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。在本文中我们将学习如何创建一个类和对象，如何在类中添加方...原创 2020-04-07 19:57:44 · 1603 阅读 · 0 评论 -
ES6的新特性？？_ES6是什么+30分钟带你了解ES6核心内容（二十）
文章目录一.ES6是什么？目标二.新特性1.const 与 let 变量let与const规则和var的区别2.模版字变量3.解构赋值定义：解构模型数组模型的解构（Array）对象模型的解构（Object）4 对象字面量简写法5.迭代器Iterator迭代过程可迭代的值:for...of循环可迭代的数据结构6.展开运算符应用：可变参数一.ES6是什么？ES6， 全称 ECMAScript 6....原创 2020-04-10 11:07:45 · 1318 阅读 · 0 评论 -
初识微信小程序开发——注册下载配置文件（二十一）
文章目录写在前面1.注册进入微信公众平台获取微信小程序的 AppID2.安装开发者工具下载启动3.了解界面和基本配置文件页面入门介绍文件类型和部分文件说明创建页面配置文件介绍4.页面预览写在前面有一定的知识储备还是好的，毕竟发现自己学的顺畅点也会越来越有兴趣。所以呢推荐学习JavaScrip廖雪峰的小白的零基础JavaScriptHTML+CSS这个呢多了解就可以菜鸟教程可以的1.注册...原创 2020-03-11 12:41:18 · 2403 阅读 · 0 评论 -
微信小程序案例 +实现获取用户信息替换用户名和头像到首页（二十一）
文章目录一.创建小程序二.形成空白文件三.小程序页面路径配置4.修改小程序页面5.与WXML玩耍插入文字插入图片分割代码一.创建小程序参考微信小程序开发零基础——必须得了解的入门知识（一）新建二.形成空白文件点击打开目录，删除除了project.config.json以外所有文件新建’app.json’接下来我们在app.json中写入配置{}保存，我们可以看到编译器报错，因...原创 2020-03-21 20:48:05 · 961 阅读 · 0 评论 -
微信小程序案例——实现获取用户信息替换用户名和头像到首页（二十二）
文章目录一.与wxss玩耍处理图片处理文字调整布局长度单位获取用户资料完善wxml结果输出到界面优化程序在上一篇文章中，我们已经初步理解如何增加视觉元素的方法，下面我们将学习如何修改元素属性一.与wxss玩耍在页面中打开index.wxss文件处理图片从图片开始处理，我们这样设置image的属性image { width: 400rpx; height: 150prx; ...原创 2020-03-21 22:23:20 · 793 阅读 · 0 评论 -
微信小程序案例__简易计算器实现+源代码+注释（二十三）
文章目录一.项目概述二.WXML文件编写三.WXSS文件编写四.JS页面设计四总结一.项目概述功能：实现加减乘除去余(%)删除(Delete)全部清空( C)页面如下：二.WXML文件编写首先我们对计算器页面进行设计，这里我们主要分为两部分，上部分和下部，显示部分分为操作数和操作符。计算器分为五行四列，最外面为纵向布局，里面为横向布局。布局通过样式表操作，代码如下：<...原创 2020-03-25 11:42:54 · 4670 阅读 · 0 评论 -
微信小程序项目__音乐播放器之轮播功能+源代码+知识点介绍+思路（二十四）
文章目录一.项目概述二.文件结构嵌入介绍1.JS文件嵌入2.wxss文件载入3.WXML文件载入三.完成音乐推荐轮播功能1.页面介绍2.项目分析四.swiper组件介绍一.项目概述完成音乐播放器功能，一共包括音乐推荐，播放器和列表三个页面!二.文件结构嵌入介绍1.在页面外部定义页面结构文档，在页面中直接通过include和src路径找到外部结构即可2.在外部定义的样式表通过@imp...原创 2020-04-01 23:55:14 · 3555 阅读 · 6 评论 -
html+css+js百度首页制作+附源代码+实现简单【百度一下】功能
文章目录写在前面页面效果百度网盘提取码写在前面本博客只为有需要的朋友提供借鉴。课堂作业要求完成的，实现了基本功能，光标移上去变成小手，js实现了百度一下功能。页面布局没问题，页面样式没问题。导航栏其他的部分链接没把网址改过来，导航栏位置天气未获取，有需要的可以多花点时间。就说到这，专业前端勿喷。页面效果实现百度一下功能百度网盘提取码链接：https://pan.baidu.com...原创 2020-03-23 16:27:56 · 7795 阅读 · 0 评论