javascript学习笔记
关注
分享
扫一扫
文章平均质量分 75
✪憑星月✪
这个人很懒，但还是写了点东西。
展开
-
JavaScript事件委托(代理)
事件委托(代理)是什么？事件委托，也叫事件代理(event delegation)把每个元素都需要的事件委托给这些元素的父元素。通过事件冒泡传递的原理，只需要为父元素绑定事件函数，其子元素的事件函数就可以通过冒泡直接触发父元素的事件函数。简单理解就是通过冒泡让子元素使用父元素的事件函数，避免为大量同类型的子元素绑定相似事件函数。事件委托效果如何实现事件委托就是把子元素的事件函数交给父元素。可以使用到ul或ol下的li。为ul绑定事件函数，需要对其中的某个li进行操作时可以使用event.ta原创 2022-05-26 22:22:57 · 439 阅读 · 2 评论 -
JavaScript事件对象
事件对象是什么？事件对象表示事件的状态。由浏览器创建，具有鼠标位置坐标，事件元素位置坐标，元素事件是否冒泡等。获取事件对象当事件触发时，事件对象会作为参数传递给事件响应函数。我们定义一个形参就可以获得事件对象(使用arguments也可以获取)。即使不写形参，在事件响应函数中也可以直接使用event获取事件对象(亲测Edge，谷歌，火狐可以)。div.onclick=function(){console.log(event); console.log("box响应点击");}IE浏览器原创 2022-05-26 17:41:04 · 490 阅读 · 0 评论 -
JavaScriptDOM事件流
事件流描述的是从页面接受事件的顺序。事件发生时会在元素节点间按照特定的顺序传递，这个传递过程就是DOM事件流。DOM事件流分为三个阶段捕获阶段：浏览器从HTML文档，到body标签，再逐层深入到事件元素。途中不会触发各级元素的对应事件。从另一角度理解：为了寻找事件元素而从上到下依次寻找。 当前目标阶段：捕获阶段找到事件元素，该事件元素的对应事件触发。 冒泡阶段：事件元素的事件触发后，浏览器按照捕获阶段的原路返回。返回过程中途径每一级元素，便触发对应元素的同一事件。...原创 2022-05-25 19:53:06 · 314 阅读 · 0 评论 -
Javascript节点操作
节点操作是Javascript获取元素的方式之一。另一种是利用Javascript提供的DOM方法获取元素。常见的有getElementById，getElementsByTagName()等；这种方法每获取一次元素就要getElement一次，较为繁琐(相对于节点操作而言)。我们可以使用节点操作，在获取某一个元素后，使用节点操作就可以直接获取它的子元素，子节点，兄弟节点等。节点简介节点在Javascript中包括文本节点，属性节点，元素节点，注释节点。节点具有节点类型(nodeType)，节点原创 2022-05-24 17:35:43 · 780 阅读 · 1 评论 -
HTML5自定义属性中的使用数据属性(using data attributes)
HTML5允许用户使用自定义属性来保存并使用这些数据。自定义属性出现在元素标签内部，这些属性与特定的元素项关联，允许我们在html元素中保存信息。使用数据属性是以data-为前缀的。后面内容也可以跟连字符-。例如data-first-name，data-index保存信息多种多样。例如为了计数li的顺序使用data-index，为了指定父子关系使用data-parent。这个是bilibili的一部分网页代码，可以看到使用数据属性的大量使用。读写使用数据类型由于使用数据类型是自定..原创 2022-05-23 20:21:53 · 368 阅读 · 0 评论 -
JavaScript操作元素属性方式的辨析
目录读取属性写入属性移除属性检测属性是否存在getAttributeNSJavaScript操作元素属性具有很多方式。这里主要辨析Element.属性名与Element.getAttribute()这两类方式的区别。读取属性Element.属性名：这个方法可以读取title，id，className等，注意属性名要按照javascript的格式来。特例：类名是className。Element.getAttribute()：这个方法同样是读取属性，但是略有不同。.原创 2022-05-23 18:01:33 · 413 阅读 · 1 评论 -
JavaScript排他思想
什么是排他思想？排他思想是为一组同类型元素中的某一个元素设置样式时，采用的一种特定顺序。首先将所有元素的样式设置为一般样式(包括特定的某个元素)，再为特定元素设置特定样式。排他思想的优势排他思想适用于为多个同类型元素设置样式或效果的情况。避免为单个元素重复设置相同样式，可以有效显示出用户操作下某一元素的改变。实现排他思想的步骤为全部元素设置一般效果 为特定元素设置特定效果<!DOCTYPE html><html lang="en"><head>原创 2022-05-22 21:22:32 · 2200 阅读 · 0 评论 -
JavaScript innerHTML和innerText和textContent的区别
textContent，innerHTML和innerText都是元素的属性，通过修改这个元素的属性可以达到修改元素内容的目的。但是三者之间略有不同。innerHTML表示元素所有的后代html。该范围包括文本节点，注释节点，元素节点等内容。在读写该属性时，我们可以获取一个字符串，这个字符串包括元素内部的内容，包含空格，换行，注释。innerText表示元素所有的文本内容，包括文本节点，子元素和后代元素的文本节点。值得注意的是不包括注释内容，设置样式为display为none的话，也不会包含原创 2022-05-22 18:07:14 · 904 阅读 · 0 评论 -
javascript事件
事件类型事件类型是一个用来说明发生什么类型事件的字符串。例如onmousemove onclick。事件类型是一个字符串，实际上也可以说事件类型就是事件名字。事件目标:事件目标是发生的事件或与之相关的对象。window的onload事件,按钮的onclick事件都具有指定的对象。一般对象可以分为window,document,Element。事件处理程序事件处理程序或事件监听程序是处理或响应事件的函数。当特定的目标上发生了特定类型的事件时，浏览器会调用相应的事件处理程序。事件对象是与原创 2022-05-22 15:49:29 · 119 阅读 · 0 评论 -
JavaScript脚本化CSS
脚本化CSS可以理解为使用javascript操作CSS。CSS指定HTML元素在浏览器显示的样式,规定了元素的外观。它允许开发者指定元素的字体，颜色，边距，缩进，边框，定位等。脚本化CSS使得CSS和JavaSccript结合在一起，可以更加丰富网页视觉效果。CSS相关html文档视觉效果包括字体，颜色，间距等。CSS指定许多样式作为属性名来控制元素的字体颜色，下划线，边距等样式，属性名后跟冒号和属性值。属性值指定了CSS样式要展现什么效果。eg:font-size: 20px;原创 2022-05-18 19:30:57 · 1512 阅读 · 0 评论 -
JavaScript函数
函数定义函数是一段可以被重复执行或调用的代码块。当某一段代码使用次数较为频繁时，使用函数将这一段代码简化为一个函数，只需要函数名就可以调用这一整段代码，可以减少程序员工作量，使开发工作更有条理性。函数分类函数分为用户自定义和系统自带两类用户自定义函数：function add(num1,num2){······}系统自带函数：alert(),Math对象的方法······函数参数函数定义时会在函数名后的小括号内书写至少0个参数。参数类型不限，命名遵循标识符规则，写在小括号内的参数原创 2022-05-16 20:10:45 · 757 阅读 · 0 评论 -
javascript闭包
闭包定义MDN的官方解释：一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。一般理解：在嵌套定义的函数中闭包让你可以在一个子函数中访问到父函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。作用域javascript的变量作用域分为两种类型全局作用域：直接在script标签内部定义或函数内部未声明直接赋值的变量(就是没写var.原创 2022-05-14 20:12:57 · 156 阅读 · 0 评论 -
javascript异步加载
异步加载定义原创 2022-05-10 20:15:54 · 734 阅读 · 0 评论 -
Javascript实现拖拽效果
我们执行拖拽操作时，1.按住某元素2.移动鼠标3.移动鼠标到相应位置后松开鼠标基于以上操作，页面拖拽效果需要三个事件onmousedown onmousemove onmouseup在onmousedown事件中，我们需要定义函数表明，该元素被按住，即将进行移动操作，需要计算x坐标值，并触发后续的onmousemove事件。在onmousemove事件中，我们需要计算元素坐标位置，根据鼠标移动改变元素位置，准备执行鼠标松开时的事件函数。在onmouseup事件中，我们需要以原创 2022-05-09 20:21:22 · 1035 阅读 · 0 评论 -
正则表达式对象
正则表达式是对象，是由RegExp构造函数创建的。正则表达式对象具有三个方法和一些属性。正则表达式构造函数我们使用var reg1=new RegExp();创建一个正则表达式对象。这个构造函数具有两个字符串参数。第一个参数是正则表达式的主体部分，第二个参数是正则表达式的修饰符(g m i)。eg: var reg1=new RegExp("name","gi");这里创建的就是一个不区分大小写的，全局范围内的检索name字符串的正则表达式。当需要根据使用范围动态创建正则表达式时，我们需原创 2022-05-06 20:23:39 · 672 阅读 · 0 评论 -
JavaScript正则表达式
正则表达式定义正则表达式(Regular Expression,简称为regex,regexp,或re)使用单个字符串来描述，匹配一系列符合某个句法规则的字符串搜索模式,属于对象范畴。可以理解为描述字符模式的对象应用于文本搜索和文本替换的操作。正则表达式的创建正如同其他对象的创建，正则表达式可以使用字面量直接创建，也可以使用构造函数创建。值得注意的是字面量创建时需要把要匹配的字符串放在两个斜杠内。eg:var reg1=/a/ ------------------使用字...原创 2022-05-05 20:33:23 · 715 阅读 · 1 评论 -
javascript获取元素方式
eg：<img id="img1" class="i1" src="">document.getElementById("id")-通过id获取元素 document.getElementsByTagName(name)-通过元素名(也可称为标签名)获取元素 document.getElementsByClassName(name)-通过类名获取元素 document.querySelectorAll(.i1)-通过CSS选择器获取元素-不适用ie8及更早版本 document.fo原创 2022-01-28 11:57:13 · 821 阅读 · 0 评论