![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 63
Favour72
一方水土养一方人,圆圆的地球养圆圆的我
展开
-
高尔夫代码
在高尔夫游戏中,每个洞都有自己的标准杆数par,意思是一个高尔夫球员为了把球打进洞里完成比赛,预计要挥杆的平均次数strokes。 根据你把球打进洞所挥杆的次数strokes高于或低于par多少,有一个不同的昵称(代表打高尔夫球的水平)。原创 2023-11-01 14:30:00 · 197 阅读 · 0 评论 -
JavaScript-----立即执行函数
// 立即执行函数,有两种 // 1.立即执行函数:不需要调用,立即能够自己执行的函数 // 主要作用:创建一个独立的作用域,所有的变量都是局部变量, // 避免命名冲突的影响 // 2.写法 // (function(){})() 或者 (function(){}()) (function(a,b){ console.log(a+b); })(1,2) //第二个小括号可以看做是调用函数,也可以传递参数进去 // 如果有多个立即执行函数.原创 2022-06-25 06:00:00 · 299 阅读 · 2 评论 -
JavaScript-----元素可视区client
client系列属性 作用element.clientTop 返回元素上边框的大小element. clientleft 返回元素左边框的大小element.clientWidth 返回自身包括padding 、内容区的宽度,不含边框,返回数值不带单位element.clientHeight 返回自身包括padding 、内容区的高度,不含边框,返回数值不带单位...原创 2022-06-24 19:48:50 · 599 阅读 · 0 评论 -
JavaScript-----元素偏移量offset
offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位...原创 2022-06-20 20:59:37 · 2331 阅读 · 0 评论 -
JavaScript-----history对象
history.forward()去历史记录的下一页 前进history.back()去历史记录的上一页 后退history.go(数字)跳转页面 数字如果为0 表示刷新本页面 正值前进为调转到历史记录的第几页 负值后退为跳转到历史记录的前第几页这里我们直接举个栗子来看一下:需要两个页面,也可以是多个页面 首页:列表页;效果如下:...原创 2022-06-19 20:45:46 · 100 阅读 · 0 评论 -
JavaScript-----navigator对象
下面前端代码可以判断用户那个终端打开页面,实现跳转如果是pc端,就会显示电脑 如果是移动端就会显示手机原创 2022-06-19 20:45:17 · 298 阅读 · 0 评论 -
JavaScript-----Location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么熔理它。 举个栗子:效果如下: 主要练习数据在不同页面中的传递代码思路:需要设置两个页面 第一个登录页面第二个登录进去的首页界面原创 2022-06-18 14:32:28 · 200 阅读 · 0 评论 -
JavaScript-----同步异步与js的执行机制
JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用剧户的交互,以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。 单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任多。这样所导致的问题是∶如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。这里提两个问题:通过这两道.....原创 2022-06-17 19:05:54 · 560 阅读 · 0 评论 -
JavaScript-----this的指向及修改this指向
this的指向是在使用时判断的而不是创建时判断的,除了箭头函数1.在全局作用域下,this指向window2.普通函数和匿名函数里的this指向window, IE事件里面this指向window3.对象方法里的this指向对象本身4.对象里面存放的如果是另一个对象,另一个对象的this指向另一个对象,而不是最外层的对象5.构造函数的this指向它的调用者6.箭头函数指向创建时的上一层作用域,箭头函数的指向不可变...原创 2022-06-15 19:30:27 · 308 阅读 · 0 评论 -
JavaScript-----BOM对象及window事件
window 对象是浏览器的顶级对象举个栗子:接下来我们打印一下window,可以看到控制台有很多属性和方法后面还有很多属性和方法,就不一一截图了,后面的博客中都会说到 就比如:当我们之前写script的时候要把script部分放到最底下,因为代码一行行运行,在上面会获取不到,但是当我们用window.onload时,就可以把script部分放在代码中的任何一个地方size 尺寸,re 重置 resize重置尺寸...原创 2022-06-14 10:46:38 · 292 阅读 · 0 评论 -
JavaScript-----键盘事件
onkeyup 某个键盘按键被松开时触发onkeydown 某个键盘按键被按下时触发onkeypress 某个键盘按键被按下时触发惇但是它不识别功能键比如ctrl shift箭头等原创 2022-06-13 12:52:40 · 1166 阅读 · 0 评论 -
ASCII码对照表
1、ASCII码 是现今最通用的单字节编码系统,并等同于国际标准ISO/IEC 646 。在这个页面,你可以找到8位的256个字符、ASCII码表和Windows-1252 (code page 1252,它是国际标准ISO 8859-1的一个扩展字符集) 标准保持一致;2、ASCII码 是 American Standard Code for Information Interchange 的缩写,而不是ASCⅡ(罗马数字2),有很多人在这个地方产生误解;3、ASCII码 规范于1967年第一次发布,原创 2022-06-11 10:08:33 · 15187 阅读 · 3 评论 -
JavaScript----- 鼠标事件对象
event对象代表事件的状态,跟事件相关的一系列信息的集合以下是一些鼠标事件对象;鼠标事件对象举个栗子:原创 2022-06-12 21:19:10 · 584 阅读 · 0 评论 -
JavaScript-----禁止鼠标选中文字和禁止鼠标右键上下文菜单
一.禁止鼠标选中selectstart 开始选中二.禁止鼠标右键菜单contextmenu 主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单原创 2022-06-11 09:13:00 · 1649 阅读 · 0 评论 -
JavaScript-----事件委托
var timer; //设置定时器var search; //假设为输入内容search.Oninput = function debounce() { if(timer) { clearTimeout(timer) } timer = setTimeout(function() { console.log("搜索") },1000)}总结提示:这里可以写感悟和总结,记得删除示例哦。例如:当我们下次再遇到类似实时搜索、检测窗口变化等场景,用上节流和防抖后,就可以极大...原创 2022-06-10 21:43:50 · 1153 阅读 · 5 评论 -
JavaScript-----阻止事件默认行为和事件冒泡
目录一.阻止事件默认行为1.preventDefault();方法2.低版本浏览器 returnValue属性3.return false;e.stopPropagation();e.cancelBubble = true; 阻止事件冒泡的兼容性解决方案阻止事件默认行为的三种方法: 以下是没有阻止冒泡行为的示例,会从最具体的元素向上床底: //stop 停止 Propagation传播//ie cancel取消 bubble泡泡 阻止冒泡排序之后:...原创 2022-06-10 09:25:08 · 2236 阅读 · 0 评论 -
JavaScript - ----target和this的区别
我们可以通过js修改元素的大小,颜色,位置等样式🍓.🐇.1.element.style 行内样式操作2.element.className 类名样式操作原创 2022-06-08 13:00:59 · 398 阅读 · 0 评论 -
DOM-----注册事件(绑定事件)
1.对于javascript,为了能够是javascript操作html.javascript就有了一套自己的dom编程接口2.对于HTML,dom使得html形成一颗dom树,包含文档,节点,元素利用on开头的事件onclick方法监听事件 :w3c标准注册事件兼容性解决方案删除事件(解绑事件)dom对象.removeEventListener(参数1,参数2,参数3)ie的......原创 2022-06-07 14:49:11 · 424 阅读 · 0 评论 -
DOM-----事件流
事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播,这个过程叫做DOM事件流原创 2022-06-06 15:12:13 · 125 阅读 · 0 评论 -
JavaScript-----自定义属性操作
🍓.获取元素的属性值🐇element.属性 元素本身自带的属性 <div id="demo" index="1" data-list-name="andy"></div> </body> <script type="text/javascript"> var div = document.querySelector("div"); console.log(div.id) //demo🐇element.get...原创 2022-05-13 22:24:06 · 1753 阅读 · 0 评论 -
JavaScript--正则表达式
正则表达式 Regular Expression 正则对象也是内置对象正则表达式 使用单个字符串来描述正则表达式创建语法/正则表达式主体/修饰符(可选) 字面量方式 var reg = /hollo/g;new RegExp("字符串","修饰符") 构造函数方式 如果有多个修饰符不需要用逗号或空格隔开 例var reg = new RegExp("hello","gi")正则表达式的方法正则对象.test(字符串) 方法用于检测一个字符串是否匹配某个模式 如果字符串中含有匹配的...原创 2022-05-10 10:48:27 · 438 阅读 · 0 评论 -
JavaScript-----显示隐藏密码案例
happy原创 2022-05-07 09:57:28 · 661 阅读 · 0 评论 -
JavaScript---表单元素的属性操作
type,value,checked原创 2022-05-05 21:50:03 · 994 阅读 · 1 评论 -
JavaScript---常用元素的属性操作(点击图片修改src属性)
操作dom可以改变元素里的内容,还可以改变很多属性举个栗子:img的src属性,a连接的href属性,还有一些id alt title等等举个栗子:修改img元素属性 src <button type="button" id="mm1">第一张漂亮妹妹</button> <button type="button" id="mm2">第二张漂亮妹妹</button> <img src="img/04.png">.原创 2022-05-01 22:53:27 · 2618 阅读 · 0 评论 -
JavaScript---innerText和innerHTML的区别
element.innerText从起始位置到终止位置的内容,但他去除html标签,同时空格和换行也会去掉element.innerHTML从起始位置到终止位置的所有内容,包括html标签,同时保留空格和换行innerText 不识别html标签<div></div> </body> <script type="text/javascript"> var div = document.quer...原创 2022-05-01 22:12:24 · 891 阅读 · 0 评论 -
JavaScript----DOM事件
🍓前言JavaScript是创建动态页面,事件就是可以被JavaScript侦测到的行为触发--响应机制网页中的每一个元素都可以有触发JavaScript的事件,比如,点击按钮执行什么事情呀🍓事件三要素:🐇1.事件源事件被触发的对象,🐇2.事件类型🐇3.事件处理程序举个栗子: //1.事件源: 事件被触发的对象 var btn = document.getElementById("btn"); //2.事件类型: //3.事件处理程序 ...原创 2022-04-26 22:13:19 · 249 阅读 · 0 评论 -
JavaScript-----DOM--获取元素方法合集
什么是DOM文档对象模型( Document Object Model),简称DOM,是W3c组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口W3C定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容,结构和样式DOM树文档:一个页面就是一个文档,DOM中用document表示元素:页面中的所有标签都是元素,DOM中用element表示节点:网页中所有的内容都是节点(标签,属性,文本,注释等),DOM中用node表示DOM把以上内容都看作是对象原创 2022-04-24 23:36:16 · 167 阅读 · 0 评论 -
JavaScript-----简单数据类型和复杂数据类型
CSS3新增布局样式column-count 列数,栏数colunm-width 列宽colunms原创 2022-04-19 23:12:41 · 834 阅读 · 0 评论 -
JavaScript----数组对象
创建数组Array()构造函数的方式创建数组1. var arr = new Array() 创建了一个空数组2. var arr = new Array(参数1 ,参数2,......) 可以在赋值给变量的时候添加参数3. var arr = new Array(4,8); 如果一个数字 则表示创建了一个长度为4 的空数组 如果是两个数字 则表示创建了一个4和8的数组字面量方式创建数组var arr = [] 创建了一个空数组 [] 中的取值范围为数组长度减1遍历数组for(var原创 2022-04-19 02:45:26 · 1064 阅读 · 0 评论 -
JavaScript-----冒泡排序
🍓 冒泡排序是什么冒泡排序(Bubble Sort)是一种简单直观的排序算法。它重复走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。🍓 冒泡排序算法原理 (升序)1.比较相邻的元素。如果第一个比第二个大,就交换他们两个。2.对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。3.针对所有的元素重复以上的步骤,除了最后一个。4.持续原创 2022-04-16 13:19:14 · 88 阅读 · 0 评论 -
JavaScript笔记----字符串对象
字符串对象创建string对象var str = "***"; 字面量方式var str = new String("字符串");变量.length 可以得到字符串对象的长度变量[0] 字符串中第一个数indexOf(参数1,参数2) 从参数2的位置开始查找参数1在整个字符串中第一次出现的位置参数1:必需值 查找的子串参数2:可选 开始查找的位置 若省略,则默认从0开始查找返回值 : 整数 若查找到该子串返回该子串在整个字符串第一次出现的位置,若查找不到,返回值为-1表单..原创 2022-04-15 23:49:16 · 458 阅读 · 0 评论 -
JavaScript--倒计时---setInterva()与setTimeout() 方法
亲我e原创 2022-04-13 23:20:06 · 2992 阅读 · 0 评论 -
JavaScript笔记(十)-----内置对象(数学对象与日期对象)
JavaScript提供了多个内置对象:Math, Date , Array, String一、Math数学对象数学对象不是一个构造函数,不需要声明,直接使用里面的属性和方法即可1.Math.PI; 圆周率 π一个属性console.log(Math.PI); // 3.1415926535897932.Math.max()最大值Math.max(value1,value2,value3...),里面要写一组数值,返回给定的一组数组中的最大值如果给的参数中至..原创 2022-04-10 17:07:30 · 1327 阅读 · 3 评论 -
JavaScript笔记(九)----- 对象
前言没有对象,就自己创建对象没对象?new一个一、对象是什么?对象是一个具体的事物。对象是一组无序的相关属性和方法的集合,所有的事物都是对象,比如,字符串,数值,数组,函数等二、对象的使用1.保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。代码如下(示例):小明.姓名 = '小明'; xiaoming.name = '小明';小明.性别 = '男' ; ...原创 2022-04-11 22:15:33 · 294 阅读 · 0 评论 -
JavaScript笔记------变量、属性、函数、方法的区别
1.变量和属性的相同点:都用来存储数据 var num = 18; var obj = { age: 18, } console.log(obj.age);不同点:变量:单独声明并赋值,使用的时候直接写变量名属性:在对象里面不需要声明 使用的时候必须是 对象.属性2.函数和方法的相同点都是实现某种功能,做某件事 var num = 18; var obj = { age: 18, fn:functio原创 2022-04-09 18:45:19 · 751 阅读 · 0 评论 -
JavaScript笔记(八)-----匿名函数、作用域、预解析
一、CSS3新增布局样式1.分栏1.1 column-count 列数 栏数 p{ columns-count }原创 2022-04-08 01:46:59 · 505 阅读 · 0 评论 -
JavaScript笔记(七)-----函数(1)
函数就是封装了一段可以被重复执行调用的代码块特点:让代码重复使用,避免了代码的冗余函数使用分为两步:声明函数和调用函数1.声明函数语法结构function 函数名(){//函数体} function myName(){ alert("mery"); }1.function 声明函数的关键字 要全部小写2.函数不调用自己不执行2.调用函数函数名(); function myName(){ alert("王...原创 2022-04-06 23:57:29 · 749 阅读 · 0 评论 -
JavaScript笔记(六)----循环语句
一、while 循环语法结构while (条件表达式){ //循环体}执行思路:当条件表达式结果为true,则执行循环体, 否则,退出循环 里面也有计数器, 初始化变量有操作表达式,完成计数器的更新,防止死循环二、do while 循环语法结构:do{ //循环体}while(条件表达式)执行思路:与while不同的地方在于 do while 先执行一次循环体,再判断条件,如果条件表达式结果为真,...原创 2022-04-02 23:28:41 · 678 阅读 · 0 评论 -
JavaScript 笔记(五)----分支语句
前言JavaScript的流程控制分为顺序结构,分支结构和循环结构本章主要讲解分支结构一、if语句1.if单分支语句语法如下:条件成立执行代码,否则什么也不做if (条件表达式) { 条件成立执行的代码语句}if单分支语句的执行思路:执行思路:如果if里面的条件表达式结果为真 true,则执行大括号里面的 执行语句如果if 条件表达式结果为假, 则不执行大括号里面的语句,执行if 语句后面的代码二、if else 双分支语句...原创 2022-04-01 22:26:00 · 1281 阅读 · 0 评论 -
JavaScript笔记(四)-----运算符
一、 赋值运算符 =注意!!= 赋值== 值相等=== 值相等 类型相同二、 算术运算符1. + 加法运算符 当+两侧同时为数字时,表示加法运算1 + 1 // 2 当+任何一侧为字符串,表示字符串拼接(进行了隐式转换)效果如下:'a' + 'bc' // "abc"1 + 'a' // "1a"false + 'a' // "falsea" 第一行是两个布尔值相加,第二行是数...原创 2022-03-31 23:34:46 · 1383 阅读 · 0 评论