Javascript中最常用的55个经典技巧

合集下载

js方法

js方法对于前端开发人员来说，JavaScript（简称JS）是一门非常重要的编程语言。

它被广泛用于为网站添加动态功能和交互性。

本文将以中文探讨一些常用的JavaScript方法，用来解决网站开发中的实际问题。

1. getElementById方法这个方法是JavaScript中最常用的方法之一。

它通过元素的id属性来获取DOM（文档对象模型）中的特定元素。

比如，如果我们有一个按钮元素的id为"myButton"，我们可以使用以下代码获取该元素：```javascriptvar button = document.getElementById("myButton");```通过这个方法，我们可以在网页中获取特定元素，并基于它们执行一些操作。

2. addEventListener方法addEventListener方法用于给指定元素添加事件监听器。

它可以监听诸如点击、滚动、鼠标移动等事件，并对这些事件作出响应。

以下是一个例子，当按钮被点击时，会弹出一个提示框：```javascriptvar button = document.getElementById("myButton");button.addEventListener("click", function() {alert("按钮被点击了！");});```通过这个方法，我们可以使网页元素具备交互功能。

3. setInterval方法这个方法用于按照指定的时间间隔执行一个函数。

它可以用来创建定时器，实现定时刷新或周期性更新。

以下是一个例子，每隔一秒钟，在控制台输出一个计数值：```javascriptvar count = 0;var intervalId = setInterval(function() {count++;console.log(count);}, 1000);```通过这个方法，我们可以实现一些动态效果，比如轮播图或实时数据更新。

js使用手册

js使用手册JavaScript（简称JS）是一种脚本语言，用于在网页上实现交互效果和动态内容。

它是目前使用最广泛的编程语言之一，因为它可以用于开发网页应用、游戏、桌面应用等各种类型的程序。

本文将为你提供一份简明的JavaScript使用手册，介绍了JavaScript的基本语法、数据类型、函数、控制流和常见的操作等内容。

一、基本语法：1.注释：可以使用双斜杠（//）进行单行注释，或使用斜杠和星号（/*...*/）进行多行注释。

2.变量和常量：使用var关键字声明变量，使用const关键字声明常量。

JavaScript使用弱类型，所以变量可以在不同的数据类型之间进行转换。

3.数据类型：JavaScript包含了多种数据类型，包括数字、字符串、布尔值、数组、对象等。

可以使用typeof操作符来检查变量的数据类型。

4.运算符：JavaScript支持常见的算术运算符（例如+、-、*、/）和逻辑运算符（例如&&、||、!），以及比较运算符（例如==、>、<）。

5.字符串操作：可以使用+运算符来连接字符串，也可以使用字符串模板（`${...}`）来创建格式化的字符串。

二、数据类型：1.数字类型：JavaScript中的数字包括整数和浮点数。

可以进行基本的算术运算，也可以使用内置的Math对象来进行高级的数学计算。

2.字符串类型：JavaScript中的字符串以单引号（'...'）或双引号（"..."）括起来。

可以使用一系列内置的字符串方法来操作和处理字符串。

3.布尔类型：JavaScript中的布尔类型只有两个值，true和false。

可以通过逻辑运算符和比较运算符来进行布尔运算。

4.数组类型：JavaScript中的数组可以存储多个值，并根据索引进行访问。

可以使用一系列内置的数组方法来操作和处理数组。

5.对象类型：JavaScript中的对象是一种复合数据类型，可以存储键值对。

js数组常见操作方法

js数组常见操作方法
JavaScript 数组是一种非常常见的数据结构，用于存储多个值。

它可以轻松地添加、删除和修改数组中的元素。

下面是一些常见的JavaScript 数组操作方法：
1. push() 方法：向数组的末尾添加一个或多个元素，并返回新数组的长度。

2. pop() 方法：从数组的末尾删除一个元素，并返回该元素的值。

3. shift() 方法：从数组的开头删除一个元素，并返回该元素的值。

4. unshift() 方法：向数组的开头添加一个或多个元素，并返回新数组的长度。

5. splice() 方法：从数组中添加或删除元素。

6. slice() 方法：返回从指定位置开始到指定位置结束前的元素，而不修改原始数组。

7. concat() 方法：通过合并两个或多个数组来创建一个新数组。

8. sort() 方法：对数组的元素进行排序。

9. reverse() 方法：颠倒数组中元素的顺序。

以上这些方法是 JavaScript 数组操作中最常用的一些方法，但实际上 JavaScript 对数组操作的方法还有很多，需要根据实际需要选择合适的方法。

当你了解了这些方法的基本用途和应用场景后，你可以更好地操作 JavaScript 数组。

javascript的用法

javascript的用法JavaScript是一种广泛应用于网页开发中的脚本语言，可以为网页增加动态效果和交互性。

它是一种强大而灵活的语言，可以通过嵌入在HTML文档中的<script>标签来使用。

以下是JavaScript的几个常见用法。

1. 网页交互JavaScript能够与用户进行交互，通过响应用户的操作来实现一些功能。

例如，可以使用JavaScript为网页的按钮添加点击事件，使用户点击按钮后触发相应的操作。

这样可以增加用户的互动性和使用体验，使网页更加生动活泼。

2. 表单验证JavaScript可以用来对表单进行验证，确保用户输入的数据符合要求。

通过在表单提交之前进行验证，可以防止无效或恶意的数据被提交到服务器端。

可以使用JavaScript对用户输入的内容进行格式、长度、大小写等方面的验证，并及时给出错误提示。

3. 动态内容加载JavaScript可以实现动态内容加载，无需刷新整个网页即可更新特定部分的内容。

通过使用Ajax技术，可以与服务器进行异步通信，从而实现在页面上动态加载新的数据，而无需重新加载整个页面。

这种方式可以大大提升用户体验，并提高网页的性能。

4. 数字运算和日期处理JavaScript是一种脚本语言，拥有强大的数学计算能力。

它支持基本的算术运算，如加、减、乘、除，还可以进行更高级的数学运算，如三角函数、指数运算等。

此外，JavaScript还内置了日期处理的功能，可以用来处理日期的格式化、计算和比较等操作。

5. 动画效果通过使用JavaScript，可以为网页添加各种动画效果，使网页更加生动有趣。

可以通过改变HTML元素的属性来实现动画效果，如改变元素的位置、颜色、大小等。

此外，还可以使用JavaScript配合CSS样式，利用过渡和动画属性来实现更复杂的动画效果。

6. 浏览器检测和兼容性处理JavaScript可以用来检测用户所使用的浏览器类型和版本，从而根据不同的浏览器提供不同的代码和功能支持，保证网页在不同浏览器上的兼容性。

js `的用法(一)

js `的用法(一)JavaScript 的用法什么是 JavaScriptJavaScript 是一种脚本语言，通常用于网页开发。

JavaScript 可以在网页上实现复杂的交互效果和动态功能。

它是前端开发必备的编程语言之一。

变量的声明和使用•使用var关键字声明变量•使用let关键字声明块级作用域的变量•使用const关键字声明常量var name = 'John';let age = 25;const PI = ;(name); // 输出：John(age); // 输出：25(PI); // 输出：数据类型JavaScript 中有多种数据类型，包括：•字符串（String）•数字（Number）•布尔值（Boolean）•数组（Array）•对象（Object）•空（Null）•未定义（Undefined）let name = 'John'; // 字符串let age = 25; // 数字let isStudent = true; // 布尔值let fruits = ['apple', 'banana', 'orange']; // 数组let person = { name: 'John', age: 25 }; // 对象let nullValue = null; // 空let undefinedValue; // 未定义(typeof name); // 输出：string(typeof age); // 输出：number(typeof isStudent); // 输出：boolean(typeof fruits); // 输出：object(typeof person); // 输出：object(typeof nullValue); // 输出：object （这是一个历史遗留问题）(typeof undefinedValue); // 输出：undefined条件语句使用条件语句可以根据不同的条件执行不同的代码块。

js中常用方法

js中常用方法JavaScript是一种广泛使用的编程语言，它具有许多常用方法，这些方法可以帮助开发人员更轻松地完成任务。

在本文中，我们将介绍一些常用的JavaScript方法。

1.字符串方法JavaScript中的字符串方法可以帮助我们处理字符串。

例如，我们可以使用“length”方法获取字符串的长度，使用“indexOf”方法查找字符串中的特定字符或子字符串，使用“slice”方法截取字符串的一部分等等。

2.数组方法JavaScript中的数组方法可以帮助我们处理数组。

例如，我们可以使用“push”方法向数组末尾添加一个元素，使用“pop”方法从数组末尾删除一个元素，使用“shift”方法从数组开头删除一个元素等等。

3.对象方法JavaScript中的对象方法可以帮助我们处理对象。

例如，我们可以使用“hasOwnProperty”方法检查对象是否具有特定属性，使用“keys”方法获取对象的所有属性名称，使用“values”方法获取对象的所有属性值等等。

4.数学方法JavaScript中的数学方法可以帮助我们进行数学计算。

例如，我们可以使用“Math.round”方法将数字四舍五入到最接近的整数，使用“Math.floor”方法将数字向下取整到最接近的整数，使用“Math.ceil”方法将数字向上取整到最接近的整数等等。

5.日期方法JavaScript中的日期方法可以帮助我们处理日期和时间。

例如，我们可以使用“Date.now”方法获取当前日期和时间的时间戳，使用“getFullYear”方法获取当前年份，使用“getMonth”方法获取当前月份等等。

JavaScript中的常用方法可以帮助我们更轻松地完成任务。

无论是处理字符串、数组、对象、数学计算还是日期和时间，这些方法都可以帮助我们更高效地编写代码。

因此，熟练掌握这些方法是成为一名优秀的JavaScript开发人员的必备技能。

js 字符串处理方法

JavaScript 提供了许多内置的字符串处理方法。

以下是一些常用的方法：1. `charAt(index)`: 返回指定位置的字符。

2. `concat(str1, str2, ..., strN)`: 连接两个或更多字符串。

3. `indexOf(searchValue[, fromIndex])`: 返回某个指定的字符串值在字符串中首次出现的位置。

4. `lastIndexOf(searchValue[, fromIndex])`: 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

5. `slice(startIndex[, endIndex])`: 提取字符串的一部分，并在新的字符串中返回被提取的部分。

6. `substring(startIndex[, endIndex])`: 提取字符串中两个指定的索引号之间的字符。

7. `toUpperCase()`: 将所有字符转换为大写。

8. `toLowerCase()`: 将所有字符转换为小写。

9. `replace(searchValue, replaceValue)`: 替换某个字符串的字符。

10. `trim()`: 移除字符串两侧的空格。

11. `split(separator[, limit])`: 把字符串分割为字符串数组。

12. `substr(startIndex, length)`: 从起始索引号提取字符串中指定数目的字符。

13. `search(regexp)`: 检索与正则表达式相匹配的值。

14. `match(regexp)`: 检索与正则表达式相匹配的值，并返回匹配对象数组。

15. `replace(searchValue, replaceValue)`: 用新字符串替换匹配到的字符串。

16. `split(separator[, limit])`: 把字符串分割为字符串数组。

17. `concat(...)`: 连接两个或更多字符串。

js中集合的用法

在JavaScript中，"集合"（Set）是一种特殊的数据结构，它类似于数组，但成员的值都是唯一的，没有重复的值。

以下是使用JavaScript集合的一些基本方法：1.创建集合：可以使用new Set()来创建一个新的集合。

let mySet = new Set();2.添加元素：使用add()方法来添加元素到集合中。

mySet.add(1); // 添加单个元素mySet.add([1, 2, 3]); // 添加数组元素，数组中的每个元素都将作为单独的元素添加到集合中3.检查元素是否存在：使用has()方法来检查一个元素是否存在于集合中。

console.log(mySet.has(1)); // 输出：true 或 false，取决于1是否已经在集合中4.删除元素：使用delete()方法来删除集合中的一个元素。

mySet.delete(1); // 删除元素15.遍历集合：可以使用for...of循环或者keys()、values()、entries()等方法来遍历集合。

for (let item of mySet) {console.log(item); // 输出集合中的每个元素}// 或者使用迭代器方法：for (let item of mySet.keys()) {console.log(item); // 输出集合中的每个元素}for (let item of mySet.values()) {console.log(item); // 输出集合中的每个元素}for (let [key, value] of mySet.entries()) {console.log(key, value); // 输出集合中的每个元素及其对应的键（在Set 中，键就是元素本身）}6.清空集合：使用clear()方法来清空集合中的所有元素。

mySet.clear(); // 清空集合。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

JavaScript最常用的55个经典技巧Kevin1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu=return(false)><td>no</table> 可用于Table2. <body onselectstart="return false"> 取消选取、防止复制3. onpaste="return false" 不准粘贴4. oncopy="return false;" oncut="return false;" 防止复制5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标7. <input style="ime-mode:disabled"> 关闭输入法8. 永远都会带着框架<script language="JavaScript"></script>9. 防止被人frame<SCRIPT LANGUAGE=JAVASCRIPT></SCRIPT>10. 网页将不能被另存为<noscript><*** src="/*.html>";</***></noscript>11. <input type=button value="/查看网页源代码onclick="window.location = "view-source:"+ """>12.删除时确认<a href=""javascript :if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"">删除</a>13. 取得控件的绝对位置//Javascript<script language="Javascript">function getIE(e){var t=e.offsetTop;var l=e.offsetLeft;while(e=e.offsetParent){t+=e.offsetTop;l+=e.offsetLeft;}alert("top="+t+"/nleft="+l);}</script>//VBScript<script language="VBScript"></script>14. 光标是停在文本框文字的最后<script language="javascript">function cc(){var e = event.srcElement;var r =e.createTextRange();r.moveStart("character",e.value.length);r.collapse(true);r.select();}</script><input type=text name=text1 value="123" onfocus="cc()">15. 判断上一页的来源javascript :document.referrer16. 最小化、最大化、关闭窗口<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Minimize"></object><object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Maximize"></object><OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"> <PARAM NAME="Command" value="/Close"></OBJECT><input type=button value="/最小化onclick=hh1.Click()><input type=button value="/blog/最大化onclick=hh2.Click()><input type=button value=关闭onclick=hh3.Click()>本例适用于IE17.屏蔽功能键Shift,Alt,Ctrl<script>function look(){if(event.shiftKey)alert("禁止按Shift键!"); //可以换成ALT CTRL}document.onkeydown=look;</script>18. 网页不会被缓存<META HTTP-EQUIV="pragma" CONTENT="no-cache"><META HTTP-EQUIV="Cache-Control" CONTENT="no-cache,must-revalidate"><META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 或者<META HTTP-EQUIV="expires" CONTENT="0">19.怎样让表单没有凹凸感？<input type=text style="""border:1 solid #000000">或<input type=text style="border-left:none; border-right:none;border-top:none; border-bottom:1 solid #000000"></textarea>20.<div><span>&<layer>的区别？<div>(division)用来定义大段的页面元素，会产生转行<span>用来定义同一行内的元素，跟<div>的唯一区别是不产生转行<layer>是ns的标记，ie不支持，相当于<div>21.让弹出窗口总是在最上面:<body onblur="this.focus();">22.不要滚动条?让竖条没有:<body style="overflow:scroll;overflow-y:hidden"></body>让横条没有:<body style="overflow:scroll;overflow-x:hidden"></body>两个都去掉？更简单了<body scroll="no"></body>23.怎样去掉图片链接点击后，图片周围的虚线？<a href="#" onFocus="this.blur()"><img src="/logo.jpg" border=0></a>24.电子邮件处理提交表单<form name="form1" method="post" action=mailto:****@***.comenctype="text/plain"><input type=submit></form>25.在打开的子窗口刷新父窗口的代码里如何写？window.opener.location.reload()26.如何设定打开页面的大小<body onload="top.resizeTo(300,200);">打开页面的位置<body onload="top.moveBy(300,200);">27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动<STYLE>body{background-image:url(/logo.gif); background-repeat:no-repeat; background-position:center;background-attachment: fixed}</STYLE>28. 检查一段字符串是否全由数字组成<script language="Javascript"></script>29. 获得一个窗口的大小document.body.clientWidth; document.body.clientHeight30. 怎么判断是否是字符if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");else alert("全是字符");31.TEXTAREA自适应文字行数的多少<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight"></textarea>32. 日期减去天数等于第二个日期<script language=Javascript>function cc(dd,dadd){//可以加上错误处理var a = new Date(dd)a = a.valueOf()a = a - dadd * 24 * 60 * 60 * 1000a = new Date(a)alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日") }cc("12/23/2002",2)</script>33. 选择了哪一个Radio<HTML><script language="vbscript">function checkme()for each ob in radio1if ob.checked thenwindow.alert ob.valuenextend function</script><BODY><INPUT name="radio1" type="radio" value="/style" checked>Style <INPUT name="radio1" type="radio" value="/blog/barcode">Barcode <INPUT type="button" value="check" onclick="checkme()"></BODY></HTML>34.脚本永不出错<SCRIPT LANGUAGE="JavaScript"></SCRIPT>35.ENTER键可以让光标移到下一个输入框<input onkeydown="if(event.keyCode==13)event.keyCode=9">36. 检测某个网站的链接速度：把如下代码加入<body>区域中:<script language=Javascript>tim=1setInterval("tim++",100)b=1var autourl=new Array()autourl[1]=1000){this.resized=true;this.style.width=1000;}"align=absMiddle border=0>"autourl[2]=""autourl[3]=1000){this.resized=true;this.style.width=1000;}"align=absMiddle border=0>"autourl[4]=""autourl[5]=1000){this.resized=true;this.style.width=1000;}"align=absMiddle border=0>"function butt(){***("<form name=autof>")for(var i=1;i<autourl.length;i++)***("<input type=text name=txt"+i+" size=10 value="/测试中……> =》<input type=textname=url"+i+" size=40> =》<input type=button value="/blog/GOonclick=window.open(this.form.url"+i+".value)><br>")***("<input type=submit value=刷新></form>")}butt()function auto(url){document.forms[0]["url"+b].value=urlif(tim>200){document.forms[0]["txt"+b].value="/链接超时"}else{document.forms[0]["txt"+b].value="/blog/时间"+tim/10+"秒"}b++}function run(){for(var i=1;i<autourl.length;i++)***("<imgsrc=http://"+autourl+"/"+Math.random()+" width=1 height=1onerror=auto("http://"+autourl+"")>")}run()</script>37. 各种样式的光标auto ：标准光标default ：标准箭头hand ：手形光标wait ：等待光标text ：I形光标vertical-text ：水平I形光标no-drop ：不可拖动光标not-allowed ：无效光标help ：?帮助光标all-scroll ：三角方向标move ：移动标crosshair ：十字标e-resizen-resizenw-resizew-resizes-resizese-resizesw-resize38.页面进入和退出的特效进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x,transition=y)">推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">这个是页面被载入和调出时的一些特效。