Javascript
㼛思雨
Web. Write Less,Do More
展开
-
本地存储之记住用户名案例解析
原创 2020-11-04 18:52:20 · 124 阅读 · 0 评论 -
sessionStorage和localStorage的用法
在本浏览器中不同页面也能保存数据,获得数据。原创 2020-11-04 12:32:33 · 101 阅读 · 0 评论 -
其他移动端常见插件
原创 2020-11-04 11:36:19 · 86 阅读 · 0 评论 -
移动端插件轮播图Swiper插件的使用方法
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Swiper demo</title> <!-- Link Swiper's CSS --> <link rel="stylesheet" href="../package/swiper-bundle.min.css"> ...原创 2020-11-03 22:34:33 · 447 阅读 · 0 评论 -
DOM动画效果基础知识总结
位置CSS /*把element元素摆放在距离浏览器窗口的左边界100像素,距离浏览器窗口的上边界50像素的位置上。*/ element { position: absolute; top:50px; left:100px; } DOM element.style.position = "absolute"; element.style.left = "100px"; element.style.to.原创 2020-10-23 10:36:41 · 498 阅读 · 0 评论 -
JavaScript DOM编程艺术究竟值得看吗?(不要再入坑了)
一:质疑一切不管你想通过Javascript改变哪个网页的行为,都必须三思而后行。首先要确认:为这个网页增加这种额外的行为是否确有必要?网站对于滥用JavaScript已经持续相当长的时间了,因为滥用javascript而给自己带来种种麻烦的网站不在少数。所以:如果要使用JavaScript。就要确认:这样做会对用户的浏览体验产生怎样的影响?还有个更重要的问题:如果用户的浏览器不支持javascript该怎么办呢?...原创 2020-10-23 10:25:38 · 1775 阅读 · 2 评论 -
JavaScript startsWith() 方法
定义和用法startsWith() 方法用于检测字符串是否以指定的子字符串开始。如果是以指定的子字符串开头返回 true,否则 false。startsWith() 方法对大小写敏感。1:查看字符串是否为 "Hello" 开头:var str = "Hello world, welcome to the Runoob."; var n = str.startsWith("Hello");n 输出结果:true2:查看从第 6 个索引位置是否以 "world" 开头:var原创 2020-10-19 07:34:02 · 1575 阅读 · 0 评论 -
js中对于cookie的运用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widthh, initial-scale=1.0"> <title>Document</title></head><body onload="checkCookie()".原创 2020-10-17 09:51:37 · 257 阅读 · 2 评论 -
本地存储cookie和Web Storage
1.Cookie简介 Cookie 是一些数据, 存储于你电脑上的文本文件中,用于存储 web 页面的用户信息 Cookie 数据是以键值对的形式存在的,每个键值对都有过期时间。如果不设置时间,浏览器关闭,cookie就会消失,当然用户也可以手动清除cookie Cookie每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 Cookie内存大小受限,一般每个域名下是4K左右,每个域名大概能存储50个键值对 基本操作 通过访问document.cookie可以对coo转载 2020-10-16 15:44:50 · 203 阅读 · 0 评论 -
DOM 之classList属性
classList属性返回元素的类名。该属性用于在元素中添加、移除及切换CSS类。classList属性是只读的,但可以使用add()和remove()方法修改它。length属性返回类别中的数量。方法方法 描述 add(class1, class2, ...) 在元素中添加一个或多个类名。 如果指定的类名已存在,则不会添加 contains(class) 返回布尔值,判断指定的类名是否存在。 可能值: true - 元素包已经包含了该类名 fa原创 2020-10-16 15:16:50 · 390 阅读 · 0 评论 -
DOM 元素的遍历
对于元素间的空格,各浏览器会做出不同的反应,就导致了在使用childNodes和firstChild等属性时的行为不一致,由此,Element Traversal API 为DOM元素添加了以下5个属性。childElementCount:返回子元素(不包括文本节点和注释)的个数firstElementChild:指向第一个子元素 ,firstChild的元素版。lastElementChild:指向最后一个元素,lastChild的元素版。previousElementSibling:指向原创 2020-10-16 14:51:35 · 348 阅读 · 0 评论 -
DOM扩展之querySelector()和querySelectorAll()
在原生的Javascript开发中,查找DOM往往是开发人员的第一个头疼的问题,原生的Javascript所提供的DOM选择方法并不多,仅仅局限于通过tag、name、id等方式来查找,这显然是远远不够的。如果要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库。HTML5向Web API 新引入的querySelector()和querySelectorAll()这两个方法能更方便的从DOM选取元素,功能类似于jQuery的选择器。querySelector()和querySelect原创 2020-10-16 09:29:22 · 928 阅读 · 0 评论 -
DOM事件的各种行为
1:HTML事件处理程序a通过直接在HTML代码里定义了一个onclick的属性触发showFn方法,这样的事件处理程序最大的缺点就是HTML与Javascript的强耦合,一旦需要修改函数名就得修改两个地方,当然其优点是不需要操作DOM来完成事件的绑定。, <button type="button" onclick="showFn()">ok</button> <script> function showFn() {原创 2020-10-15 14:12:21 · 331 阅读 · 0 评论 -
JS之DOM事件初体验
什么是事件JavaScript创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。主要事件表:下面为更全的事件表:属性 此事件发生在何时... onabort 图像的加载被中断。 onblur 元素失去焦点。 onchange 域的.原创 2020-10-15 10:51:21 · 185 阅读 · 0 评论 -
javasript之DOM优化
在所有的节点类型中只有DocumentFragment在文档中没有对应的标签,DOM规定文档片段是一种“轻量级”的文档。可以包含和控制节点,但不会像完整的文档那样占用额外的资源。不能把文档片段直接添加到文档中,但可以将它作为一个仓库来使用,在里面保存将来可能添加到文档中的节点。创建文档片段的方法:document.createDocumentFragment();如果将文档中的节点添加到文档片段中,就会从文档树中移除该节点,浏览器中也不再显示这些节点,添加到文档片段中的新节点同样也不属于文档树。可以通过原创 2020-10-15 10:43:47 · 113 阅读 · 0 评论 -
创建节点追加到已有的元素上
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widthh, initial-scale=1.0"> <title>Document</title> </head><body> <...原创 2020-10-15 10:11:38 · 364 阅读 · 0 评论 -
实现广告图片切换效果轮播图效果
轮播图代码:<!DOCTYPE html><html lang="en">s<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widthh, initial-scale=1.0"> <title>Document</title> <style> #BigDi.原创 2020-10-14 18:57:35 · 1876 阅读 · 0 评论 -
最全的javascript中对于DOM 对象的操作方法和具体操作
访问子节点childNodes访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。语法:elementNode.childNodes注意:如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。我们来看看下面的代码:运行结果:IE: UL子节点个数:3 节点类型:1其它浏览器: UL子节点个数:7 节点类型:3注意:1. IE全系列、firef...原创 2020-10-14 18:06:29 · 233 阅读 · 0 评论 -
访问HTML之DOM对象的节点属性和方法
文本对象模型DOM是定义访问和处理HTML文档的标准方法。DOM对象模型的出现,使得HTML元素成为对象。借助javascript就能操作HTML元素。HTML元素允许相互嵌套,DOM将HTML文档呈现为带有元素、属性和文本的树结构(节点图)。将HTML代码分解为DOM节点层次图。...原创 2020-10-14 17:50:05 · 1306 阅读 · 0 评论 -
BOM之历史(history)对象
history对象保存用户上网的历史记录,从窗口被打开的那一刻算起。历史记录对象是窗口对象下的一个子对象,它实际上是一个对象数组,包含了一系列的用户访问过的URL地址。保存着用户的上网历史记录,用于浏览器工具栏中的"Back to"("后退"<------)和Forward to (前进)按钮,调用格式如:“history.方法”。历史对象最常用的属性是length(历史对象长度),如果在当前网页的“历史对象的个数”链接中要求显示历史对象的个数,使用history.length即可获得。他就是..原创 2020-10-14 16:51:22 · 1058 阅读 · 0 评论 -
利用location地址对象来实现系统退出转到登录页面
location 对象提供了与当前窗口中加载的文档有关的信息,还提供一些导航功能。location 对象既是window对象的属性,也是document对象的属性,也就是说,window.location和location引用的是同一个对象。location对象可以将URL解析为独立的片段。让开发人员可以通过不同的属性访问这些片段。假设URL为:http://www.ccopyright.com.cn:80/regquery/RgForms.jsp?columnID=702&c=56.原创 2020-10-14 12:37:53 · 704 阅读 · 0 评论 -
BOM之屏幕对象
screen对象包含有关客户端显示屏幕的信息,屏幕对象是Javascript运行时自动产生的对象,它实际上是独立于窗口对象的,屏幕对象主要包含了计算机屏幕的尺寸大小和颜色信息。这些信息只能读取,不可以设置,使用时只要直接引用screen对象就可以了,调用格式:“screen.属性”。每个浏览器中的screen对象都包含着各不相同的属性,其中chrome包含9个属性,firefox包含10个,IE8-浏览器包含14个,IE9+浏览器包含17个。下面将这17个属性概述如下:通过使用屏幕的可用高度和原创 2020-10-14 11:46:19 · 246 阅读 · 0 评论 -
判断当前所用浏览器是否为常用浏览器
navigator对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。appVersion 浏览器版本号language(除IE外) 除浏览器外设置的语言userLanguage(IE) 操作系统设置的语言systemLanguage(IE) 操作系统缺身设置的语言browserLanguage(IE) 浏览器设置的语言还有许多属性和方法可以再MDN上查找。检测浏览器客户端浏览器每次发送http请求时,都会附带一个userAg...原创 2020-10-13 18:37:46 · 207 阅读 · 0 评论 -
登录界面居中效果
效果如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widthh, initial-scale=1.0"> <title>Document</title> <style> #logi.原创 2020-10-13 17:31:08 · 952 阅读 · 1 评论 -
表示浏览器窗口的高度和宽度(不包括工具栏和滚动条)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widthh, initial-scale=1.0"> <title>Document</title></head><body><span id="...原创 2020-10-13 17:12:58 · 988 阅读 · 0 评论 -
滚动窗体
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widthh, initial-scale=1.0"> <title>Document</title></head><body> <p>SCROL.原创 2020-10-13 16:52:24 · 119 阅读 · 0 评论 -
打开和关闭窗口
代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widthh, initial-scale=1.0"> <title>Document</title></head><body> <in.原创 2020-10-13 16:41:23 · 209 阅读 · 0 评论 -
BOM之打开广告窗口效果
点击之后:具体代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widthh, initial-scale=1.0"> <title>Document</title></head><bod...原创 2020-10-09 15:40:54 · 140 阅读 · 1 评论 -
复选框应用表格
做成的原始效果:选中一个或几个之后;删除之后:具体代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title...原创 2020-10-09 11:34:40 · 170 阅读 · 0 评论 -
单复选按钮的应用
做成效果如下:代码如下:<!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.原创 2020-10-09 10:39:35 · 110 阅读 · 1 评论 -
动态问题出在哪里?
<!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> <form n.原创 2020-10-05 20:32:36 · 107 阅读 · 0 评论 -
动态删除某行的功能是如何实现的呢?
点击删除后再点击删除按钮后:这个是如何实现的呢?代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&g...原创 2020-10-05 19:08:35 · 137 阅读 · 0 评论 -
动态添加表格行列来展示表单获取的信息
获取一个学生数据:获取多个学生数据:具体代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></...原创 2020-10-05 18:56:27 · 185 阅读 · 0 评论 -
动态创建学生对象实例的几大深刻理解和疑问
<!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> <form n...原创 2020-10-05 14:12:00 · 137 阅读 · 0 评论 -
动态添加行与列(1)
<!DOCTYPE html><ht0 lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <...原创 2020-09-28 15:35:32 · 178 阅读 · 0 评论 -
遍历数组实现验证学号是否重复
代码如下:<!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> .f ...原创 2020-09-28 14:40:10 · 1150 阅读 · 0 评论 -
动态实现学生对象表单验证
实现效果如下所示:代码如下:<!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>原创 2020-09-28 14:19:57 · 163 阅读 · 0 评论 -
纯javascript开发计算器样式二(1)
做成如下样式和实现功能:代码如下:<!doctype html><html><head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> /*配套案例CSS样式参考*/ #calcuator { width: 200px;原创 2020-09-26 20:38:51 · 176 阅读 · 0 评论 -
纯javascript实现计算器的各种功能
要求实现如下面展示一样的一个计算器:具体代码如下:<!doctype html><html><head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> /*配套案例CSS样式参考*/ #calcuator { width: 200px;原创 2020-09-26 19:19:43 · 211 阅读 · 0 评论 -
原生JS开发贪吃蛇游戏
效果图:源码如下:<!DOCTYPE html><html><head> <title>贪吃蛇</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .backDiv { text-alig..原创 2020-08-23 07:39:33 · 132 阅读 · 0 评论