JavaScript实用技巧合集：四十条精华总结

148 浏览量更新于2024-08-31 收藏 94KB PDF 举报

"JavaScript四十条常用技巧大全，涵盖了网页交互、用户行为限制、页面定制等多个方面的技巧，旨在提升JavaScript开发效率和用户体验。" 在JavaScript的世界里，掌握一些实用的技巧可以大大提高开发效率并优化用户体验。以下是一些JavaScript的常用技巧： 1. **屏蔽鼠标右键**：通过`oncontextmenu`事件，可以阻止用户在页面上右键点击，例如`oncontextmenu="window.event.returnValue=false"`。这对于防止用户查看源代码或执行其他可能暴露信息的操作有一定的作用。 2. **取消文本选取和复制**：使用`onselectstart`、`oncopy`和`oncut`事件，可以防止用户选取或复制页面上的文本，如`<span onselectstart="return false;">...</span>`。 3. **禁止粘贴功能**：通过设置`onpaste`事件为`return false`，可以禁用页面元素的粘贴功能，防止用户从剪贴板粘贴内容。 4. **更改浏览器图标（favicon）**：在HTML的`<head>`标签内加入`<link rel="shortcut icon" href="icon.png">`，指定一个.ico格式的图像文件作为浏览器标签页的图标。 5. **显示收藏夹图标**：为了在用户收藏页面时显示自定义图标，同样使用`<link rel="shortcut icon">`，但可以改为`<link rel="icon" href="favicon.ico">`。除了上述的用户交互控制，还有其他一些JavaScript的实用技巧： 6. **DOM操作**：利用`document.getElementById`、`querySelector`或`querySelectorAll`来查找和操作DOM元素，如修改属性、添加或删除类名。 7. **事件委托**：通过在父元素上绑定事件处理函数，可以监听子元素的事件，减少事件监听器的数量，提高性能。 8. **变量作用域**：理解`var`、`let`和`const`的区别，正确使用块级作用域，避免全局变量污染。 9. **立即执行函数表达式（IIFE）**： `(function() { ... })()` 可以创建一个独立的作用域，防止变量冲突，常用于模块化代码。 10. **异步编程**：使用`async/await`配合`Promise`处理异步操作，使代码更易读和维护。 11. **数组方法**：熟练运用`map`、`filter`、`reduce`等数组方法进行数据处理，简化循环逻辑。 12. **对象解构**：利用`{a, b} = obj`进行对象属性的快速赋值，提高代码可读性。 13. **模板字符串**：使用反引号（`）包裹的字符串，可以方便地插入变量和表达式，如`${variable}`。 14. **防抖（debounce）和节流（throttle）**：用于优化频繁触发的事件，如滚动事件，防止函数过度执行。 15. **错误处理**：使用`try...catch`捕获和处理可能出现的错误，确保程序的健壮性。 16. **事件冒泡与事件捕获**：理解这两种事件传播机制，以便正确处理事件响应。 17. **CSS样式操作**：利用`element.style.property`或`element.classList.add/remove/toggle`来改变元素的样式。 18. **AJAX请求**：使用`XMLHttpRequest`或`fetch` API获取服务器数据，实现页面的异步更新。 19. **模块化**：通过`import`和`export`实现ES6模块化，或者使用CommonJS、AMD等方式组织代码。 20. **DOM树遍历**：熟悉`parentElement`、`children`、`firstChild`、`lastChild`等属性，以及`nextSibling`和`previousSibling`方法，用于遍历和操作DOM结构。以上仅是JavaScript技巧的一部分，实际开发中还有更多细节和技巧需要不断学习和实践。这些技巧可以帮助开发者编写更高效、更简洁的代码，提升网页应用的性能和用户体验。

javascript 四十条常用技巧大全四十条常用技巧大全

本文给大家整理了有关js四十条常用技巧，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧

1. 将彻底屏蔽鼠标右键将彻底屏蔽鼠标右键

oncontextmenu=”window.event.returnValue=false”

< table border oncontextmenu=return(false)>< td>no< /table> 可用于 Table

2. 取消选取、防止复制取消选取、防止复制

<span class="tag" style="color:rgb(0,0,128)">< <span class="attribute" style="color:rgb(0,128,128)">body</span> <span class="attribute" style="color:rgb(0,128,128)">onselectstart</span>=<span class="value" style="color:rgb(221,17,68)">”return</span> <span class="attribute" style="color:rgb(0,128,128)">false</span>”></span>

3.JS不允许粘贴不允许粘贴

onpaste=”return false”

4. JS防止复制防止复制

oncopy=”return false;” oncut=”return false;”

5. IE 地址栏前换成自己的图标地址栏前换成自己的图标

<span class="tag" style="color:rgb(0,0,128)">< <span class="attribute" style="color:rgb(0,128,128)">link</span> <span class="attribute" style="color:rgb(0,128,128)">rel</span>=<span class="value" style="color:rgb(221,17,68)">”Shortcut</span> <span class="attribute" style="color:rgb(0,128,128)">Icon</span>” <span class="attribute" style="color:rgb(0,128,128)">href</span>=<span class="value" style="color:rgb(221,17,68)">”favicon.ico”</span>></span>

在文件的根目录放进去这个图片，后缀修改成ico就可以了

6.可以在收藏夹中显示出你的图标可以在收藏夹中显示出你的图标

<span class="tag" style="color:rgb(0,0,128)">< <span class="attribute" style="color:rgb(0,128,128)">link</span> <span class="attribute" style="color:rgb(0,128,128)">rel</span>=<span class="value" style="color:rgb(221,17,68)">”Bookmark”</span> <span class="attribute" style="color:rgb(0,128,128)">href</span>=<span class="value" style="color:rgb(221,17,68)">”favicon.ico”</span>></span>

7.关闭输入法关闭输入法

<span class="tag" style="color:rgb(0,0,128)">< <span class="attribute" style="color:rgb(0,128,128)">input</span> <span class="attribute" style="color:rgb(0,128,128)">style</span>=<span class="value" style="color:rgb(221,17,68)">”ime-mode:disabled”</span>></span>

8. 永远都会带着框架

< script language=”JavaScript”>< !–

if (window == top)top.location.href = “frames.htm”; //frames.htm 为框架网页

// –>< /script>

9. 防止被人防止被人 frame

< SCRIPT LANGUAGE=JAVASCRIPT>< !–

if (top.location != self.location)top.location=self.location;

// –>< /SCRIPT>

10. 网页将不能被另存为网页将不能被另存为

< noscript>< iframe src=*.html>< /iframe>< /noscript>

11. < input type=button value=查看网页源代码查看网页源代码

onclick=”window.location = “view-source:”+ “http://www.pconline.com.cn””>

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”>< !–

function getIE()

dim t,l,a,b

set a=document.all.img1

t=document.all.img1.offsetTop

l=document.all.img1.offsetLeft

while a.tagName< >”BODY”

set a = a.offsetParent

t=t+a.offsetTop

l=l+a.offsetLeft

wend

msgbox “top=”&t&chr(13)&”left=”&l,64,”得到控件的位置”

end function

–>< /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()”>

javascript:

document.referrer

16. 最小化、最大化、关闭窗口最小化、最大化、关闭窗口

< 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=最大化 onclick=hh2.Click()>

< input type=button value=关闭 onclick=hh3.Click()>

本例适用于 IE

17.屏蔽功能键 Shift,Alt,Ctrl

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38589168

粉丝: 7
资源: 968

JavaScript实用技巧合集：四十条精华总结

40种Javascript中常用的使用技巧

javascript常用大全

javascript常用技巧

Javascript常用技巧

JavaScript常用技巧

javascript初学者常用技巧

Javascript常用技巧总结

JavaScript基础与常用技巧全览

JAVASCRIPT40种网页常用小技巧.pdf

Javascript常用小技巧

最新资源