前端技术
关注
分享
扫一扫
文章平均质量分 73
HTML+CSS
CavenWang
人生无处不青山
展开
-
jQuery操作DOM
jQuery操作DOM元素的增加元素的克隆元素的替换元素的删除元素的增加append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>文档处理</title> <s原创 2021-09-12 21:00:52 · 126 阅读 · 0 评论 -
jQuery常用函数
jQuery常用函数与标签内容相关函数.html(). text().val()与标签属性相关函数设置属性移除属性获取属性获取checked属性使用prop函数，获取到的值是boolean类型，表示是否被选中与标签样式相关函数与标签内容相关函数.html()var str1=$("selector").html();//获取的是第一个匹配元素的围堵标签中的所有内容，包括了嵌套在内部的标签. text()var str2=$("selector").text();//获取的是第一个匹配元素的围堵标原创 2021-09-12 20:48:47 · 164 阅读 · 0 评论 -
JQuery实现隐藏和显示的动画效果
JQuery实现隐藏和显示的动画效果隐藏和显示语法实现代码效果展示淡入和淡出语法实现代码隐藏和显示语法$(selector).fadeIn([speed,callback]);$(selector).fadeOut([speed,callback]);$(selector).fadeToggle([speed,callback]);参数说明：可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行原创 2021-09-12 19:30:45 · 1478 阅读 · 0 评论 -
JavaScript实现动态表格
设置动态表格时常用方法表格的属性和方法描述table.rows$1600tr.cells$12tr.rowIndex$1<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> td, th { padding: 10px; } &原创 2021-09-09 11:51:42 · 703 阅读 · 0 评论 -
JavaScript实现全选/全不选操作
效果示例默认状态下：勾选全选时：任意取消勾选物品A/物品B/物品C时实现代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>全选</title> <script> function myAll() { var all = document.getElementById("all"); var oneL原创 2021-09-07 18:12:38 · 3072 阅读 · 0 评论 -
JavaScript之DOM模型
JavaScript之DOM模型DOM模型document对象document对象常用方法查找HTML元素常用方法修改HTML内容和属性修改HTML元素的CSSHTML DOM元素（节点）创建新的HTML元素替换HTML元素-replaceChild()删除元素-removeChild()DOM模型通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。DOM:Document Object Model,文档对象模型。当网页被加载时，浏览器会创建页面的文档对象模型。HTML原创 2021-09-07 17:44:39 · 320 阅读 · 2 评论 -
JavaScript事件
JavaScript事件HTML事件常用的HTML事件HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。HTML事件HTML 事件可以是浏览器行为，也可以是用户行为。例如页面加载完成、你点击个按钮、文本框输入了文字等等，都是HTML事件的案例。通过当事件发生时，我们希望可以做些事情，例如点击完毕按钮之后希望跳转页面、文本框输入完毕之后验证有效性等，那么这些要做的事情我们就可以通过JavaScript实原创 2021-09-07 16:04:17 · 100 阅读 · 0 评论 -
JavaScript Window浏览器对象模型（BOM）
JavaScript Window浏览器对象模型（BOM）window对象window对象属性history对象location对象window对象方法打开和关闭浏览器案例弹窗案例定时器案例浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。BOM：Browser Object Model，中文浏览器对象模型。虽然现在BOM尚无正式标准，但是由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此window常被认为是 BOM 的方法和属性原创 2021-09-07 15:37:45 · 181 阅读 · 0 评论 -
JavaScript实现表单验证（包含实例）
表单验证表单验证意义与场景降低服务器压力提升用户体验表单验证举例界面效果展示表单验证意义与场景降低服务器压力拦截不合格的数据，避免直接提交到服务器，可以显著降低服务器开销提升用户体验早期的互联网，表单项都是非常多的，注册个账号，经常需要填写20+个字段。而其中有一个填写不正确就要等待几十秒时间。如果有了表单验证，反馈是实时的，而且脚本还能把你定位到填写错误的具体字段。现在虽然无刷新技术早已普及，但是只依赖服务端验证，还是会有几百毫秒的延迟，实际使用会有一种很难受的粘滞感。表单验证举例js原创 2021-09-06 19:30:27 · 4049 阅读 · 4 评论 -
CSS中常用的选择器及使用案例
css中常用选择器及其使用案例原创 2021-08-29 11:32:32 · 1027 阅读 · 0 评论 -
CSS盒子模型
CSS盒子模型概念盒子模型说明图盒子的宽度和高度如果想要设置的宽度就是元素的实际宽度，通过box-sizing属性概念所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。盒子模型说明图Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。原创 2021-08-29 10:42:29 · 169 阅读 · 0 评论 -
CSS的样式、基本选择器及其优先级
CSS的样式、基本选择器及其优先级CSS的使用：CSS与html的结合使用行内样式内部样式外部样式CSS基本选择器id选择器（较少用）class选择器(常用）元素选择器/标签选择器（较少用）优先级选择器的优先级样式表的优先级CSS的使用：CSS与html的结合使用根据定义CSS的位置不同，分为行内样式、内部样式和外部样式行内样式也称为内联样式直接在标签中编写样式，通过使用标签内部的style属性；一般在测试的时候使用居多：语法：<html标签 style="样式1：值1;样式2：值2;原创 2021-08-25 12:13:16 · 276 阅读 · 0 评论 -
HTML中的框架和框架集
框架和框架集框架框架概念框架语法框架集框架框架概念通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。例如大家可以观察一下自己的京东个人中心页面，点击左侧内容的时候，只有右边页面在变动。框架语法<!--iframe:定义内嵌框架 常用属性：src="url":该URL指向不同的网页 height和width属性用来定义iframe标签的高度与宽度。 属性默认以像素为单位，但也可指定其按比例显示。原创 2021-08-24 18:00:33 · 1822 阅读 · 0 评论 -
HTML中的表单（☆☆☆）
表单表单概念表单项元素中的一些属性文本框密码框单选按钮复选框文件域日期-h5中的新特性隐藏域下拉列表框文本域按钮标签label表单概念概念：用于采集用户输入的数据。用于和服务器进行交互。<body><!--form：用于定义表单，可以定义一个范围，范围代表采集用户数据的范围常用属性：action：指定提交数据的URLmethod：指定提交方式，一共七种，以下两种比较常用get：1.请求参数会在地址栏中显示，会封装到请求行中。2.请求参数大小是有限制的。3.不太安全。原创 2021-08-24 17:41:23 · 1250 阅读 · 0 评论 -
HTML中的表格标签
表格标签规则表格不规则表格--跨行和跨列表格的高级标签--标题标签和逻辑分区标签规则表格table定义表格常用属性：height：高度width：宽度border：边框cellpadding：内容与单元格之间的距离cellspacing：单元格和单元格之间的距离不规则表格–跨行和跨列表格的高级标签–标题标签和逻辑分区标签...原创 2021-08-24 16:13:46 · 120 阅读 · 0 评论 -
HTML中的超链接
超链接页面间的跳转锚链接本页面的锚链接页面间的锚链接超链接标签一般有两个作用：1、用来实现页面间的跳转2、实现锚链接功能页面间的跳转 <a href="index.html" target="_self">点击我试试</a>href参数为跳转到的页面target参数为 _blank 跳转到新界面target参数为 _self 为原界面打开锚链接本页面之间的跳转 用<a name="xxx"></a> 来设置锚点用 <a href=原创 2021-08-24 13:37:33 · 661 阅读 · 0 评论 -
HTML中常用标签
HTML中常用标签1.文本标签1.1标题标签1.2段落标签1.3换行标签1.4水平线标签1.5范围标签2.图片标签2.1基本属性2.2设置图片的热点区域3.列表标签3.1无序列表3.2有序列表4.定义描述标签5.布局标签 层6.标签分类块状元素和行内元素的区别上面讲过的标签分类1.文本标签1.1标题标签六个，字体大小以此缩减一般用于文章标题 <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3>原创 2021-08-24 13:13:41 · 189 阅读 · 0 评论