- 博客(37)
- 收藏
- 关注
RSS订阅原创 React组件和通讯
state属性⌲创建构造函数中初始化⌲使用使用：this.state.属性名class Test extends React.Component { constructor(props) { super(props) this.state = { name: "value" } } render() { return ( <div>
2022-01-10 12:23:12
343
原创 初识React
React组件函数式定义组件语法：function Zujian(props){ return ( <div> {props.属性} </div> )}ReactDOM.render(<Zujian 属性="属性名"/>,document.getElementById("app"))类定义组件语法：class Zujian extends React.Component{ render(){ returen( <di
2022-01-07 11:09:29
379
原创 移动端事件
事件类型事件名说明touchstart手指触摸开始事件touchmove手指移动事件touchend手指离开事件使用：与PC端点击事件相同属性跟踪触摸属性属性名说明touches返回屏幕上触点的数组changedTouches返回出发事件触点的数组targetTouches返回事件被触发时，该元素上触点的数组宽高属性属性名说明clientX/Y视口坐标pageX/Y文档坐标s
2021-11-17 12:15:48
66
原创 图片懒加载
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img {
2021-11-12 17:17:49
58
原创 自适应+响应式布局/Flex布局
自适应em rem单位名称emrem相对位置父元素根元素html响应式媒体查询（media）分类Value媒体类型all/screen/print媒体特性特定宽高屏幕方向等关键词and/only/not格式@media (关键词) 媒体类型（and 媒体特性 and 媒体特性）{相关改变样式}Flex布局常用属性分类：flex/flex-inline盒子属性 盒子属性 伸缩流方向flex-dire
2021-11-12 11:03:33
235
原创 调整移动端大小响应
$(function(){ function setRem(){ var clWidth = $(window).width(); var newWidth = clWidth/375*100; $("html").css("font-size",parseInt(newWidth) + "px"); } setRem(); $(function(){ var time; $(window).on("resize",function(){ clearTimeout(t
2021-11-10 10:23:38
812
原创 Bootstrap-css组件
小图标类名：glyphicon glyphicon-样式样式：通过CSS设置字体大小和颜色设置示例：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi
2021-10-30 21:39:41
448
原创 Canvas-1
第一步获取canvas元素：var canvas =document.getElementById(“id”);第二步设置绘图环境var c = canvas.getContext"2d";第三步开始绘制c.beginPath();第四步绘制样式语法说明直线c.moveTo(x,y);c.lineTo(ex,ey);x,y-起始点ex,ey-结束点三角形c.moveTo(x,y);c.lineTo(x1,y1);c.lineTo(x2,y2);c.cl
2021-10-16 14:08:40
124
原创 多媒体播放器
音频播放器audio语法第一种<audio src="音频路径"></audio>第二种<audio> <source src="路径1"/> <source src="路径2"/> <source src="路径3"/> 无法播放提示</audio>标签属性属性说明controls是否显示控件/按钮autoplay是否自动播放loop是否循环播放prel
2021-10-15 20:47:59
142
原创 jQuery中的Ajax
$.ajax(参数)$.ajax({ type:"get/post", url:"目标文件路径", data:"传到数据库的数据", dataType:"json/text/html/script", success:function(date){ 链接成功执行 }, error:function(a,b,c){ 链接失败执行 }, async:true/false（是否同步）})$ .get(参数)/ $ .post(参数)[]中内容可省略$.get("url路径"[
2021-10-08 14:35:01
65
原创 jQuery事件与特效
事件鼠标事件事件说明mouseenter鼠标移入（无冒泡）mouseleave鼠标移出（无冒泡）mouseover鼠标移入mouseout鼠标移出mousemove鼠标移动click单击dblclick双击复合事件$(selector).hover(function(){enter事件},function(){leave事件})键盘事件（参数e）事件说明keydown按键被按下keyup按键被
2021-10-07 18:50:22
104
原创 jQuery中的DOM操作(样式、元素、节点、属性）
样式操作增、改$(selector).css(name,value)$(selector).addClass(“classname”)----增加多个时classname用空格隔开$(selector).addClass(“classname1” “classname2” “classname3” “classname4”)获取$(selector).css(name)删除$(selector).removeClass(“classname”)----删除多个时classname用空格隔
2021-09-29 17:03:25
235
原创 B3-JS面向对象-继承
继承方法一 空对象作为中介1：普通语法：var F = function(){};F.prototype = Father.prototype;Child.prototype = new F();Child.prototype.constructor = Child;var 变量名 = new Child(参数);变量名.属性名/属性名（）2：封装为函数语法：function extend(Child,Father){var F = function(){};F.prot
2021-09-15 14:23:28
102
原创 B3-JS面向对象
object方法var 对象名称 = new Object（）；对象名称.创建属性名 = “值”；对象名称.创建属性名 = function（）{**;}示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
2021-09-14 16:35:59
114
原创 B3-正则表达式
语法/表达式/修饰符修饰符修饰符说明g代表可以进行全局匹配i代表不区分大小写匹配m代表可以进行多行匹配表达式字符符号描述/…/-^匹配字符串的开始$匹配字符串的结束\s任何空白字符\S任何非空白字符\d匹配一个数字字符\D匹配除了数字之外的任何字符\w匹配一个数字，字母或下划线\W匹配任何非单字字符\n匹配换行符\u匹配汉字重复次数符号描
2021-09-12 11:47:21
120
原创 B3-JavaScript事件
绑定事件的方法行内onclick = “”—函数对象.onclick = function(){}对象.addEventListener(“click”,function(){},false)方法1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini
2021-09-08 16:07:16
105
原创 B3-DOM节点
节点类型1.文档节点2.元素节点3.属性节点4.文本节点5.注释节点节点关系属性名（.属性）描述parentNode返回节点的父节点childNodes返回节点的所有子节点（数组集合）属性名（包括文本节点）属性名（不包括文本节点）描述firstChildfirstElementChild返回第一个子节点lastChildlastElementChild返回最后一个子节点nextSiblingnextElementS
2021-09-06 16:55:19
84
原创 B3-操作BOM和DOM
window对象的常用方法window.alert（）警示框window.prompt（）输入框window.confirm（）选择框window.open（）打开一个新窗口window.close（）关闭本窗口计时器window.setTimeout（～，time000）time秒后执行～函数或表达式window.setInterval（～，time000）每隔time秒执行一次～函数或表达式以上window方法中的window均可省略不写1.history对象的方法history.
2021-09-04 17:55:19
183
原创 B3-内置对象
内置对象包括属性和方法属性-------对象名.属性名称；方法-------对象名.方法名称（）；Array对象用于在一个变量名中储存一系列的值。第一步：创建数组var 变量名 = new Array（数组长度）；第二步：赋值1.var 变量名 = new Array（数组长度）；变量名[下标] = ***；下标取值：0~（数组长度-1）2.var 变量名 = new Array（num1，num2，…）；3.var 变量名 = [num1，num2，…]；第三步：Array对象
2021-08-30 16:34:56
79
原创 B3-JavaScript1.3
数组创建数组语法1.[num1,num2…]2.赋值------var 变量名 = [num1,num2,…];访问数组元素变量名[角标]**注意：**角标计数从0开始例如：num1—变量名[0]数组的常用属性及方法属性1-方法3描述应用length（属性）设置或返回数组中元素的数目[点击查看代码及样式]push向数组末尾添加一个或多个元素，并返回新的长度[点击查看代码及样式]join把数组的所有元素放入一个字符串，并通过一个分隔符进行分割
2021-08-26 18:38:01
76
原创 B3-JavaScript1.2
选择结构if语法：if（判断条件）{ 判断条件为真执行代码块；}else{ 判断条件为假执行代码块；}<!-- 判断是否是闰年 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-08-24 17:55:52
62
原创 B3-JavaScript1.1
引用JavaScript内部样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script>
2021-08-23 14:13:34
74
原创 B2-CSS制作动画
过渡transition：；值取值1.过渡属性all/其他属性2.所需时间**s（秒）3.动画函数linear/ease/ease-in/ease-out/ease-in-out4.执行延迟时间**s（秒）例如：transition:all 5s linear;(中间用空格隔开)动画建立关键帧@keyframes 动画名称{0%{ }…%{ }100%{ }}或者@keyframes{from{ }…%{ }to{
2021-08-14 13:50:19
53
原创 B2-CSS高级应用
transform属性2Dtranslate平移语法：—transform：translate(xpx,ypx);<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum
2021-08-14 13:06:02
198
原创 B2-CSS3应用
边框圆角语法：----属性 border-radius:***;----值 px/%<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</
2021-08-13 17:13:35
83
原创 B2-HTML5表单
新增input类型 类型 说明 使用 email 电子邮件地址文本框，提交表单时会自动验证Email的值 若提交类型不符合电子邮件地址类型，则会显示提醒 url 网页的URL，提交表单时会自动验证URL值 -- number 只能输入数字 [点击查看代码及样式] range 指定范围内的数字选择器，以滑块的形式呈现 [点击查看代码及样式] search 用于搜索引擎的搜索框 --
2021-08-12 20:50:43
107
原创 B2-初识HTML5
新增元素结构元素元素名称说明header定义了文档的头部区域nav定义导航连接的部分section定义文档中的节（section、区段）article定义页面独立的内容区域aside定义页面的侧边栏内容footer定义section或document的页脚网页元素元素名称说明video定义视频，如电影片段或其他视频流audio定义音频，如音乐或其他音频流canvas定义图形datalist
2021-08-12 18:19:41
68
原创 CSS定位
CSS定位position属性值说明static默认值，无定位relative相对定位，定位位置从该元素的位置出发absolute绝对定位，定位位置从该元素的父级元素的位置出发或父级的父级，如果都没有就按照浏览器的窗口定位fixed固定定位，定位位置从浏览器窗口左上点出发，不跟随浏览器的滑动改变位置相关属性说明属性值（正值）说明（当数值为负时则向相反方向移动）top数字+单位（100px）向远离上部固定大小的方向移动r
2021-08-08 16:27:28
56
原创 HTML浮动
浮动display属性实现内联元素和块级元素之间的转换值特点inline该元素属于内联元素block该元素属于块级元素inline-block该元素可不换行，但有着块级元素的特性（可设置该元素的宽高等）none该元素不显示例如：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equ
2021-08-08 15:51:08
87
原创 列表、表格和表单
列表、表格和表单列表无序列表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>
2021-08-06 19:09:03
136
原创 css修饰HTML
css修饰HTML一、CSS的优势1.内容与表现分离；2.CSS使网页的表现统一，并且容易修改；3.丰富的样式使得页面布局更加灵活；4.减少网页的代码量，增加网页的浏览速度，节省网络带宽；5.运用独立于页面的CSS，还有利于网页被搜索引擎收录。二、引入CSS标签的方式1行内样式<!DOCTYTE html><html><head lang="en"> <meta charset="UTF-8"></head><bo
2021-07-31 20:33:59
566
原创 初识HTML
初识HTML一、网页中常见的基本标签标题标签<!DOCTYTE html><html><head lang="en"> <meta charset="UTF-8"></head><body> <h1>一级标题</h1> <h2>一级标题</h2> <h3>一级标题</h3> <h4>一级标题</h4> <h5&
2021-07-28 19:40:22
88
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人