![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5
文章平均质量分 73
靠技术吃饭
这个作者很懒,什么都没留下…
展开
-
正则表达式
正则表达式哪里都用得着,还不会的可得好好学学了!一、正则表达式的概述1.什么是正则表达式2. 正则表达式的特点二、正则表达式在 js 中的使用1. 正则表达式的创建2. 测试正则表达式三、正则表达式中特殊字符1. 正则表达式的组成2. 边界符3. 字符类(1)[] 方括号(2)量词符(3)括号总结4. 预定义类5. 正则替换 replace四、正则好用工具一、正则表达式的概述1.什么是正则表达式正则表达式( Regula...原创 2021-12-24 10:01:57 · 268 阅读 · 29 评论 -
js的函数定义和调用
认真看看,好文章错过了就没有了!一、函数的定义二、函数的调用一、函数的定义(1)方式一 函数声明方式 function 关键字(命名函数)function fn(){}(2)方式二函数表达式(匿名函数)var fn = function(){}(3)方式三new Function() new Function()二、函数的调用有六种调用函数的方法,今天在这儿一次性做个总结,还不熟悉函数调用的还不赶快收藏起来!!/* 1. 普通函数...原创 2021-12-22 11:07:42 · 514 阅读 · 14 评论 -
jQuery 属性操作
今天又是一篇理论知识,如果不觉得耐烦慢慢欣赏吧!!一、jQuery 属性操作1、元素固有属性值 prop()2、元素自定义属性值 attr()3、数据缓存 data()二、jQuery 文本属性值1、jQuery内容文本值三、jQuery 元素操作1、遍历元素2、创建、添加、删除四、jQuery 尺寸、位置操作1、jQuery 尺寸操作2、jQuery 位置操作五、今日总结一、jQuery 属性操作jQuery 常用属性操作有三种:prop()原创 2021-12-05 20:14:16 · 1177 阅读 · 2 评论 -
jQuery入门
一、jQuery1. jQuery 介绍(1)JavaScript 库 JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。简单理解: 就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如 jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)。原创 2021-11-29 09:56:41 · 102 阅读 · 2 评论 -
jQuery仿购物车案例
今天成功解锁购物车,想要更多可能就往下看吧!!一、全选二、增减商品数量三、修改商品小计四、计算总计和总和五、删除商品六、选中商品添加背景七、全部文件今天是一些购物车的基本功能实现,全选、增减商品数量、修改商品小计、计算总计和总和、删除商品、选中添加背景颜色等一些常见功能。html结构的全部代码都在文末了,懂的都懂啊!!!一、全选全选分析: ⭐全选思路:里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按...原创 2021-11-27 09:48:51 · 1556 阅读 · 20 评论 -
JavaScript贪吃蛇
这篇文章不简单!!一、创建html结构二、创建表格三、创建蛇头、蛇身四、创建食物五、让蛇动起来六、 控制蛇的方向七、完整代码index.htmlGame.jsSnake.jsFood.js八、图片九、总结今天博主呕心沥血写了一个贪吃蛇的小游戏,整个过程从无到有简直扣人心弦。接下来本博主就来好好说到说到这个过程!!话不多说,我们还是先来看看最后的呈现效果吧。看完了才知道什么叫做操作,简直传奇!!接下来不吹牛来讲讲实际操...原创 2021-11-24 10:13:47 · 5479 阅读 · 47 评论 -
js移动端轮播图
做完PC端的轮播图以后,怎么能不尝试一下移动端呢,也不像我的风格,来来来,格局打开,往下看!!!移动端轮播图功能和基本PC端一致。 可以自动播放图片 手指可以拖动播放轮播图 做好多的效果图如下图所示:案例分析第一步: 自动播放功能 开启定时器 移动端移动,可以使用translate 移动 想要图片优雅的移动,请添加过渡效果 第二步: 自动播放功能-无缝滚动 注意,我们判断条件是要等到图片滚动完毕再去判.原创 2021-12-07 11:08:25 · 453 阅读 · 36 评论 -
js移动端触屏事件
我们移动端的触屏事件来, 有了它还怕搞不定 ????1、触屏事件2、触摸事件对象(TouchEvent)1、触屏事件移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。常见的触屏事件如下:2原创 2021-12-02 09:54:40 · 585 阅读 · 22 评论 -
offset、client、scroll 三大家族来了—JavaScript
一、元素偏移量 offset 系列offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 1、获得元素距离带有定位父元素的位置 2、获得元素自身的大小(宽度高度) 3、注意:返回的数值都不带单位原创 2021-11-15 20:04:52 · 159 阅读 · 14 评论 -
setTimeout 和 setInterval 两种定时器的介绍—JavaScript
定时器是我们写前端页面必备的一个技能,所以还不会的兄弟们赶紧学起来!!!1、setTimeout() 炸弹定时器2、setInterval() 闹钟定时器window 对象给我们提供了 2 个非常好用的方法-定时器。 setTimeout() setInterval() 1、setTimeout() 炸弹定时器开启定时器window.setTimeout(调用函数,[延迟的毫秒数]);setTimeout() 这个调用函数我们也称为回调函数 callba原创 2021-11-17 11:01:17 · 687 阅读 · 24 评论 -
load 和 DOMContentLoaded 事件的区别—JavaScript
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。下面我们来分析分析 DOM 和 BOM 的区别原创 2021-11-11 10:14:19 · 770 阅读 · 14 评论 -
鼠标和键盘事件带来的便利
今天是 关于 DOM 事件最后一次 分享!!一、常用鼠标事件1、案例:禁止选中文字和禁止右键菜单2、鼠标事件对象3、获取鼠标在页面的坐标二、常用键盘事件1、键盘事件2、键盘事件对象3、案例:输入框方法提示一、常用鼠标事件1、案例:禁止选中文字和禁止右键菜单案例代码<body> 我是一段不愿意分享的文字 <script> // 1. contextmenu 我们可以禁用右键菜单 .原创 2021-11-04 14:35:03 · 220 阅读 · 22 评论 -
DOM 的 事件高级 带来的革新
仔细感受一下 DOM 事件给我们带来的变化!!原创 2021-11-03 09:12:44 · 141 阅读 · 14 评论 -
这是面试中常出现的一个问题
接下来这是面试中经常会出现的问题,看到的小伙伴们一定要认真记住了!!创建元素的三种方式原创 2021-11-01 15:25:53 · 132 阅读 · 9 评论 -
了解更多的 DOM 操作
今天主要来学习一些案例!一、排他思想如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法:...原创 2021-10-30 09:08:43 · 290 阅读 · 10 评论 -
学习 DOM 的入门级手册
目录一、Web API 介绍1、API 的概念2、Web API 的概念二、DOM 介绍1、什么是 DON2、DOM 树三、获取元素1、根据 ID 获取2、根据标签名获取元素3、H5 新增获取元素方式4、获取特殊元素(body、html)四、事件基础1、事件概述2、事件三要素3、执行事件的步骤4、常见的鼠标事件五、操作元素1、改变元素内容(获取或设置)2、常用元素的属性操作3、表单元素的属性操作4、样式属性操作六、今日.原创 2021-10-28 11:08:14 · 7407 阅读 · 22 评论 -
天使跟我走,世界我都有
简单又有趣的小案例,看过的都称好!原创 2021-10-28 17:43:50 · 2022 阅读 · 28 评论 -
来抄作业了,留言板上写出你的故事....
我又来啦!喜欢的宝宝们就往下看吧!!今天是一个简单的留言板案例,主要是输入内容后点击提交内容就可以到留言区域显示的一个操作!具体效果如下所示:1、首先第一点还是老规矩,先搭建好一个 html 框架! <div class="box"> <textarea name="" id="" cols="30" rows="10"></textarea> <button>提交</button>..原创 2021-10-26 15:11:26 · 256 阅读 · 20 评论 -
小白也能做的选择(下)
文章目录前言后代选择器子选择器并集选择器伪类选择器链接伪类选择器:focus 伪类选择器前言建立在基础选择器之上,对基础选择器进行组合形成的1、复合选择器可以更准确、更高效的选择目标元素(标签)2、复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的3、常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等后代选择器后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就原创 2021-10-08 17:34:47 · 120 阅读 · 15 评论 -
小白也能做的选择(上)
文章目录前言标签选择器(元素选择器)类选择器多类名id 选择器通配符选择器前言基础选择器是由单个选择器组成。标签选择器(元素选择器)书写格式(示例):标签名 { 属性: 属性值; } 说明:用 HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式 作用:标签选择器可以把某一类标签全部选择出来,比如所有的<div>和<span>标签 优点: 能快速为页面中同类型的标签统一设置样式 缺点:不能设计差异化原创 2021-09-28 11:08:12 · 351 阅读 · 14 评论 -
美图秀秀和网页美工的合作
文章目录CSS与HTML的区别一、pandas是什么?二、使用步骤1.引入库2.读入数据总结CSS与HTML的区别1、HTML主要做结构,显示元素内容2、CSS美化HTML,布局网页CSS最大价值:HTML做结构呈现,样式CSS,即结构(HTML)与样式(CSS)相分离提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下(示例):import原创 2021-09-27 17:45:30 · 485 阅读 · 19 评论 -
带你由浅入深的了解 flex 的基础用法
文章目录传统布局与flex布局的区别一、体验 flex 布局二、flex 布局父项常见元素1.flex-direction 设置主轴的方向2.justify-content 设置主轴上的元素排列方式3.flex-wrap 设置子元素是否换行4.align-items 设置侧轴上的子元素排列方式(单行)5.align-content 设置侧轴上的子元素排列方式(多行)6.algin-content和algin-items的区别三、flex 布局子项常见元素1. flex: number;2.flex-basi原创 2021-08-24 15:56:35 · 1774 阅读 · 18 评论 -
在 HTML 中 清除浮动四种的方法
文章目录为什么要清除浮动清除浮动本质一、语法二、清除浮动的方法1.额外标签法2.父级添加 overflow 属性3.父级添加 after 伪元素4.父级添加双伪元素为什么要清除浮动 由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子(由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响)。清除浮动本质清除浮动的本质是清除浮动元素脱离标准流造成的影响如果父盒子本身有高度,则不需要清除浮动清除浮动之后,父级原创 2021-08-21 14:18:13 · 5065 阅读 · 4 评论 -
深入了解 2D 的用法(H5C3进阶)
文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下(示例):import numpy as npimport原创 2021-08-11 21:13:44 · 254 阅读 · 9 评论 -
HTML中 元素的显示隐藏 与 网页布局的总结
文章目录前言一、display 属性二、 visibility 可见性(重点)三、 overflow 溢出网页布局总结前言类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!本质:让一个元素在页面中隐藏或者显示出来。下面我来介绍三种显示与隐藏的方法!!! 各位宝宝们记得点赞加关注哦一、display 属性display 属性用于设置一个元素应如如何显示。代码如下(示例):display: none; //隐藏对象display: block; // 除了原创 2021-08-05 15:58:45 · 835 阅读 · 5 评论 -
HTML5新增的语义化标签
系列文章目录提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加例如:第一章 Python 机器学习入门之pandas的使用提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录系列文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例原创 2021-08-02 19:54:17 · 3715 阅读 · 3 评论