前端学习笔记
关注
分享
扫一扫
文章平均质量分 72
主要记录一下前端学习的内容，以及一些小案例，方便将来使用时作参考
野草闲花逢春生
苦逼混日子的底层复制粘贴怪
展开
-
前端学习笔记之Vue.js基础（一）
Vue.js基础（一）Vue.js 核心特性数据驱动视图组件化开发Vue.js 安装Vue.js 基础语法Vue 实例基础选项el 选项插值表达式data 选项methods 选项指令内容处理1 v-once 指令2 v-text 指令3 v-html 指令属性绑定v-bind 指令Class 绑定Style 绑定渲染指令1. v-for 指令2. v-show 指令3. v-if 指令事件处理v-on 指令表单输入绑定 v-model 指令1、输入框绑定2、单选按钮绑定3、复选框绑定4、选择框绑定5原创 2021-07-28 15:18:54 · 1408 阅读 · 0 评论 -
jQuery学习笔记之jQuery节点操作和元素尺寸
jQuery 节点操作和元素尺寸jQuery 节点操作1 创建元素2 删除元素3 清空元素4 克隆元素jQuery 操作元素的尺寸1 width() 和 height()2 innerWidth() 和 innerHeight()3 outerWidth() 和 outerHeight()jQuery 操作元素的位置1 获取元素距离文档的位置 offset()2 距离上级定位参考元素的位置 position()3 操作卷去的页面间距jQuery 节点操作1 创建元素 var $newLi = $("&原创 2021-07-25 00:06:06 · 469 阅读 · 0 评论 -
jQuery实现表格隔列变色
表格隔列变色可以有两种思路：思路一：可以将每一行作为单独操作单位，让每一行中的列进行隔列变色 // 可以将每一行作为单独操作单位，使用each 方法，让每一行中的列进行隔列变色 var $tr = $("tr"); $tr.each(function () { // 让子级所有的列隔列变色 $(this).children(":odd").css("background","skyblue") })思路二：可以判断 当前这个 td 在父级原创 2021-07-24 23:07:27 · 623 阅读 · 0 评论 -
jQuery实现放大镜切换项
学习时讲到的案例，记下用于以后参考使用需求效果：鼠标移上便放大该图片效果图如下：html 和 js 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co原创 2021-07-22 16:53:40 · 317 阅读 · 1 评论 -
jQuery实现发送验证码控制按钮禁用
需求效果：点击发送验证码之后，按钮禁用，5秒之后取消禁用。效果图如下：点击发送之后禁用按钮5秒之后取消禁用，重新发送代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-原创 2021-07-22 16:44:11 · 446 阅读 · 0 评论 -
前端笔记之margin塌陷现象
margin塌陷现象在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部，这就是margin塌陷现象。margin塌陷有以下两种情况。注意：水平方向的 margin 没有塌陷现象。同级元素塌陷： 上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值。如下示意图：父子元素塌陷： 父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的 margin-top 值，原创 2021-07-22 16:16:47 · 426 阅读 · 0 评论 -
jQuery学习笔记之jQuery常用方法
jQuery常用方法jQuery 操作标签的内容html() 方法text() 方法val() 方法jQuery 操作标签的属性attr() 方法removeAttr() 方法prop() 方法jQuery 操作样式方法css() 方法生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入jQuery 操作标签的内容你好！ 这是你原创 2021-07-22 00:25:15 · 929 阅读 · 3 评论 -
jQuery学习笔记之jQuery基础
最近刚好学到jQuery的相关内容，就来做一下简单的学习笔记。简介jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库，主要对 JavaScript 中的选择元素的方法进行了大量的优化。需要注意的是，jQuery不是一种语言，他只是JavaScript的工具库。关于jQuery的版本发展：1.X：兼容 IE6/7/8，是工作中最常使用的，学习 1.12 版本。2.X：不兼容 IE6/7/8，多用于 jQuery 官方调整 bug 使用。工作中不使用。3.X：不兼容 IE6/原创 2021-07-07 00:00:05 · 116 阅读 · 0 评论 -
jQuery实现表格隔行变色案例
jQuery实现表格隔行变色案例html结构js代码部分效果如图其实挺简单的，思路就是，创建一个table，然后给偶数行和奇数行赋不同背景颜色。html结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-06-29 22:52:35 · 1792 阅读 · 2 评论