- 博客(92)
- 收藏
- 关注
RSS订阅原创 json--code
/////<!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> <sc
2022-02-09 21:51:55
723
原创 json。
本节主要内容：1.数组去重2.数组排序3.json概述4.json方法5.json解析学习目标：节数 知识点 要求第一节 数组去重 数组去重 了解第二节 数组排序 数组排序 了解第三节 json概述 json概述 掌握第四节 json方法 json方法 掌握第五节 json解析 json解析 掌握一、数组去重数组去重是指：从数组中找到相同的元素，并将相同的元素删除。保证数组中的每个元素都是独一无二的操作。1.1.indexOf去重基本思想是：利用数组的indexOf方法，目
2022-02-09 15:37:54
197
原创 window对象与正则表达式---code
//<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>窗口1</title></head><body> <a href="new
2022-02-09 15:30:58
481
原创 window对象与正则表达式
主要内容：1.页面加载和js文件解析顺序2.浏览器性能优化3.window对象其他属性4.数据解析5.call和apply学习目标：节数 知识点 要求第一节 页面加载和js文件解析顺序 什么是事件 了解事件分类 了解第二节 浏览器性能优化 回流和重绘 了解documentFragment概述 了解第三节 window对象其他属性 history对象 掌握第四节 数据解析 数据解析 掌握第五节 call和apply call的使用 掌握apply的使用 掌握call和apply
2022-02-08 21:56:00
216
原创 windos事件对象code
//<!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> #red {
2022-02-08 21:28:29
294
原创 window对象
本节主要内容：1.BOM的概念2.window对象3.提示框4.间隔调用和延迟调用学习目标：节数 知识点 要求第一节 BOM的概念 什么是BOM 了解BOM包含哪些内容 了解第二节 window对象 关于window对象 了解window对象常用的属性 了解window对象常用的方法 了解第三节 提示框 提示框 掌握第四节 间隔调用和延迟调用 间隔调用和延迟调用 掌握一、BOM的概念1.1什么是BOM?BOM：Browser Object Model 是浏览器对象模型，BO
2022-02-07 10:26:57
2095
原创 Event事件对象
主要内容：1.even对象2.event对象常用的属性和方法3.IE中event对象常用的属性和方法4.鼠标滚轮事件5.文档事件6.事件委托学习目标：节数 知识点 要求第一节 event对象 关于event对象 了解event对象的使用 了解第二节 event中常用的属性和方法 event中常用属性 了解event中常用的方法 了解第三节 ie中常用的属性和方法 ie浏览器常用的属性和方法 掌握第四节 鼠标滚轮事件 鼠标滚轮事件 掌握第五节 文档事件 文档事件 掌握第六节
2022-02-07 10:17:03
814
原创 Event事件常用对象==鼠标事件和表单事件
<!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> div {
2022-02-06 16:26:48
367
原创 事件对象2
<!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> #box {
2022-02-05 22:58:04
80
原创 js事件2
主要内容：1.表单文档事件2.键盘事件3.滚动事件4.手机触摸事件5.表单注册案例学习目标：节数 知识点 要求第一节 表单文档事件 获取焦点事件 了解失去焦点事件 了解第二节 键盘事件 键盘事件的种类 了解键盘属性 了解第三节 滚动事件 回到页面顶部 掌握滚动事件 掌握滚动事件的属性 掌握第四节 手机触摸事件 手机触摸事件 掌握第五节 表单注册案例 表单注册案例 掌握一、表单文档事件焦点：js当前正在和用户发生交互的节点称为焦点。可以类比为人类目光汇聚的地方。语法：获
2022-02-05 17:40:44
237
原创 js事件1
1.在html中this表示当前存在的标签的元素2queryselecto选择符选出来的元素及元素数组是静态的，而getelementbyid这种方法选出的元素是动态的。queryselecto通常放入 标签如div ，getelementbyid放入id 如 box3innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。4getElementsByTagName(Tagname) 方法可返回带有指定标签名的对象的集合。. Tagname是标签的名称，如p、a、img等标签.
2022-02-05 15:51:20
814
原创 选项123全选，反选
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项123</title></head><body><input type="checkbox" name="hobby" value="bt1" class="opt">选项1<input type="checkbox" na
2022-02-05 15:49:38
119
原创 getElementsByClassName和getElementsByName
对于getElementsByClassName和getElementsByName的方法获取对象康尾部即可，id是id，Class是class，Name是name
2022-02-05 15:03:02
335
原创 js购物车
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物车</title> <style> table,tr,td{ border: 1px solid; } td{ text-align: center; .
2022-02-05 10:50:13
300
原创 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> <style> #box {
2022-02-04 10:36:15
550
原创 css中按钮有四种状态
css中按钮的四种状态普通状态hover 鼠标悬停状态active 点击状态focus 取得焦点状态.btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框下面的例子中.btn1用focus按钮会按下，不弹起 .btn2用active按钮点击按下，会弹起Save SettingsSubmit复制代码.btn{appearance: none;background: #026aa7;color: #fff;font-size: 20px;
2022-02-03 21:42:59
981
原创 random方法
<!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> <script>
2022-02-02 15:45:05
576
原创 js的注释快捷键
1）HTML的注释<!- - 注释的内容 – >2）css的注释/* 注释的内容 */3）js的注释①单行注释 //注释的内容②多行注释 /* 注释的内容 */快捷键：单行注释 ctrl+/多行注释 ctrl+shift+/
2022-01-29 10:44:36
1895
原创 iconfont&&css hack
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/iconfont.css"> <style> /* 1、iconfont 字体图标 步骤：
2022-01-28 14:16:25
645
原创 css居中问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--1、元素内容水平居中text-align:center;2、块级元素水平居中margin:0 auto;3、一行文字垂直居中行高等于高line-height:;4、多
2022-01-27 22:38:48
67
原创 盒模型12
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 一、盒模型 html的元素可以看成是一个盒子，称为盒模型 1、标准盒模型 w3c盒模型 浏览器默认的盒模型 1）组成
2022-01-27 22:28:53
211
原创 c3---过渡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 7、过渡 1）作用 使元素从一个样式逐渐变为另外一个样式 2）过渡必须有触发事件 例如：鼠标悬停、鼠标点击等
2022-01-27 16:47:10
519
原创 fx--关系选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 5、选择器 1）基础选择器 全局选择器 元素选择器 类选择器 ID选择器 合并...
2022-01-26 20:21:28
86
原创 js————对象和函数
一、对象1.1对象的概述对象（object）是大括号定义的无序的数据集合，由键值对构成，键与值之间用冒号分隔，如果对象内部包含多个键值对，每个键值对之间用逗号分隔，最后一个键值对末尾不用加逗号。大括号末尾要使用分号表示对象定义结束。对象是JavaScript的核心概念，也是最重要的数据类型。JavaScript的所有数据都可以被视为对象。此外，JavaScript 允许自定义对象。var obj = { key : value };上面代码定义了一个对象，它被赋值给变量obj。key是“键名”，v
2022-01-25 10:54:23
987
原创 javascript字符串和数组和语法方法
一、字符串1.1字符串的概述字符串就是用单引号或者双引号包裹起来的，零个或多个排列在一起的字符。JavaScript 字符串用于存储和处理文本。’javascript‘,“”,“345”,’9-11a$‘,“xiao_yuanLian”字符串可以嵌套，在单引号包裹的字符串内部，应该使用双引号进行嵌套。在双引号包裹的字符串内部，应该使用单引号进行嵌套。“I am ‘coolMan’”, ’are u “kidding” me’总之字符串嵌套不能够出现容易引起混淆的使用方式。1.2转义字符用特
2022-01-25 09:45:41
273
原创 运算符和分支、循环结构
主要内容1、算数运算符2、比较运算符3、赋值运算符4、逻辑运算符5、分支结构6、循环结构7、Break和continue一、运算符运算符叫做operator，也可以叫做操作符。运算符有很多种，一元运算符、二元运算符；数学运算符、逻辑运算符……1.1算数运算符y=5，下面的表格解释了这些算术运算符：console.log(1 + 2);//3 console.log(8 - 5);//3 console.log(1.5 * 2);//3 console.log(12 / 4)
2022-01-22 15:49:45
518
原创 JavaScript变量和数据类型
一、JavaScript简介JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript用来制作web页面交互效果，提升用户体验。前端三层：结构层 HTML 从语义的角度描述页面的结构样式层 CSS 从审美的角度装饰页面行为层 JavaScript 从交互的角度提升用户体验JavaScript在今天，如果你要离开他，寸步难行，网页将无法正常使用。二、JavaScript发展
2022-01-22 15:22:44
174
原创 列表的属性，表格的属性，内容溢出，一行内容溢出省略号显示5
11.cellspacing表示各单元格之间的空隙2.cellpadding表示单元格内容与单元格边界之间的距离 cellspacing和cellpadding的区别_2css可以使用background-repeat属性设置图片背景不平铺。从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。所有浏览器都支持 background-repeat 属性。提示：背景图像的位置是根据 background-positio
2022-01-22 11:48:15
486
原创 js-----helloworld
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> /* * 1、前端三层 * HTML 结构层 写网页结构内容 身体 *
2022-01-21 17:35:40
621
原创 选择器,字体,背景fx
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--1、引入方式1）行内样式 内联样式 —— 只对当前元素生效利用HTML的style属性<div style="width:200px;height:200px;">
2022-01-21 10:37:01
197
原创 雪碧图11
一、雪碧图1.1概念CSS Sprite也叫CSS精灵、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求，所以图片越多请求越多，造成延迟的可能性越大。所以页面有许多icon时，推荐使用CSS Sprite。1.2优点（1）减少图片的字节。（2）减少网页的http请求，从而大大的提高页面的性能。（3）解决了网页设计师在图片命名上的困扰，只需对一张集合
2022-01-21 10:35:01
171
原创 媒体查询和多列
主要内容1、媒体查询2、多列一、媒体查询1.1概念一说到响应式设计，肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。1.2响应式布局的优缺点1.2.1优点（1）面对不同分辨率设备灵活性强 （2）能够快捷解决多设备显示适应问题1.
2022-01-20 22:08:18
133
原创 css3新特性
一、圆角1、定义使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。2、语法CSS3 border-radius - 指定每个圆角如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。但是，如果你要在四个角上一一指定，可以使用以下规则：（1）四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。（2）三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角（3）两个值: 第一个值为左上
2022-01-19 16:32:54
487
原创 z-index
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 2、z-index 设置元素的堆叠顺序 默认值为auto 跟父元素堆叠顺序一致 取值为number 取值越大，层级越
2022-01-17 17:57:26
442
原创 绝对定位1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 800px; height: 500px; background-color: deepskyblue;
2022-01-17 17:56:56
240
原创 Position
1、定义position 属性指定了元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。2、取值3、Z-indexz-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面a
2022-01-17 16:47:53
222
原创 float和position
1、浮动的定义Float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。【实例1-1】<div class="box
2022-01-17 16:47:38
63
原创 position
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 1、position 1）作用 设置元素定位 2）属性值 ①static 默认值 没有定位，静态定位
2022-01-17 16:03:14
245
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人