JavaScript笔记

青旅半醒 2022-04-05 14:09 190阅读 0赞

console.log()、[console.info][]()、console.debug()的作用都是在浏览器控制台打印信息的。使用最多的是console.log()。[console.info][]()和console.debug()本质上与console.log()没有区别。是console.log()的另一个名字而以，可以理解为它们三个其实就是同一个，只不过名字不一样。其中，[console.info][]()打印出的信息，在控制显示的时候信息前面会出现一个小图标，而且谷歌浏览器和opera不支持console.debug()。

变量先定义后使用，函数可以先调用后定义（实名函数，匿名函数）变量名和函数名重名 保留函数名。函数名同名后面的函数会覆盖掉前面的函数  
1. JavaScript 对象是变量的容器。JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。  
3. 在使用 return 语句时，函数会停止执行，并返回指定的值（一个）。当一个函数执行的结果还有其他的用处时return  
4. JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。  
5. 在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕，本地变量就会被删除。  
6. js中单引号和双引号没有任何区别,有一处代码报错下面你的就不执行  
7. 如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。  
8. 函数参数只在函数内起作用，是局部变量。  
9. 在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。  
10. 函数的形式参数和实参个数必须一样  
11 event.stopPropagation()这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件依然会执行，当你调用这个方法的时候，如果点击一个连接，这个连接仍然会被打开.event.preventDefault()这是阻止默认事件的方法，调用此方法时，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；return false 这个方法比较暴力，他会同时阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()  
12. 只要是input框取出来的值都是字符串类型  
13. val()是在有jQuery插件的时候才能用，value是在没有jQuery插件的情况下也能用。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RweTUyMQ_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RweTUyMQ_size_16_color_FFFFFF_t_70 1]

1.JavaScript 对象是变量的容器。JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。  
2.  
在使用 return 语句时，函数会停止执行，并返回指定的值（一个）。当一个函数执行的结果还有其他的用处时return  
3.  
JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。  
4.  
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕，本地变量就会被删除。  
5.  
js中单引号和双引号没有任何区别,有一处代码报错下面你的就不执行  
6.  
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。  
7.  
函数参数只在函数内起作用，是局部变量。  
8.  
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。  
9.  
函数的形式参数和实参个数必须一样  
11 event.stopPropagation()这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件依然会执行，当你调用这个方法的时候，如果点击一个连接，这个连接仍然会被打开.event.preventDefault()这是阻止默认事件的方法，调用此方法时，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；return false 这个方法比较暴力，他会同时阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()  
只要是input框取出来的值都是字符串类型  
val()是在有jQuery插件的时候才能用，value是在没有jQuery插件的情况下也能用。

日期时间函数（需要用变量调用）：

var b = new Date(); //获取当前时间

b.getTime() //获取时间戳

b.getFullYear() //获取年份

b.getMonth()+1; //获取月份

b.getDate() //获取天

b.getHours() //获取小时

b.getMinutes() //获取分钟

b.getSeconds() //获取秒数

b.getDay() //获取星期几

b.getMilliseconds() //获取毫秒

indexOf() 方法对大小写敏感！ 返回字符串中一个子串第一处出现的索引（从左到右搜索）。如果没有匹配项，返回 -1 lastIndexOf返回字符串中一个子串最后一处出现的索引（从右到左搜索），如果没有匹配项，返回 -1 。

charAt返回指定位置的字符

数学函数（用Math来调用），例： alert（Math.abs(-3)）

abs(x) //返回数的绝对值。

ceil(x) //对小数进行上舍入。

floor(x) //对数进行下舍入。

round(x) //把数四舍五入为最接近的整数。

max(x,y) //返回 x 和 y 中的最高值。

min(x,y) //返回 x 和 y 中的最低值。

pow(x,y) //返回 x 的 y 次幂。

sqrt(x) //返回数的平方根。

random() //返回 0 ~ 1 之间的随机数。

任何一个数%10得到的就是个位数  
如果两侧都是纯数字可以正常进行运算  
如果运算符两侧有一侧是非数字字符串结果是NaN

除了变量和数字都要加引号  
检测数据类型typeof 变量名（有弊端null检测出的是object）无敌万能的方法：jquery.type()  
只有在文档中输出的才能用  
换行 \\n换行  
绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档

JavaScript HTML DOM - 改变 HTMLdocument.getElementById(“p1”).innerHTML=“新文本!”;  
document.getElementsByClassName(“intro”);  
document.getElementById(“image”).src=“landscape.jpg”;JavaScript HTML DOM - 改变CSS  
document.getElementById(“p2”).style.color=“blue”;  
document.getElementById(“p2”).style.fontFamily=“Arial”;  
document.getElementById(“p2”).style.fontSize=“larger”;

< h1 id="id1">我的标题 1< /h1>
    < button type="button" 
    onclick="document.getElementById('id1').style.color='red'">
    点我!< /button>

HTML 事件的例子：  
当用户点击鼠标时  
当网页已加载时  
当图像已加载时  
当鼠标移动到元素上时  
当输入字段被改变时  
当提交 HTML 表单时  
当用户触发按键时  
onload 和 onunload 事件会在用户进入或离开页面时被触发。  
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。  
onload 和 onunload 事件可用于处理 cookie。

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

addEventListener() 方法用于向指定元素添加事件句柄。  
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。  
你可以向一个元素添加多个事件句柄。  
你可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。  
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。  
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。  
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。  
你可以使用 removeEventListener() 方法来移除事件的监听。  
`element.addEventListener(event, function, useCapture);`  
第一个参数是事件的类型 (如 “click” 或 “mousedown”).  
第二个参数是事件触发后调用的函数。  
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。  
addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件

实例
    element.addEventListener("click", myFunction);element.addEventListener("click", mySecondFunction);element.addEventListener("mouseover", myFunction);
    element.addEventListener("click", mySecondFunction);
    element.addEventListener("mouseout", myThirdFunction);

给 script 元素设置 defer 属性可以让浏览器提前处理页面部分，在页面处理结束并做好显示准备时再处理脚本部分，这样可以提高页面载入的速度。

将 script 元素放进 head 元素中有利于提高网页的可维护性，放在 body 元素的最末尾可以提高页面的加载速度。不管采用哪一种方法，必须确保脚本位置的一致性，要么全部放在 head 元素中，要么全部放在 body 元素的最末尾处。  
用关键字 var 定义变量，而且是局部变量。如果不使用 var ，那么变量是全局变量，可以在函数内外访问变量。一般不建议设置全局变量，因为容易造成数据丢失。

最好为不支持或者未打开 JS 的用户提供替代选项，可以借助于 noscript 元素。如果浏览器支持 JS ,就会忽略 noscript 中的内容，如果不支持 JS, 就会选择 noscript 中的内容。

Array 对象有 4 个用于维护队列和列表的方法： push, pop, shift, unshift。push 方法能将元素添加到数组末尾，unshift 方法能将元素添加到数组开头，pop 方法用于移除数组的最后一个元素，shift 方法则是移除第一个元素。

1：js对大小写非常敏感  
2：//单行注释 /\* \*/多行注释  
3：js六种基本数据类型null undefined number string object boolean  
4 : alert(type of null) 返回字符串object  
5 : `<input type="button" name="" id="" value="提交" onclick="del()"/> <script type="text/javascript"> function del(){ if(confirm("确定删除吗？")){ alert("已经删除"); }else{ alert("取消删除"); } } </script>`  
6：使用DOM创建元素方法（动态添加元素）

<input type="button" onclick="append()" name="" id="" value="按钮" />
                <script type="text/javascript">
                      var i=0;
                      function append(){
                            var a=document.createElement("input")
                            a.type="button";
                            a.value="按钮"+i++;
                            a.addEventListener("click",append);
                            document.body.appendChild(a);
                      }
                </script>

7：动态添加事件（绑定元素时需要知道此元素的唯一标识ID或NAME）

<input type="button" name="" id="button1" value="button1" />
                <input type="button" name="" id="" value="动态添加事件" onclick="addClic(button1)" />
                <script type="text/javascript">
                      function addClic(obj){
                            obj.onclick=function(){
                                  alert("添加事件成功");
                            }
                      }
                </script>

8：readyState属性返回当前文档的状态，该属性返回一下值  
1.uninitialized 还未开始载入  
2.loading 载入中  
3.interactive 已加载，文档与用户可以开始交互  
4.complete 载入完成  
防止按钮连击（导致重复加载使页面变得更卡）  
9: 所有的标签都是对象数据类型（可以动态的添加属性和方法）  
10： 数组里面的数据类型要一致  
11 ：arr\[arr.length\]=""向数组的末尾添加  
test是RegExp的方法，参数是字符串，返回值是boolean类型。  
match是String的方法，参数是正则表达式，返回值是数组。  
i - 修饰符是用来执行不区分大小写的匹配。  
g - 修饰符是用于执行全文的搜索（而不是在找到第一个就停止查找,而是找到所有的匹配）。  
gi-全文查找不区分大小写。  
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

[console.info]: http://console.info
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RweTUyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181212204205205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RweTUyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RweTUyMQ_size_16_color_FFFFFF_t_70 1]: /images/20220405/fbbe8ca103b24f70b8552208f9fb3d74.png