墨祈啊-CSDN博客

原创【JS】拖拽

目录拖拽元素拖拽的流程IE8拖拽元素拖拽的流程当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove当鼠标松开时，被拖拽元素固定在当前位置 `onmouseupvar box1 = document.getElementById("box1"); box1.onmousedown = function (event) { //为document绑定一个跟随鼠标事件 onmousemove // 鼠标按下时，所处在box

2021-03-17 16:35:17 206

原创【JS】事件的绑定

文章目录对象.事件 = 函数addEventListener()对象.事件 = 函数使用对象.事件 = 函数的形式绑定响应函数- 只能同时为一个元素的一个事件绑定一个响应函数- 不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的。addEventListener()通过addEventListener()方法也可以为元素绑定响应函数参数：- 事件的字符串，不要on- 回调函数，当事件触发时，该函数被调用- 是否在捕获阶段触发事件，需要一个Boolean值，一般都传false- 不支持

2021-03-16 03:24:22 290

原创【JS】事件冒泡

目录事件的冒泡（Bubble）在开发中，大部分情况冒泡都是有用的。取消冒泡事件的冒泡（Bubble）所谓冒泡就是时间的向上传到，当后代元素上的时间被触发时，其祖先元素的相同事件也会被触发。比如：body > div > span给三者都绑定了单击响应函数，点击span，会触发span，div，body三者的单击响应函数。在开发中，大部分情况冒泡都是有用的。比如：给document绑定了onmousemove的事件，倘若没有冒泡，页面中有div，鼠标滑过div时，onmouse

2021-03-16 01:47:34 348

原创【JS】事件对象

目录事件对象onmousemoveclientX、clientYpageX、pageY获取滚动条滚动距离事件对象当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递响应函数。在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标、键盘哪个按键被按下、鼠标滚轮滚动方向，等等。areaDiv.onmousemove = function(event){ // 这里的event就是事件对象};注意：在IE8及以下的浏览器中，是将时间对象作为window对象的属性来保存的v

2021-03-15 17:41:30 122

原创【JS】操作CSS样式

目录操作CSS内联样式修改样式读取样式获取元素样式获取元素当前显示的样式currentStylegetComputedStyle()自定义函数，用来支持所有浏览器其他样式相关属性clientWidth、clientHeightoffsetWidth、offsetHeightoffsetParentoffsetLeft、offsetTopscrollWidth、scrollHeight操作CSS内联样式修改样式语法：元素.style.样式名 = 样式值box1.style.width = "300p

2021-03-15 16:00:56 389

原创【JS】调用function时加括号和不加括号的区别

加括号 - 赋值返回值btn.onclick = delA(); 不加括号 - 赋值对象btn.onclick = delA; 其中，delA是一个functionfunction delA(){}

2021-03-15 12:20:53 470

原创【JS】取消点击超链接之后的页面跳转

点击超链接，会跳转页面，这是超链接的默认行为，需取消。可通过在响应函数的最后return false来取消默认行为或在设置herf="javascript:;"

2021-03-15 12:15:32 773

原创【JS】用户可选择确定或取消的提示框

confirm()用于弹出一个带有确认和取消按钮的提示框需要一个字符串作为参数，该字符串将会作为提示文字显示出来确定 = true取消 = falseif (confirm("确认删除"+tr.getElementsByTagName("td")[0].innerHTML+"吗？")){ tr.parentNode.removeChild(tr);}...

2021-03-15 12:11:38 1175

原创【JS】DOM增删改

文章目录增createElement()createTextNode()appendChild()insertBefore()replaceChild()innerHTMLinnerHTML和appendChild()一起用去添加新node删removeChild()改innerHTMLinnerText增createElement()可以创建一个元素节点对象需要一个标签名做参数，会根据该标签名创建元素节点对象将创建好的对象作为返回值返回var li = document.createEle

2021-03-15 07:40:46 75

原创【JS】DOM查询

DOM查询获取元素节点通过id查找元素查找所有li节点查询name=gender的所有节点获取元素节点的子节点查找#city下所有li节点返回#city的所有子节点返回#phone的第一个子节点获取父节点和兄弟节点获取#bj的父节点返回id为android的前一个兄弟节点读取#username的value属性值设置#username的value属性值获取#bj的文本值获取元素节点通过document对象调用getElementById() - 通过id属性获取一个元素节点对象getElementBy

2021-03-15 03:51:07 546

原创【JS】文档的加载

文档的加载文档的加载顺序将JS代码写在页面下部onload文档的加载顺序浏览器在加载一个页面时，是按照自上而下的顺序加载的，读取到一行就运行一行。将JS代码写在页面下部若将script标签写在页面的上边，在执行代码时，页面还没有加载，页面上的对象无法获取，报错。将js代码编写到页面的下部，就是为了可以在页面加载完毕以后再执行JS代码。onloadonload事件会在整个页面加载完成之后才触发。支持该事件的对象：image, layer, window。为window绑定一个onload事件

2021-03-15 03:23:31 200

原创【JS】DOM

DOMDOM模型节点 Node四类常用节点节点的属性文档节点事件DOMDocument Object Model 文档对象模型JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作WEB页面。文档：Document 文档表示的是整个HTML网页文档对象：Object 对象表示将网页中的每一个部分都转换为了一个对象。模型：Model 使用模型来表示对象之间的关系，这样方便我们获取对象。模型节点 Node节点 - 是构成网页的最基本的组成部分，网页中的每一个部分都

2021-03-14 13:37:22 77

原创【JS】字符串和正则相关的方法

splite()将字符串拆分为数组。方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式拆分字符串此法即使不指定全局匹配，也会全部拆分var str = "1a2b3c4d5e6f";var result = str.split(/[A-z]/);console.log(result);//["1", "2", "3", "4", "5", "6", ""]search()搜索字符串中是否含有指定内容若搜索到指定内容，则返回第一次出现的索引若没有搜索到，则返回-1可

2021-03-14 09:11:31 76

原创【JS】正则表达式

创建正则表达式语法：var 变量 = new RegExp(“正则表达式”,“匹配模式”);var reg = new RegExp("a"); // reg是一个对象console.log(reg); // /a/正则表达式的test()方法检查一个字符串是否符合正则表达式的规则，若符合则返回true，否则返回false检测字符串str中是否含有"a"严格区分大小写var reg = new RegExp("a"); // reg是一个对象console.log(reg); //

2021-03-14 08:46:57 97

原创【JS】String() 方法

在底层，字符串是以字符数组的形式保存的。比如：var str = "Hello";在底层是这样的：["H","e","l","l","o"]所以很多属性和方法和Array一样length 属性获取字符串长度console.log("Hello".length); // 5charAt()返回指定位置的字符根据索引获取指定字符var str = "Hello";var result = str.charAt(0);console.log(result); // H

2021-03-14 06:00:17 420

原创【JS】包装类

三个包装类JS中有三个包装类，可以将基本数据类型转换为对象。String() - 基本数据类型 -> String对象Number() - 基本数据类型 -> Number对象Boolean() - 基本数据类型 -> Boolean对象// 创建一个Number类型的对象var num = new Number(3);注意：在实际开发中，不会使用基本数据类型的对象。做一些比较时可能带来不可预期的结果。什么时候用？JS自己用。比如：var n = 123;n

2021-03-14 04:10:46 245

原创【JS】数组 Array

数组数组也是一个对象。和普通对象功能类似，也是用来存储一些值得不同的是，普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引元素的。数组的存储性能比普通对象要好，在开发中经常使用数组来存储一些数据索引 index从0开始的整数创建数组对象var arr = new Array();console.log(typeof arr); // object使用typeof检查一个数组时，会返回object向数组中添加元素语法：数组[索引] = 值arr[0] = 10;ar

2021-03-14 03:55:35 206

原创【JS】Math对象

Math和其他对象不同，不是构造函数，是一个工具类。封装了数学运算相关的属性和方法。属性都是常量，固定数值。直接查文档就完事啦！方法abs()绝对值ceil()向上取整注意负数console.log(Math.ceil(-1.5)); // -1floor()向下取整注意负数console.log(Math.floor(-1.5)); // -2round()四舍五入取整注意负数console.log(Math.round(-1.5)); // -1

2021-03-14 03:55:27 102

原创【JS】Date对象

Date对象Date对象表示时间创建一个Date对象若直接使用构造函数创建一个Date对象，则会封装为当前代码执行时间var d = new Date(); // Sat Mar 13 2021 11:06:58 GMT-0800 (北美太平洋标准时间)创建一个指定时间的对象需要在构造函数中传递一个表示时间的字符串作为参数var d = new Date("03/12/2021 11:10:30"); // Fri Mar 12 2021 11:10:30 GMT-0800 (北美太平洋

2021-03-14 03:32:37 263

原创【JS】函数的arguments

在调用函数时，浏览器每次都会传递进两个隐含的参数函数的上下文对象封装实参的对象argumentsarguments是一个类数组对象，可通过索引来操作数据，可获得长度在调用函数时，所传递的实参都会封装到arguemnts中保存arguments.length可以用来获取实参的长度即使不定义形参，也可以通过arguments来使用实参argument[0] 表示第一个实参callee属性 - 对应当前正在执行的函数对象function fun() { console.log(

2021-03-14 03:02:13 175

原创【JS】call() 和 apply()

call, apply两个都是函数对象的方法当对函数调用call()和apply()的时候，都会调用函数执行在调用call和apply时，可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的thisfunction fun() { alert(this);//object Window}var obj = {name:"obj"};var obj2 = {name:"obj2"};fun.call(obj.name); // objfun.apply(

2021-03-14 02:44:18 106

原创【JS】垃圾回收（GC）

垃圾回收就像人生活的时间长了会产生垃圾一样，程序运行过程中也会产生垃圾。这些垃圾积攒过多会导致程序运行速度过慢，所以需要一个垃圾回收机制，来处理运行过程中产生的垃圾。垃圾变量当一个对象没有任何的变量活属性对它进行引用，此时它将永远无法被操作，此对象就是垃圾对象。垃圾对象过多，会占用大量内存空间，导致程序运行变慢，必须清理。在JS中拥有自动垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收操作。（由浏览器/JS引擎自动回收）何时回收student1 = null;

2021-03-13 09:26:25 85

原创【JS】toSting()

console.log(student1);// "[object Object]"当我们直接在页面中打印一个对象时，事件上是输出对象的toString()方法的返回值（但谷歌浏览器打印出的是Object的内容）若希望在输出时不输出[object Object]，可以为对象添加一个toString()方法...

2021-03-13 09:11:49 97

原创【JS】原型对象

原型 prototype我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype。这个属性对应着一个对象，这个对象就是我们多为的原型对象。若函数作为普通函数调用，prototype没有任何作用当函数通过构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象。可以通过__proto__来访问该属性。原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问这个原型对象。可以将对象中共有的内容，统一设置到原型对象中。// 向MyClass的原

2021-03-13 08:13:16 70

原创【JS】构造函数

构造函数创建一个构造函数，专门用来创建Student对象的，构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是，构造函数习惯上首字母大写。构造函数和普通函数的区别就是调用方式的不同：普通函数：直接调用构造函数：使用new关键字来调用构造函数的执行流程：1. 立即创建一个新的对象2. 将新建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象3. 逐行执行函数中的代码4. 将新建的对象作为返回值返回function Student(name, ge

2021-03-13 07:36:27 81

原创【JS】使用工厂方法创建对象

function createStudent(name, gender, studentNumber){ // 创建一个新对象 var obj = new Object(); // 向对象中添加属性 obj.name = name; obj.gender = gender; obj.studentNumber = studentNumber; // 将对象返回 return obj;}var student1 = createStudent("moqi", "male", 1234567

2021-03-13 06:34:32 191

原创【JS】this

解析器在调用函数时，每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是thisthis指向一个对象这个对象我们称为函数执行的上下文对象根据函数调用方式的不同，this会指向不同的对象以函数形式调用时，this永远都是window以方法形式调用时，this是调用方法的对象function fun(){ console.log(this); // [object Window]}fun();var obj = { name: "moqi", sayName: fun}

2021-03-13 06:17:17 99

原创【JS】作用域

1. 全局作用域直接编写在script标签中的JS代码，都在全局作用域。全局作用域在页面打开时创建，在页面关闭时销毁。在全局作用域中，有一个全局对象window。它代表一个浏览器的窗口，由浏览器创建，课直接使用在全局作用域中，创建的变量都会作为window对象的属性保存创建的函数都会作为window对象的方法保存var a = 10;console.log(window.a);function fun() { console.log("test");}// 以下两句完全

2021-03-13 03:30:45 216

原创【JS】枚举对象的属性

语法：for (var 变量 in 对象){ }var student = { name: "sn", gender: "male", studentNumebr: "123456789"};for (var n in student){ console.log("test");}for … in 语句，对象中有几个属性，循环体就执行几次。每次执行时，会将对象中的一个属性的名字赋值给变量。所以可以这样输出对象的属性名：for (var n in student) { c

2021-03-13 01:15:13 134

原创【JS】对象的方法

对象的属性值可以是任何函数类型，也可以是个函数：var obj = new Object();obj.name = "MoQi";obj.sayName = function(){ console.log(obj.sayName);}函数可以称为对象的属性：若一个函数作为一个对象的属性保存，则这个函数是这个对象的方法。调用该函数就是调用对象的方法(method)。只是名称上的区别，和函数没有本质的区别...

2021-03-13 01:01:30 58

原创【JS】立即执行函数

立即执行函数函数定义完，立即被调用。立即执行函数，旺旺只会执行一次直接在script标签中写这样的匿名函数会报错：function(){ alert("...");}写成这样才不会报错：var fun = function(){ alert("...");}或者这样(function(){ alert("...");})...

2021-03-13 00:51:29 79

原创【JS】函数

函数函数也是个对象。函数中可以封装一些功能（代码），在需要是可以执行这些功能（代码）使用typeof检查一个函数对象时，会返回function创建一个函数对象1. 将要封装的代码以字符串的形式传递给构造函数（在实际开发中很少使用构造函数来创建函数对象）var fun = new Function("console.log('Hello');");封装在函数中的代码不会立即执行函数中的代码会在函数调用时执行调用函数语法：函数对象()当调用函数时，函数中封装的代码会按照顺序执行

2021-03-12 18:02:52 65

原创【JS】使用字面量创建对象

创建对象可以用var obj = new Object();也可以像基本数据类型的格式一样，使用字面量var obj = {};使用对象字面量，可以在创建对象时，直接指定对象中的属性语法：{属性名：属性值, 属性名：属性值，…}var obj = {name: “墨祈”};属性名本质上是个字符串，可以加引号，也可以不加，建议不加。但若要使用特殊的名字，则必须加引号。属性名和属性值是一组一组的名值对结构。名和值之间使用冒号（：）连接，多个名值对之间使用逗号（,）隔开。若一个属性之后

2021-03-12 17:39:57 1112

原创【JS】基本数据类型和引用数据类型

基本数据类型变量都是保存在栈内存中，基本数据类型的值直接在栈内存中存储。相互不影响。var a = 123;var b = a;a++; // b的值不变栈内存中：变量值b123a123引用数据类型对象保存在堆内存中var obj = new Object();obj.name = "墨祈";var obj2 = obj;obj.name = "MoQi"; // obj和obj2的名字都被改了栈内存：变量值obj20

2021-03-12 17:28:45 106

原创【JS】对象的属性名和属性值

属性名对象的属性名不强制要求遵守标识符的规范，但尽量按照标识符的规范obj.var = "hello";若要使用特殊的属性名，不能使用.的方式来操作。要用对象[“属性名”] = 属性值，读取也要用这种方式obj.123 = 789; // 报错obj["123"] = 789; // 正确，但括号里只能是字符串运算符优先级中，.、[]、new 优先级最高，都是用来操作对象的。使用 [ ] 这种形式去操作属性，更加灵活。在 [ ] 中可以直接传递一个变量，这样变量值是多少就会读取那个属性

2021-03-12 16:49:22 724

原创【JS】对象

为什么用对象若使用基本数据类型的数据，所创建的变量都是独立的，不能成为一个整体。对象属于一种复合数据类型，在对象中可以保存多个不同的数据类型的属性。对象的分类1. 内建对象由ES标准中定义的对象，在任何ES的实现中都可以使用例： Math, String, Number, Boolean, Function, Object …2. 宿主对象由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象例： BOM (浏览器对象模型) - consoleDOM (文本对象模型) - docu

2021-03-12 16:34:02 74

原创【JS】检测程序性能、计时

JS中用一组语句来计时：console.time("test"); 开始计时console.timeEnd("test"); 结束计时需要注意的是，括号中是计时器的名字，开始结束要保持一致。

2021-03-09 13:35:47 128

原创【JS】循环体起名 + break/continue

震惊！JS里的循环体居然可以起名！还能用break来控制停止哪个循环体！outer:for (var i=0; i<5; i++) { console.log("外层循环：" + i); for (var j=0; j<5; j++) { break outer; console.log("内层循环：" + j); }}...

2021-03-09 12:58:11 806

原创【JS】打印九九乘法表

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>  <script type="text/javascript"> for (var i=1; i < 10; i++){ for (var j=1; j<=i; j++){ docu

2021-03-09 12:44:42 202

原创【JS】条件句

ifif(条件句){ 语句} else if (条件句) { 语句} else { 语句}switchsswitch(条件表达式){ case 表达式1: 语句... break; case 表达式2: 语句... break; default: 语句... break;} 例：switch (parseInt(score/10)){ case 10: case 9: case 8: case 7: case 6: console.lo

2021-03-09 10:12:25 82

[武汉大学]密码学.rar

空空如也