响应式网页学习笔记
文章平均质量分 89
PRINT!
追风赶月莫停留
展开
-
见缝插针之简单版、升级版、最强版
目录你好!玩见缝插针吗?游戏简介1. 游戏逻辑分析2. 功能3. 界面你好!玩见缝插针吗?莫西莫西,接下来将为小生将简单展示一下,咱们用JavaScript写的见缝插针,到底是个啥样,在这里我想说(我!讨!厌!所!有!的!前!端!页!面~~~),简单来说就是菜的基础上还没有审美,好了,该进入正文了!提示:以下是本篇文章正文内容游戏简介1. 游戏逻辑分析圆圈( 中心大圆、等待发射的小圆、跟随大圆旋转的小圆)小圆通过空隙插入大圆,小圆发射完则成功小圆触碰到旋转小圆则失败2. 功能点原创 2021-07-19 22:28:34 · 815 阅读 · 3 评论 -
响应式网页设计之jQuery操作DOM
jQuery操作DOM补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来。文章目录jQuery操作DOM一、jQuery添加节点二、jQuery删除节点1. remove()empty()三、jQuery获取节点六、网页小案例1.题目要求2.源码奉上一、jQuery添加节点使用jQuery工厂函数$()可以创建HTML元素** $(HTML标签) **var $h1 = $( "<h1>He原创 2021-06-23 20:39:57 · 253 阅读 · 4 评论 -
响应式网页设计之jQuery基础
jQuery基础补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来。文章目录jQuery基础一、jQuery简介1. 引入jQuery2. jQuery版本二、jQuery对象三、入口函数四、jQuery基本使用五、jQuery选择器一、jQuery简介jQuery是一个快速、简洁的JavaScript框架,它封装了JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档原创 2021-06-10 11:28:19 · 1128 阅读 · 1 评论 -
响应式网页设计之JavaScript与CSS交互
JavaScript与CSS交互补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来。文章目录JavaScript与CSS交互一、style属性二、隐藏元素三、修改className更改样式一、style属性通过元素的style属性,可以获取或修改元素的CSS样式如下代码所示:将body的背景色设置为reddocument.body.style.backgroundColor = 'red'注意:原css原创 2021-06-10 10:55:10 · 586 阅读 · 0 评论 -
响应式网页设计之DOM事件绑定
DOM事件绑定补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来。文章目录DOM事件绑定一、DOM0级别事件绑定二、DOM2级别事件绑定三、DOM0级事件和DOM2级事件区别五、事件传参六、常用事件一、DOM0级别事件绑定DOM0级别:DOM最早版本的事件绑定方式,被所有浏览器兼容HTML绑定<input type="button" id="btn" value="click me" onclic原创 2021-06-09 21:22:17 · 366 阅读 · 1 评论 -
响应式网页设计之操作DOM
操作DOM补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来。文章目录操作DOM一、DOM元素特性二、table对象二、使用步骤1.引入库2.读入数据总结一、DOM元素特性element.attributes:返回元素的所有特性element.setAttribute(name,value):设置元素的指定特性element.getAttribute(name):获取元素的指定特性element.rem原创 2021-06-09 20:57:57 · 215 阅读 · 0 评论 -
响应式网页设计之DOM对象
DOM对象一、认识DOM1.什么是DOM二、Node节点1.初识Node节点2.访问Node节点3.访问节点的属性补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来。一、认识DOM1.什么是DOM当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。示例:DOM树<html> <head> <title>这是标题</titl原创 2021-06-02 13:12:21 · 320 阅读 · 0 评论 -
响应式网页设计之BOM对象模型
BOM编程一、初识BOM1.什么是BOM二、浏览器对象模型:1.Window(窗口对象):2.Document(文档)对象3.location对象4.navigator对象5.screen对象6.history对象7.frames框架补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来。一、初识BOM1.什么是BOMBOM(Browser Object Model)是指浏览器对象模型,可以对浏览器窗口进行访问和操作。原创 2021-06-01 12:40:04 · 484 阅读 · 0 评论 -
响应式网页设计之正则表达式
JavaScript对象编程(七)一、认识正则表达式1.什么是正则表达式2.正则表达式的作用3.正则表达式规则二、正则表达式的使用1.正则表达式的基本语法三、正则对象RegExp1.创建正则对象2.正则对象的三种方法四、网页小案例1.题目要求2.源码奉上补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来。一、认识正则表达式1.什么是正则表达式正则表达式(Regular Expression,简称为RegEx),是用原创 2021-04-12 22:34:33 · 3132 阅读 · 2 评论 -
响应式网页设计之String对象
JavaScript对象编程(六)一、认识String对象1.什么是String对象2.创建String对象3.JSON与JS对象二、JSON的创建与访问1.创建JSON(两种格式)2.JSON的访问三、JS对象的创建与访问1.创建JS对象2.JS对象的访问与赋值3.遍历JS对象四、JSON与JS对象的转换1.JSON转为JS对象2.JS对象转为JSON五、你不知道的小知识1.统计数组中元素出现的次数2.使用sort对JS对象进行排序六、网页小案例1.题目要求2.源码奉上补充:文章中所有的代码都是写在ht原创 2021-04-07 17:50:23 · 726 阅读 · 4 评论 -
响应式网页设计之JSON对象
JavaScript对象编程(五)一、JSON与JS对象1.什么是JSON2.什么是JS对象3.JSON与JS对象二、JSON的创建与访问1.创建JSON(两种格式)2.JSON的访问三、JS对象的创建与访问1.创建JS对象2.JS对象的访问与赋值3.遍历JS对象四、JSON与JS对象的转换1.JSON转为JS对象2.JS对象转为JSON五、你不知道的小知识1.统计数组中元素出现的次数2.使用sort对JS对象进行排序六、网页小案例1.题目要求2.源码奉上补充:文章中所有的代码都是写在html文件中,JS原创 2021-03-31 11:34:37 · 926 阅读 · 0 评论 -
响应式网页设计之数组的方法
JavaScript对象编程(四)一、数组转字符串(两种方式)1.toString()2.join()3.小题目:输出当前日期时间二、合并数组 concat()1.concat()的使用2.concat()的注意事项3.concat()小知识三、查找索引 indexOf()1.indexOf()的使用四、数组截取 slice()1.slice()的使用2.slice()小练习五、数组更新 splice()1.splice()的使用2.splice()小练习六、数组归并 reduce()1.认识reduce(原创 2021-03-25 17:25:33 · 2510 阅读 · 4 评论 -
响应式网页设计之二维数组
JavaScript对象编程(三)一、二维数组1.创建与访问2.小练习二、数组的方法1.位移元素2.数组排序3.数字排序4.多维数组排序三、网页小案例1.题目要求2.原码奉上补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来。一、二维数组1.创建与访问 创建二维数组在上一章分享的数组中再加一层数组即可;比如一个水果摊,需要一个 二维数组 存放 水果的价格 和 水果下面代码中展示的 fruits 就是一个水果原创 2021-03-24 18:50:21 · 912 阅读 · 2 评论 -
响应式网页设计之Math对象及数组
JavaScript对象编程(二)一、Math对象1.了解Date对象2.Math对象的属性3.Math对象的方法4.小题目:生成随机整数二、数组1.认识数组2.创建数组3.数组的访问3.添加和删除数组元素三、网页小案例1.题目要求2.原码奉上补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来。一、Math对象1.了解Date对象 ① Math对象能够进行比基本数学运算更为复杂的运算。② Math对象不需要生成对原创 2021-03-22 20:43:27 · 742 阅读 · 3 评论 -
响应式网页设计之Date对象及定时器函数
JavaScript对象编程(一)一、Date对象1.了解Date对象2.创建Date对象3.Date对象常用方法4.小题目:输出当前日期时间二、定时器函数1.setTimeout()2.setInterval()3.清除定时器()三、网页小案例1.题目要求2.原码奉上补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来。一、Date对象1.了解Date对象Date对象是JavaScript的其中一种内置对象。常用的原创 2021-03-16 20:58:07 · 2511 阅读 · 16 评论 -
响应式网页设计之循环及函数
JavaScript语法基础(三)一、循环语句1.while循环2.do...while循环3.for循环4.for...in循环二、函数1.自定义函数2.匿名函数3.事件调用三、网页小案例1.题目要求2.原码奉上补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来。一、循环语句1.while循环先判断条件,只要条件为真,while循环体中的代码就会执行,然后再回条件判断,如果条件为假,则跳出循环;如果条件为真,将继原创 2021-03-11 20:31:33 · 1049 阅读 · 0 评论 -
响应式网页设计之运算符及判断语句
JavaScript语法基础(二)一、运算符号1.运算符的使用二、判断语句1.if 语句2.switch语句三、网页小案例1.题目要求2.原码奉上一、运算符号1.运算符的使用这里我选取了部分典型的运算符进行讲解使用==时,只比较值是否相等这里的a、b两个变量的数据类型不同,但是值相同。var a = 1, b = "1"; a==b; //true a===b; //false 使用+或+=时,当其中一个值为字符串时,会把另一个值转换为字符串再进行拼接(字符串是强类型)原创 2021-03-10 16:51:06 · 758 阅读 · 3 评论 -
响应式网页设计之变量及数据类型
JavaScript语法基础(一)一、变量二、数据类型1.String2.读入数据总结一、变量变量是用于存储信息的"容器"。例如:用字母来保存值【age = 18】,这里的 age 被称为变量。JS为弱类型语言(有数据类型,只是不需要严格规定),常用变量类型(字符串、数字、布尔值、对象等)变量的命名规则① 第一位必须是字母(也能以 $ 和 _ 符号开头,不推荐这么做)② 可以包含字母、数字、下划线、美元符号$③ 变量名不能是关键字或保留字④ 通常情况下,统一使用小驼峰命名法(camel原创 2021-03-09 20:46:43 · 1301 阅读 · 8 评论 -
响应式网页设计之JavaScript基础
JavaScript一、认识JavaScript1.什么是JavaScript?2.JavaScript的组成?3.JavaScript用来做些什么?2.JavaScript与java有什么关联?二、JavaScript基础入门1.在网页中引入JavaScript的方式(3种)2.输入/输出语句2.转移字符三、网页小案例1.题目要求2.原码奉上一、认识JavaScript1.什么是JavaScript?JavaScript(简称js)是一门客户端脚本语言(也是弱类型语言),运行在客户端的浏览器中,浏原创 2021-03-04 15:22:45 · 1455 阅读 · 9 评论 -
响应式网页设计之初步了解
响应式网页设计一、什么是响应式网页?答:为不同设备类型(如:电脑、手机、平板电脑)建立的不同的网页,检测到分辨率(应该可以说是屏幕吧)大小后调整到相应的网页。二、响应式网页的作用?答:为了解决不同设备的显示问题如图所示,如果我们将网页进行等比缩放,那么将会存在很多界面显示不完整问题或者不美观,总之影响用户体验就是不行正是因为存在这样的问题,才有了响应式设计,通过建立一个网页自动改变网页内容大小、布局适应不同分辨率的屏幕。三、开发响应式网页需要什么开发工具呢?所谓工欲善其事,必先利其器①原创 2021-03-02 20:26:41 · 413 阅读 · 0 评论