小白学习js
小欣CZX
交大,研二。
展开
-
js学习笔记83——获取元素的样式
js学习笔记83——获取元素的样式currentStylegetComputedStyle()只读如何兼容ie8上一节学习到,通过style获取的样式为内联样式,那如何获取样式表中的样式?currentStyle读取当前元素正在显示的样式语法:元素.currentStyle.样式名注意:这个只在ie中支持,其他浏览器不支持。getComputedStyle()这个和上一个的区别是,它是一个window方法,可直接使用。注意:ie9以下不支持。需要两个参数:1、要获取样式的元素2、传递一原创 2021-07-02 09:30:00 · 239 阅读 · 1 评论 -
js学习笔记82——操作内联样式
js学习笔记82——操作内联样式通过js修改元素的样式查参考手册内联样式读取元素的样式看如下代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, in原创 2021-07-02 09:29:19 · 315 阅读 · 2 评论 -
js学习笔记81——增删改练习
这里写目录标题confirm()设置a标签不跳转完整代码这是一个增删改练习,这个练习做完再放完整代码。confirm()当我们删除东西时,可能只是按错了,所以需要一个提示框确认是否真的要删除。如果点击确定,则这个函数的返回值为true,反之为false。所以可以用这个返回值来确定是否要删除。 var flag = confirm("确认删除"+name+"吗?"); if(flag){ tr.parentNode.removeChild(tr); }设置a标签不原创 2021-07-01 08:59:12 · 193 阅读 · 4 评论 -
js学习笔记80——dom增删改
js学习笔记80——dom增删改基础代码createElement()createTextNode()appendChild()insertBefore()replaceChild()removeChild()完整html代码先给一个基础代码基础代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" c原创 2021-07-01 07:37:25 · 116 阅读 · 2 评论 -
js学习笔记79——dom查询的剩余方法
js学习笔记79——dom查询的剩余方法如何获取body标签?如何获取html获取页面中所有元素根据class查询获取某个class里的divquerySelectorAll()如何获取body标签?<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <原创 2021-07-01 07:36:53 · 66 阅读 · 2 评论 -
js学习笔记78——全选练习代码
js学习笔记78——全选练习代码这个是练习代码,不解释了。里面的checked可以看w3c手册<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i原创 2021-07-01 07:36:05 · 65 阅读 · 0 评论 -
js学习笔记77——dom查询3
js学习笔记77——dom查询3代码优化parentNodeinnerTextpreviousSiblingpreviousElementSiblingnextSibling完整代码parentNodepreviousSiblingnextSibling代码优化前几节写了很多重复性代码,每次都得写一个单击响应函数,代码基本一样,这很费时,且代码量变多。如何简化? // 定义一个函数,专门用来为指定元素绑定单击响应函数 // idStr为要绑定单击响应函数的对象的id属性值 // fu原创 2021-07-01 07:35:26 · 174 阅读 · 2 评论 -
js学习笔记76——dom查询2
js学习笔记76——dom查询2getElementsByTagName()childNodeschildrenfirstChildfirstElementChild练习代码getElementsByTagName()childNodesfirstChildlastChildgetElementsByTagName()返回当前节点指定标签名后代节点childNodes获取当前节点的所有子节点,对于这个#city,当这么写时 var btn05 = document.getEle原创 2021-07-01 07:34:22 · 78 阅读 · 0 评论 -
js学习笔记75——dom查询
js学习笔记75——dom查询innerHTMLgetElementsByTagNamegetElementsByName打印元素属性练习代码getElementByIdgetElementsByTagNamegetElementsByNameinnerHTML通过这个可以获得元素内部的html代码getElementsByTagName根据标签名来获取一组元素节点对象,返回一个类数组对象。getElementsByName根据name属性获取一组对象打印元素属性对于子结束标签,ii原创 2021-06-30 09:58:40 · 79 阅读 · 0 评论 -
js学习笔记74——文档的加载
js学习笔记74——文档的加载从上一节可以看到,我把script放在了body里而不是head。如果放head会怎样?<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w原创 2021-06-30 09:58:10 · 48 阅读 · 0 评论 -
js学习笔记73——事件的简介
js学习笔记73——事件的简介事件onclickondblclickonmousemove写在script里事件我们可以在事件对应的属性中设置一些js代码,这样当事件诶触发时,这些代码将会执行。onclick<body> <button id="btn" onclick="alert('点我干嘛')">我是一个按钮</button></body>其他的事件可以查文档。链接ondblclick<body> &l原创 2021-06-30 09:57:49 · 150 阅读 · 1 评论 -
js学习笔记72——DOM简介
js学习笔记72——DOM简介例子DOM是文档对象模型。js中通过DOM来对html文档进行操作。文档:整个的HTML网页文档对象:将网页中的每一个部分都转换为了一个对象。模型:表示对象之间的关系,这样方便我们获取对象。如果想从a找到title,则可以根据这个模型找,先找到它们的共同祖先,然后找title。节点:构成我们网页的最基本的组成部分,网页中的每一个部分都可以称为节点。例子<!DOCTYPE html><html lang="en"><head原创 2021-06-30 09:57:27 · 84 阅读 · 1 评论 -
js学习笔记71——电子邮件的正则
js学习笔记71——电子邮件的正则规则实现常用正则表达式规则 /* 电子邮件规则 1 任意数字字母下划线 1.2 .任意字母数字下划线(可有可无) 2 @ 3 任意字母数字 4 .任意字母(2-5位) 5 .任意字母(2-5位) */ 实现 // \w{3,} (\.\w+)* @ [A-Za-z0-9]+ (\.[A-Za-z]{2,原创 2021-06-30 09:57:04 · 337 阅读 · 0 评论 -
js学习笔记70——正则表达式语法2
js学习笔记70——正则表达式语法2.检查一些特殊字符\w\W\d和\D\s和\S\b和\B去除字符串的前后空格. <script> var reg = /./; console.log(reg.test("gvf")); console.log(reg.test("\n")); console.log(reg.test("")); </script>检查一些特殊字符如果我们想检查字符中是否有原创 2021-06-30 09:56:28 · 97 阅读 · 0 评论 -
js学习笔记69——正则表达式语法
js学习笔记69——正则表达式语法量词n{X}和n{X,Y}n+n*n?^nn$/^a$//^a|a$/检查是否为合法手机号如果我们想检查一个字符串中是否有aaa: <script> var reg = /aaa/; console.log(reg.test("aaagd")); </script>如果我们想检查一个字符串中是否有连续100个a,就不能像上面这么写了。第一是可读性差,第二是不好数个数。那要怎么写?量词n{X原创 2021-06-30 09:55:57 · 351 阅读 · 1 评论 -
js学习笔记68——字符串和正则相关的方法
js学习笔记68——字符串和正则相关的方法splitsearchmatchreplace这节学习几个支持正则表达式的字符串的方法。链接split把字符串分割为字符串数组。 <script> var s = "1a2b3c4d5e6f"; var result = s.split("c"); console.log(result); console.log(s); </script>这里只能根原创 2021-06-30 09:55:29 · 82 阅读 · 0 评论 -
js学习笔记67——正则语法
js学习笔记67——正则语法用字面量来创建正则表达式检查一个字符串中是否有a或b检查是否有字母检查是否有abc或adc或aec检查是否有除了a的字母检查是否有除了数字的字符之前创建正则表达式的方式有点麻烦,有简单的方式。用字面量来创建正则表达式语法:var 变量 = /正则表达式/匹配模式 <script> var reg = /a/i; var reg2 =/a/g; var str = "a"; var str2原创 2021-06-30 09:54:41 · 61 阅读 · 0 评论 -
js学习笔记66——正则表达式的简介
js学习笔记66——正则表达式的简介创建正则表达式对象test如果我们想检查电子邮件格式对不对,对于人来说,很简单,但是效率不高。那如何让计算机来检查格式呢?需要告诉计算机关于邮件的规则:1前面是xxx。2跟@3后面是xxx。4.com这些规则如何让计算机知道呢?用正则表达式。计算机可以根据正则表达式来检查一个字符串是否符合规则。创建正则表达式对象语法:var reg = new RegExp("正则表达式","匹配模式");先不考虑匹配模式 <script>原创 2021-06-30 09:54:04 · 85 阅读 · 1 评论 -
js学习笔记65——字符串的方法
js学习笔记65——字符串的方法lengthcharAtcharCodeAtfromCharCodeconcatindexOflastIndexOfslicesubstringsubstrsplittoUpperCase和toLowerCaselength字符串在底层是以字符数组的形式保存的,所以可以像数组一样操作。 <script> var s = "Hello"; console.log(s.length); console.log原创 2021-06-29 07:37:52 · 123 阅读 · 1 评论 -
js学习笔记64——包装类
js学习笔记64——包装类js为我们提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象。这三个分别是:String()、Number()、Boolean()。它们将数据转换为相应的对象。 <script> var num = new Number(3); console.log(typeof num); </script>现在变成了对象,就俺家可以给num添加属性。 <script>原创 2021-06-29 07:36:58 · 130 阅读 · 1 评论 -
js学习笔记63——Math
js学习笔记63——Mathabsceilfloorroundrandommax和minpowsqrt上一节学的Date是构造函数,但是Math却不是,它是对象。 <script> console.log(typeof Math); console.log(typeof Date); </script>所以,Math是不用创建对象的,它封装了数学运算相关的属性和方法。Math的详细内容见W3Cabs <scr原创 2021-06-29 07:36:32 · 121 阅读 · 1 评论 -
js学习笔记62——date对象
js学习笔记62——date对象创建修改时间方法getDategetDaygetMonthgetFullYeargetTime获取当前时间戳Date.now创建使用date对象表示一个时间 <script> var d = new Date(); console.log(d); </script>这里是当前执行代码的时间,如果我想要其他时间呢?修改时间传递一个表示时间的字符串作为参数。 <script>原创 2021-06-29 07:36:05 · 62 阅读 · 1 评论 -
js学习笔记61——arguments
js学习笔记61——arguments在调用函数时,浏览器每次除了传递this以外,还有arguments——封装实参的对象。它是一个类数组对象,可以通过索引操作数据,也可以获取长度。在调用函数时,我们所传递的实参都会在arguments中保存。 <script> function fun(){ console.log(arguments[0]); console.log(arguments[原创 2021-06-29 07:35:40 · 63 阅读 · 0 评论 -
js学习笔记60——call和apply
js学习笔记60——call和applycall()和apply()是函数对象的方法,需要通过函数对象来调用。语法:函数名.clall(),函数名.apply() <script> function fun(){ console.log("我是fun"); } fun(); fun.call(); fun.apply(); </script>从上图可以看到原创 2021-06-29 07:35:15 · 77 阅读 · 0 评论 -
js学习笔记59——数组的剩余方法
js学习笔记59——数组的剩余方法concatjoinreversesortconcat <script> var arr = ["孙悟空","猪八戒","沙和尚"]; var arr2 = ["白骨精","玉兔精","蜘蛛精"]; var arr3 = ["二郎神","太上老君","玉皇大帝"]; var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主"); console.log(arr)原创 2021-06-29 07:34:48 · 272 阅读 · 1 评论 -
js学习笔记58——slice和splice
js学习笔记58——slice和spliceslicespliceslice <script> var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]; var newarr=arr.slice(0,2); console.log(arr); console.log(newarr); </script>从结果可以看到,原数组不会改变,新的数组提取的是参数1到参数2这段原创 2021-06-29 07:34:24 · 115 阅读 · 1 评论 -
js学习笔记57——forEach
js学习笔记57——forEachjs中提供了一个用来遍历数组的方法,即forEach()。但是它用得不同,它兼容性不大好,只支持ie8以上的浏览器。forEach()方法需要一个函数作为参数。 <script> var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]; arr.forEach( function(){ console.log("我被调用");原创 2021-06-29 07:33:55 · 64 阅读 · 0 评论 -
js学习笔记56——数组的遍历
js学习笔记56——数组的遍历遍历数组的意识是将数组中的所有元素都输出出来。简单粗暴的方法: <script> var arr = ["孙悟空","猪八戒","沙和尚"]; console.log(arr[0]); console.log(arr[1]); console.log(arr[2]); </script>感觉有点蠢,不够方便。用for循环: <script>原创 2021-06-29 07:28:57 · 86 阅读 · 0 评论 -
js学习笔记55——数组的四个方法
js学习笔记55——数组的四个方法pushpopunshiftshift上w3school查数组方法。链接push <script> var arr = ["孙悟空","猪八戒","沙和尚"]; var result = arr.push("唐僧","白骨精"); console.log(result); console.log(arr); </script>push的返回值为数组的长度。p原创 2021-06-28 07:45:30 · 113 阅读 · 1 评论 -
js学习笔记54——数组字面量
这里写目录标题语法创建时指定元素任何数据类型数组也是对象下面这个代码可行吗? <script> var arr = new Array(); arr[0]=10; arr.hello="abc"; console.log(arr); </script>可以,但一般不这么干。这不是数组的使用方式。接下来学习使用字面量创建数组语法var arr = [];创建时指定元素 <原创 2021-06-28 07:44:38 · 121 阅读 · 1 评论 -
js学习笔记53——数组简介
js学习笔记53——数组简介数组创造数组对象添加元素读取元素获取数组长度向数组最后一位添加元素从前面知道,对象分内建对象、宿主对象、自定义对象。前面学了很多自定义对象,接下来学习另外两个。数组数组与普通的对象不同之处在于,普通对象用字符串做属性名,而数组用数字作索引操作。创造数组对象 <script> var arr = new Array(); console.log(typeof arr); </script>添加元原创 2021-06-28 07:44:03 · 120 阅读 · 1 评论 -
js学习笔记52——垃圾回收
js学习笔记52——垃圾回收程序运行过程中会产生垃圾,积攒过多后会导致程序运行速度过慢,因此需要一个垃圾回收机制来处理垃圾。 var obj = new Object(); ....一系列程序 obj=null;上面这个代码执行后,obj与堆中的地址断开了联系,使得堆中这块地址成为垃圾。(因为这块地址没法引用,但存在在那里)如何清理?js中有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁。但是如果我没有写obj=null,而我实际上不再使用o原创 2021-06-28 07:43:39 · 51 阅读 · 0 评论 -
js学习笔记51——原型对象2
js学习笔记51——原型对象2使用in检查对象中是否有某个属性时,如果对象中没有但原型中有,也会返回true。 <script> function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; } Person.prototype.sayName=原创 2021-06-28 07:43:12 · 95 阅读 · 1 评论 -
js学习笔记50——原型对象
js学习笔记50——原型对象上节学到将函数定义在全局作用域。这也是有问题的。它污染了全局作用域的命名空间。所以尽量别这么写。如何处理?原型对象。我们创建的每一个函数,解析器都会向函数中添加一个属性prototype,不同的函数的prototype不一样。 <script> function Person() { }; function fun() { }; co原创 2021-06-28 07:42:41 · 60 阅读 · 0 评论 -
js学习笔记49——构造函数修改
js学习笔记49——构造函数修改先放代码 <script> function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; this.sayName = function () { alert(this.name);原创 2021-06-28 07:40:01 · 160 阅读 · 0 评论 -
js学习笔记48——构造函数
js学习笔记48——构造函数构造函数instanceof构造函数看如下代码, <script> function createPerson(name, age, gender) { //创建一个新的对象 var obj = new Object(); //向对象中添加属性 obj.name = name, obj.age = age,原创 2021-06-28 07:39:35 · 54 阅读 · 0 评论 -
js学习笔记47——使用工厂方法创建对象
js学习笔记47——使用工厂方法创建对象先看代码 var obj = { name:"孙悟空", age:18, gender:"男", sayName:function(){ alert(this.name); } }; var obj = { name:"猪八戒", age:28, gender:"男", sayName:function(){ alert(this.na原创 2021-06-28 07:39:10 · 68 阅读 · 0 评论 -
js学习笔记46——this
js学习笔记46——this以函数的形式调用以方法的形式调用用法解析器在调用函数时,每次都会向函数内部传递一个隐含的参数。这个隐含的参数就是this。this指向一个对象,这个对象称为函数执行的上下文对象。根据函数的调用方式不同,this会指向不同的对象。以函数的形式调用this为window。 <script> function fun(){ console.log(this); } fun(); </script>原创 2021-06-28 07:38:07 · 64 阅读 · 1 评论 -
js学习笔记45——debug
js学习笔记45——debug1设置断点。2刷新页面3单步运行前面说变量前有var的会声明提前,如何看呢?1设置断点。2刷新页面3单步运行原创 2021-06-27 07:42:21 · 50 阅读 · 0 评论 -
js学习笔记44——作用域
js学习笔记44——全局作用域全局作用域变量的声明提前变量函数函数作用域作用域指一个变量作用的范围。如下代码, <script> function fun(){ var a=1; } console.log(a); </script>报错,因为,a是在函数里,作用域不在函数外。js有两种作用域:全局作用域和函数作用域全局作用域直接编写在script标签中的代码。在页面打开时创建,原创 2021-06-27 07:41:47 · 117 阅读 · 1 评论