javascript概念
一染星辰
不求甚解,唯有敬亭山!!!加油!
展开
-
js:阻止默认事件 ev.preventDefault();
ev.preventDefault() 阻止默认事件整体代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="https://www.baidu.com/">百度</a> <script type="text/.原创 2021-10-09 17:20:05 · 699 阅读 · 0 评论 -
JS:offset(全部解析)
1获取元素的宽度:offsetwidth2.获取元素的高度:offsetHeight3获取元素到顶端的距离:offsetTop4获取元素到左边缘的距离offsetLeft5获取元素的父元素 offsetParent关于相关代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type.原创 2021-10-09 17:16:37 · 1923 阅读 · 0 评论 -
JS:二级联动(代码)
整体代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> 省:<select id="pro"></select> 市:<select id="city"></select> <script type="原创 2021-10-09 17:06:52 · 440 阅读 · 0 评论 -
JS:表单事件(7个)
表单事件 属性 描述 onfocus 元素获取焦点时触发 onblur 元素失去焦点时触发 onchange 该事件在表单元素的内容改变时触发( input, select, 和 textarea) oninput 元素获取...原创 2021-10-09 16:59:19 · 1663 阅读 · 0 评论 -
JS:键盘事件(onkeydown 、onkeypress、 onkeyup三个)
1.键盘事件key 属性 描述 onkeydown 某个键盘按键被按下 onkeypress 某个键盘按键被按下。 onkeyup 某个键盘按键被松开。 事件相关的事件发生次序: ...原创 2021-10-09 16:52:51 · 3408 阅读 · 0 评论 -
js:鼠标事件(9个)
1.鼠标事件 属性 描述 onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onmousedown 鼠标按钮被按下。 onmouseup 鼠标按键被松开。 ...原创 2021-10-09 16:45:17 · 511 阅读 · 0 评论 -
js:HTML事件
Window 事件属性: onload 事件会在页面或图像加载完成后立即执行, 通常用于 body 元素,在页面完全载入后(包括图片、css文件等等。)执行脚本代码 onscroll 事件在元素滚动条滚动时触发 onresize 当窗口或框架的大小变化时在window 或框架上触发//style部分<style type="t...原创 2021-10-09 11:50:18 · 139 阅读 · 0 评论 -
JS:事件概述(什么是事件)
定义: 事情发生并得到处理的操作,叫做事件,通俗的讲就是:事情来了,然后处理。 事件句柄 事件发生时进行的操作 比如:手机铃声响了(事情来了)--------接电话(处理) 当用户点击按钮的时候,我们会说触发了按钮的onclick事件<button type="button">点击</button>...原创 2021-10-09 11:40:42 · 545 阅读 · 0 评论 -
JS:localStorage(获取,设置、删除、全删、下标)定义及代码
读取数据:localStorage.getItem(key); 保存数据:localStorage.setItem(key,value); 删除单个数据:localStorage.removeItem(key); 删除所有数据:localStorage.clear(); 得到某个索引的key:localStorage.key(index);相关代码;// 获取数据 ...原创 2021-10-08 21:42:58 · 3142 阅读 · 1 评论 -
JS:JSON互转(2种)
JSON.stringify() 转JSON字符串JSON.parse() 转JSON对象原创 2021-10-08 21:36:22 · 175 阅读 · 0 评论 -
js:localStorage、sessionStorage、cookies三种存储方式的区别(前端面试题)
目录localStorage: cookies:sessionStorage:localStorage: 以键值对的方式存储存 储没时间限制 永不失效 除非自己删除记录 cookies: 数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识 ...原创 2021-10-08 21:25:34 · 115 阅读 · 0 评论 -
JS:DOM文档对象模型(DOM) Document Object Model文档对象模型 ---标签节点的操作方法(定义)
1.document.createElement()(最常用) 通过指定名称创建一个元素 2.document.createTextNode() 可创建文本节点。 3.element.appendChild() 可向节点的子节点列表的末尾添加新的子节点。 提示:如果文档树中已经存在了 newchild,它将从文档树中删除,然后重新插入它的新位置。 如果 newchil...原创 2021-10-07 16:54:58 · 162 阅读 · 0 评论 -
js:tab切换(4种方法 大全 代码)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box { display: flex; } .left>div { width: 200px; height: 100px; line-height: 100px;.原创 2021-10-07 16:41:27 · 594 阅读 · 0 评论 -
JS:非行间样式
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ border: 1px solid red; padding: 10px; } </style> </head> <body> <d.原创 2021-10-06 18:56:56 · 132 阅读 · 0 评论 -
JS:获取元素及操作元素代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .d1{ width: 100px; height: 100px; border: 1px solid; } .p1{ width: 200px; height: 20.原创 2021-10-06 18:55:43 · 322 阅读 · 0 评论 -
JS:获取元素及操作元素
目录1.获取DOM对象的 六 种方式 2.设置或获取HTML内容 3.设置或获取HTML属性 4.设置或获取HTML样式 5.element.className 设置或返回元素的class属性 6.element.classList 返回元素的类名,作为 DOMTokenList 对象。1.获取DOM对象的 六 种方式 查找 HTML 元素 do...原创 2021-10-06 18:53:33 · 488 阅读 · 0 评论 -
JS:DOM 常用属性
1.childNodes 返回包含被选节点的子节点的 NodeList 如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。 如需循环子节点列表,使用 nextSibling 属性,要比使用父对象的 childNodes 列表效率更高。 2.firstChild 返回被选节点的第一个子节点,如果选定的节点没有子节点,则该属性返回 NULL。 3.lastChild ...原创 2021-10-06 18:41:58 · 963 阅读 · 0 评论 -
JS:hash值改变的事件(代)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <button type="button" class="small">小</button> <button type="button" class="big"&.原创 2021-10-06 18:32:31 · 691 阅读 · 0 评论 -
JS:DOM 的简单介绍
1.通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: document==root element html ...原创 2021-10-06 18:29:50 · 116 阅读 · 0 评论 -
JS:单个删除 两种方法或者方式
第一种就是使用的for循环的办法,进行去寻找arr的下标让前面的id与后边的id 相等然后进行删除function del(id){ for(var i=0;i<arr.length;i++){ if(arr[i].id==id){ arr.splice(i,1) } } show() }第二种就是 可能涉及稍微全面些 , 它考虑进行confim的确定框的提示 ,然后进行寻找下...原创 2021-09-25 19:59:24 · 912 阅读 · 0 评论 -
JS:字符串的方法 (详细 大全)
1字面量创建方式var str = "我是字符串";2构造法创建方式 var str1 = new String("我是字符串2");3.判断数据类型console.log("str1:",typeof str1);4.判断是否是一个数组console.log("str1:",Array.isArray(str1));以下是字符串的方法 代码<!DOCTYPE html><html> <head> <...原创 2021-09-24 19:13:16 · 425 阅读 · 0 评论 -
JS:初学 添加案例
思路:html 静态页面设置 两个input的输入及一个button 按钮,并对其命名:接下来就进行获取相对应的DOM元素,控制台检测,onclick产生事件,一个封装函数控制台可检测<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id原创 2021-09-23 21:11:25 · 118 阅读 · 0 评论 -
JS:输入100以内的质数
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> // 输出100以内所有的质数 for(var i=2;i<=100;i++){ var f = true; for(.原创 2021-09-23 20:55:37 · 842 阅读 · 0 评论 -
JS:匿名函数
匿名函数: function(){ } var fn = function(){ } // 变量提升(把全局用var声明的变量提到最上面) // var a, fn; console.log("a:"...原创 2021-09-23 20:51:18 · 88 阅读 · 0 评论 -
JS:获取DOM元素的六种方法
以下为代码段<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <button type="button" class="btn btn1">点击1</button> <button t...原创 2021-09-23 20:47:22 · 1094 阅读 · 0 评论 -
JS:数组的方法(大全)23个方法
下边为所有方法的代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> ;(function(){ console.group("concat() 连接两个或更多的数组,并返回...原创 2021-09-23 20:44:06 · 266 阅读 · 0 评论 -
JS:javascript 输出 定义 基础知识
javascript 不提供任何内建的打印或显示函数javascript 显示方案1.使用window.alert() 写入警告栏2,document.write() 写入HTML 输出3.console.log() 浏览器控制台输出4. 如需访问HTML元素。innerHTML属性定义HTML内容 ...原创 2021-09-17 08:56:55 · 80 阅读 · 0 评论 -
JS: var 与let 之间的区别
var:声明变量,没有指定的作用域,取决于在哪声明 let:也是声明变量,是块级作用域<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> img { width: 100px; heig...原创 2021-09-13 20:14:46 · 133 阅读 · 0 评论 -
JS:基础 知识 (常见面试题)(攻略大全20000字)
如果你想学好js ,就看一下基础的理论知识吧!一下是必备的基础知识原创 2021-09-08 08:42:48 · 194 阅读 · 0 评论 -
JS: Date对象的方法 *至少记住8个
方法 描述 Date() 返回当日的日期和时间。 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getFullYear() 从 Date 对象以四位数字返回年份。 getYear() 请使用 getFullYear() 方法代替。 getHours() 返回原创 2021-09-07 08:32:36 · 179 阅读 · 0 评论 -
JS:渲染部分
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap { width: 100%; height: 600px; border: solid 5px; .原创 2021-09-06 20:02:26 · 218 阅读 · 0 评论 -
JS:随机数 或 获取验证码
math.random()//不需要传参数,获取的是0~1之间的随机数 math.random()*10 //将0~1的随机数处理为0~10 console.log(Math.random()*10) math.floor()//需要传参,参数是需要<!DOCTYPE html><html> <head> <meta charset="utf-8"> <t...原创 2021-09-06 19:58:36 · 396 阅读 · 0 评论 -
JS:JSON的解析和生成(JSON 和 JS 对象互转)
思路:1.实现JSON转化成JS 对象使用JSON.parse()方法2.实现JS对象转化成JSON对象使用JSON.stringify()方法1.实现JSON转化成JS 对象使用JSON.parse()方法var str='{"name":"对象","age":"22"}' var obj=JSON.parse(str); console.log(obj)2.实现JS对象转化成JSON对象使用JSON.stringify()方法 var str='{"name":"原创 2021-09-05 20:28:22 · 369 阅读 · 0 评论 -
JS:classList的方法()类名
思路:classLIst就是一个类名,它既可以添加又可以删除假设var btn = document.getElementBy("DIV");1.使用classList返回所选元素的类名,是一个数组,一个类名占一个长度(a.classList.length)。2.btn.classList.add("classname1") ; 添加一个类名3.btn.classList.remove("classname2") ; 去掉一个类名4.btn.classLis.toggle("c原创 2021-09-05 19:38:54 · 1076 阅读 · 0 评论 -
JS: splice()的三个方法
思路: splic 可以简单的归总为三个方法:删除,添加,替换1.删除,可以删除任何数量的项;只要指定两个 参数 :要删除的第一项的位置和删除的项数。例如splice(0,2)会删除数组中的前两项 var arr=[1,2,3,4,5,6] arr.splice(0,2) console.log(arr)//控制台输出为3,4,5,6 2.插入:可以向指定的位置插入任意数量的项,需要三个参数:起始位置,0(要删除的项数)和要插入的项。;例如:splice(2,0,..原创 2021-09-05 19:26:02 · 3559 阅读 · 0 评论 -
JS: Math对象的方法 * 重点掌握 笔记
1> Math对象方法 Math.PI 返回圆周率 Math.abs(x) 返回绝对值 Math.ceil(x) 对数进行向上取整 Math.floor(x) 对数进行向下取整 Math.max(a,b,c,d...,n) 返回给定的数中的较大的数 Math.min(a,b,c,d...,n) 返回给定的数中的较小的数 ...原创 2021-09-05 17:57:52 · 125 阅读 · 0 评论 -
JS: DOM的常见属性
innerHeight: 获取窗口的文档显示区域的高度 innerWidth: 获取窗口的文档显示区域的宽度 outerHeight: 获取整个窗口的高度 clientX: 获取某一点到可视区域的左侧的距离 clientY: 获取某一点到可视区域的顶部的距离 offsetTop: 当前元素到offsetParent顶部的距离 offsetLeft: 当前元素到offs...原创 2021-09-03 11:33:49 · 207 阅读 · 0 评论 -
JS:数组的定义及方法
创建数组的方式有两种:new Array()、字面量创建数组 1、new Array()创建数组 var arr = new Array(1,2,3,4,4,5,5,6) var arr1 = new Array(10) // 当只添加一个元素时,会将该元素作为长度 2、字面量创建数组 var arr3 = [] arr3[0] = '1' arr3[1] = '1' arr3[2] = '1' var arr4 = [1,2,3,4] 3、数组的...原创 2021-09-03 11:21:24 · 3277 阅读 · 0 评论 -
JS:函数的定义,概念
1> 函数的定义 把一段相对独立的具有特定功能的代码块封装起来,形成一个独立实体,就是函数,起个名字(函数名),在后续开发中可以反复调用2> 函数的作用:封装一段代码,将来可以重复使用3> 函数表达式 a> 函数声明 function 函数名() { 函数体 } b> 函数表达式 var fn = function() { 函数体 .原创 2021-09-03 11:18:13 · 319 阅读 · 0 评论 -
JS:作用域概念
1> 全局作用域/全局变量 全局变量: 在任何地方都可以访问到的变量就是全局变量,对应全局作用域 2> 函数作用域/局部变量 局部变量: 只能在固定的代码片段内可以访问到的变量,对应函数作用域 3> js作用域的规则: a> 函数允许访问函数外部的数据 b> 整个代码结构只有函数可以限定作用域 c> 如果...原创 2021-09-03 11:08:08 · 79 阅读 · 0 评论