前端学习园地
文章平均质量分 75
网页三剑客、前端框架
howard2005
国家三级笔译。一手代码一手诗,酸甜苦辣寸心知。杏坛泊梦千秋事,万古云山日迟迟。讲授高等数学、Java高级程序设计、动态网站设计与开发(JSP、Servlet)、企业信息系统设计与开发(Spring Boot)、智能移动终端应用开发(Android)、Python Web开发(Django)、大数据离线分析(Hadoop、Hive、Spark)、计算机专业英语等课程,教学深入浅出,语言生动、经验丰富,深受学生好评。指导学生参加移动应用开发省赛和国赛,多次获奖,被授予优秀指导教师称号。热爱翻译,曾翻译西奥尼·帕帕斯数学科普读物《天天数学》与两千余首诗词,已形成独特的译诗风格。
展开
-
初试AngularJS前端框架
AngularJS 是一个由 Google 维护的开源前端 JavaScript 框架,用于构建单页应用(SPA)。它采用双向数据绑定和依赖注入,简化了 DOM 操作和前端逻辑。AngularJS 支持模块化开发,易于测试和维护。它提供了丰富的指令和过滤器,使得开发动态交互式网页变得简单。此外,AngularJS 还拥有一个庞大的社区和生态系统,为用户提供了丰富的资源和工具。原创 2024-09-23 12:13:40 · 974 阅读 · 0 评论 -
HBuilder X里运行JavaScript程序
在HBuilder X通过设置node路径执行JavaScript程序原创 2024-04-28 19:02:12 · 893 阅读 · 3 评论 -
数据结构学习笔记:实现链表
数据结构学习笔记:实现链表1、结点结构结点结构是由数据域和指针域组成,数据域是存放数据的,而指针域存放下一结点的地址。2、链表结构通过数据域访问到我们要的数据,而通过指针域访问到当前结点以后的结点,那么将这些结点串起来,就是一个链表。3、案例演示——JavaScript实现链表(1)创建WebStorm项目,添加LinkedList.html与LinkedList....原创 2019-10-22 10:23:36 · 496 阅读 · 0 评论 -
JavaScript综合项目:博客前端
JavaScript综合项目:博客前端项目1 博客前端:理解JavaScript库一、项目介绍二、理解JavaScript库三、创建基础库原创 2019-12-10 22:29:02 · 1116 阅读 · 0 评论 -
JavaScript学习笔记:AJAX基础
JavaScript学习笔记:AJAX基础一、准备工作1、Python案例:查询城市天气并绘制最高气温与最低气温折线图2、使用JSON Viewer直观查看JSON数据3、Java Web学习笔记13:AJAX基础任务1、下载HBuilder X,创建HBuilder项目任务2、输入城市名称,返回城市代码的页面。网络接口:http://toy1.weather.com.cn...原创 2019-12-10 09:03:02 · 676 阅读 · 0 评论 -
JavaScript学习笔记:迷宫游戏
JavaScript学习笔记:迷宫游戏一、游戏运行效果二、实现步骤1、在HBuilder里创建项目MazeGame,添加maze.html2、在脚本里设置顶边与底边的迷宫数组<script type="text/javascript"> var maze = new Array(); var sides = new Array("Border-Top", "B...原创 2019-12-09 18:29:47 · 2251 阅读 · 1 评论 -
JavaScript学习笔记:创建、添加与删除节点
JavaScript学习笔记:创建与添加节点一、DOM对象节点类型二、创建节点1、创建元素节点createElement(element)用于创建元素节点比如:var anode = document.createElement('a');创建一个标签名为a的超链接元素节点。2、创建文本节点createTextNode(string)用于创建文本节点比如:var tnode = ...原创 2019-12-05 18:48:02 · 896 阅读 · 0 评论 -
JavaScript学习笔记:动态添加与删除表格行
JavaScript学习笔记:动态添加与删除表格一、添加表格行与单元格Javascript可以控制table,动态的插入行和单元格。rows保存着<tbody>元素中行的HTMLCollection。语法:tableObject.insertRow(index)该方法创建一个新的TableRow对象,表示一个新的<tr>标记,用于在表格中的指定位置插入一个新行,并返...原创 2019-12-04 17:15:41 · 996 阅读 · 0 评论 -
JavaScript学习笔记:创建自定义对象
JavaScript学习笔记:创建自定义对象一、利用构造函数模式创建自定义对象使用构造函数可以创建特定类型的对象,类似于Array、Date等原生JavaScript对象。<script> // 构造函数模式创建自定义对象 function Person(name, age) { this.name = name; this.age = age; this.say...原创 2019-12-04 15:32:40 · 571 阅读 · 0 评论 -
JavaScript学习笔记:数组
JavaScript学习笔记:数组数组是一组数据构成的集合,通过下标或索引访问里面的元素。1、创建数组(1)创建空数组,逐个赋值<script type="text/javascript"> // 创建数组 var scores = new Array(); // 逐个赋值 scores[0] = 89; scores[1] = 90; scores[2] = 67...原创 2019-12-03 15:07:48 · 610 阅读 · 1 评论 -
在Chrome78浏览器上如何实现自动播放音视频
在Chrome78浏览器上如何实现自动播放音视频问题:video与audio标签里设置了autoplay="autoplay",在Chrome78浏览器上无法实现自动播放。1、查看Chrome浏览器版本2、该版本Chrome浏览器移除了autoplay-policy的标记3、设置Chrome的环境变量4、在命令行带参数启动Chrome浏览器chrome ...原创 2019-11-26 10:24:51 · 6166 阅读 · 2 评论 -
使用JSON Viewer直观查看JSON数据
目录一、使用JSON Viewer直观查看JSON数据1、下载JSON Viewer2、启动JSON Viewer2、在Text选项卡下的文本框里输入JSON文本3、单击Viewer选项卡,可直观地查看JSON数据结构4、在Text选项卡下的文本框里输入JSON数组文本5、单击Viewer选项卡,就可直观地查看JSON数组的数据结构6、在Text选项卡下的文本框里输...原创 2019-11-26 08:55:47 · 3429 阅读 · 0 评论 -
jQuery学习笔记01:初试jQuery
jQuery学习笔记01:初试jQuery一、下载jQueryjQuery官网:https://jquery.com二、案例演示——Welcome to jQuery World1、在WebStorm里创建项目jQueryDemo2、创建js目录,将jquery-3.4.1.js放入该目录3、创建demo01.html<!DOCTYPE ...原创 2019-11-14 11:21:52 · 523 阅读 · 0 评论 -
ES6学习笔记04:Set与Map
ES6学习笔记04:Set与MapJS原有两种数据结构:Array与Object,ES6新增两种数据结构:Set与Map一、Set数据结构Set类似于数组,但是成员值不允许重复,因此主要用于数据去重。Set本身是一个构造函数,用来生成Set数据结构,其实例是一个类数组的对象。Set提供的方法:add(value)、delete(value)、has(value)、clear()...原创 2019-09-05 07:01:23 · 519 阅读 · 0 评论 -
JavaScript学习笔记:语句
JavaScript学习笔记:语句JavaScript程序由语句组成,语句遵守特定的语法规则。例如:var语句、if语句、while语句、with语句、switch语句等。1、块语句块语句常用于组合0~多个语句,块语句用一对花括号定义。语法:{ 语句1; 语句2; …… 语句n;}注意: 用var定义的变量没有块级作用域,...原创 2019-08-20 15:56:12 · 363 阅读 · 0 评论 -
JavaScript学习笔记:类型检测
JavaScript学习笔记:类型检测1、利用typeof检测数据类型注意:type of null,返回的不是"null",而是"object"。typeof [1, 2, 3],返回的不是"array",而是"object"。2、利用obj instanceof Object判断obj是不是Object的实例注意:instanceof 只能用来判断两...原创 2019-08-18 16:28:01 · 329 阅读 · 0 评论 -
JavaScript学习笔记:对象
JavaScript学习笔记:对象1、声明对象(1)字面量对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS - 字面量对象</title></head><body>...原创 2019-08-15 09:07:04 · 376 阅读 · 0 评论 -
JS案例:使用对象、对象数组、正则表达式
JS案例:使用对象、对象数组、正则表达式1、使用对象声明对象变量,其实就是将一个json对象赋给一个变量,可以看到json对象就由一些键值对构成。运行效果:如果将{id: 3, name: "mike", sex: "male"}保存在文本文件里,那么如何读取出来呢?function readFile(filename) { var fso ...原创 2018-02-24 11:58:21 · 424 阅读 · 0 评论 -
HTML学习笔记:设置超链接文本修饰
设置超链接文本修饰1、演示效果2、编写代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>超链接文本修饰</title> <style type="text/css"> ...原创 2018-02-24 07:50:51 · 1123 阅读 · 0 评论 -
HTML学习笔记:设置文本字体
目录一、设置字体名1、演示效果2、编写源码二、设置字号1、使用单位设置字号(1)常用单位(2)案例演示(3)编写代码2、使用关键字设置字号(1)绝对关键字(2)相对关键字一、设置字体名1、演示效果2、编写源码<!DOCTYPE html><html lang="en"><head> &...原创 2018-02-24 07:43:03 · 982 阅读 · 0 评论 -
Specificity考量
Specificity考量1、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多样式规则作用于同一元素</title> <style type="text/cs原创 2018-02-24 07:39:36 · 361 阅读 · 0 评论 -
首*伪类选择器
一、首子伪类选择器(first-child selector)1、效果2、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>首子伪类选择器</title> <style t原创 2018-02-24 07:26:17 · 399 阅读 · 0 评论 -
hover伪类示例
hover伪类示例1、效果鼠标悬停在某一记录行,背景色和字体颜色发生变化。2、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hover伪类示例</title> <sty原创 2018-02-24 07:23:23 · 525 阅读 · 0 评论 -
超链接的伪类选择器
超链接的伪类选择器1、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>超链接伪类选择器</title> <style type="text/css"&原创 2018-02-24 07:20:15 · 2755 阅读 · 2 评论 -
利用CSS实现悬停下拉菜单
利用CSS实现悬停下拉菜单1、效果鼠标移到【搜索引擎】,自动弹出其下拉菜单,在下拉菜单里移动,光条随之移动。2、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>悬停下拉菜单演示</title>原创 2018-02-24 07:17:32 · 5145 阅读 · 1 评论 -
rem使用示例
rem使用示例em是相对于上一层父容器来进行计算,但是rem永远都是相对于顶层容器来计算计算。1、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>rem演示</title> &原创 2018-02-24 07:13:16 · 714 阅读 · 0 评论 -
px~em~pt转换表
px~em~pt转换表em的计算是相对的。1、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>em演示</title> <style type="text/cs原创 2018-02-24 07:11:04 · 374 阅读 · 0 评论 -
HTML学习笔记:实现条纹边框
实现条纹边框1、效果演示2、编写代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>条纹边框</title> <style type="text/css"> #...原创 2018-02-24 07:09:37 · 552 阅读 · 0 评论 -
左竖条8种实现方式
左竖条8种实现方式1、效果图2、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>左边竖条</title> <style type="text/css"原创 2018-02-24 07:05:37 · 370 阅读 · 0 评论 -
伪元素before、after示例
伪元素before、after示例1、运行效果2、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>伪元素示例</title> <style type="text原创 2018-02-24 07:02:07 · 369 阅读 · 0 评论 -
贵美网首页:深入理解Web开发中的div+css布局
关于Web开发中的div+css布局原创 2018-02-24 07:00:02 · 1837 阅读 · 1 评论 -
HTML学习笔记:iframe框架演示
iframe框架演示1、效果演示2、编写代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>iframe框架演示</title></head><body><div...原创 2018-02-23 23:29:54 · 2463 阅读 · 0 评论 -
贵美主页框架演示:从代码到效果的详细解析
贵美主页框架演示1、效果演示2、编写代码(1)贵美框架.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>贵美框架</title></head><frameset ...原创 2018-02-23 23:24:16 · 1980 阅读 · 0 评论 -
图标截取——背景偏移量技术
图标截取——背景偏移量技术美工将若干个图标合在一起做成一张图片,怎么取出里面的每一个小图标来用呢?比如icon.gif包含一些图标。1、效果图2、实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>演示从大图中截取小图标原创 2018-02-23 23:20:41 · 935 阅读 · 0 评论 -
HTML学习笔记:让div在屏幕居中,图片在div里居中
目录一、效果演示二、实现方法方法一:利用CSS实现方法二:利用JavaScript实现方法三:利用JavaScript实现方法四:利用jQuery实现一、效果演示二、实现方法方法一:利用CSS实现<!DOCTYPE html><html lang="en"><head> <meta chars...原创 2018-02-23 23:12:03 · 2736 阅读 · 0 评论 -
HTML学习笔记:演示HTML页面之间传递数据
1、起始页面page01.html2、目标页面page02.html3、查看运行效果单击【提交】按钮,跳转到目标页面page02.html4、出现乱码问题5、解决乱码问题如何解决这个问题呢?十分简单,只需修改一下page02.html文件:将查询字符串利用decodeURI函数将url进行解码即可。运行效果:...原创 2018-02-23 22:58:52 · 2206 阅读 · 0 评论 -
Flex布局演示01
Flex布局演示012009年,W3C 提出了一种新的方案——Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。1、效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l原创 2018-02-23 22:16:45 · 454 阅读 · 0 评论 -
AngularJS实战:简单计算
在IntelliJ IDEA中安装AngularJS插件,通过在HTML文件中应用`ng-app`、`ng-model`和`ng-bind`指令,实现简易计算器应用的实时数据绑定。用户输入变化时,总价自动更新,直观展示了AngularJS框架下双向数据绑定与响应式编程的优势。原创 2018-02-24 11:49:14 · 635 阅读 · 1 评论 -
jQuery的ajax提交表单
jQuery的ajax提交表单1、表单<form id="ff" method="post"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i>&l...原创 2018-02-24 15:33:34 · 362 阅读 · 0 评论 -
jQuery学习笔记02:核心部分
jQuery学习笔记:核心部分一、$(expr)1、说明$(expr) 该函数通过CSS选择器、XPath或html代码来匹配目标元素参数:expr(字符串,一个查询表达式或一段html字符串)2、案例演示<!DOCTYPE html><html lang="en"><head> <meta charset="UT...原创 2019-11-14 12:06:09 · 458 阅读 · 0 评论