javascript技巧大全

JavaScript是Web开发中不可或缺的一部分，它提供了丰富的功能来操作网页元素和处理用户交互。下面将详细解释这些JavaScript技巧： 1. **事件源对象**: `event.srcElement` 是一个表示触发事件的元素，可以获取到元素的`tagName`和`type`属性，用于识别元素类型。 2. **捕获和释放事件**: `event.srcElement.setCapture()` 用于在事件冒泡阶段捕获事件，而 `event.srcElement.releaseCapture()` 用于释放捕获。 3. **事件按键**: `event.keyCode` 可以获取键盘按键的ASCII码，`event.shiftKey`, `event.altKey`, 和 `event.ctrlKey` 分别表示Shift、Alt和Ctrl键是否被按下。 4. **事件返回值**: `event.returnValue` 可以设置或获取事件处理函数的返回值，影响事件的默认行为。 5. **鼠标位置**: `event.x` 和 `event.y` 提供了鼠标相对于当前元素的坐标。 6. **窗体活动元素**: `document.activeElement` 返回当前获取焦点的元素。 7. **绑定事件**: `document.captureEvents(Event.KEYDOWN)` 用于捕获特定类型的事件，如键盘事件。 8. **访问窗体元素**: `document.all` 是IE浏览器特有的，可以用来获取元素并进行操作，例如 `document.all("txt").focus()` 和 `.select()` 分别用于获取焦点和选中文本。 9. **窗体命令**: `document.execCommand` 可以执行一些常见的文档操作，如剪切、复制、粘贴等。 10. **窗体COOKIE**: `document.cookie` 用于读写页面的Cookie。 11. **菜单事件**: `document.oncontextmenu` 用于处理右键菜单事件。 12. **创建元素**: `document.createElement("SPAN")` 创建一个新的HTML元素。 13. **根据鼠标位置获取元素**: `document.elementFromPoint(event.x,event.y)` 返回指定坐标处的元素。 14. **窗体图片**: `document.images[index]` 访问页面上的图像元素。 15. **窗体事件绑定**: `document.onmousedown=scrollwindow;` 绑定鼠标点击事件。 16. **元素与对象事件绑定**: `document.all.xxx.detachEvent('onclick',a);` 在IE中移除对象的事件监听器。 17. **插件数目**: `navigator.plugins` 可以获取浏览器已安装的插件数量。 18. **取变量类型**: `typeof($js_libpath) == "undefined"` 判断变量是否未定义。 19. **下拉框操作**: `dropdown.options[index]` 和 `dropdown.options.length` 分别用于访问和获取下拉框选项。 20. **查找对象**: `document.getElementsByName("r1")` 和 `document.getElementById(id)` 分别通过名称和ID查找元素。 21. **定时器**: `timer=setInterval('scrollwindow()',delay);` 和 `clearInterval(timer);` 用于设置和清除定时执行的函数。 22. **UNICODE编码解码**: `escape()` 和 `unescape()` 分别用于编码和解码字符串。 23. **父对象**: `obj.parentElement` (DHTML) 和 `obj.parentNode` (DOM) 获取元素的直接父元素。 24. **交换表的行**: `TableID.moveRow(2,1)` 将行2移动到行1的位置。 25. **替换CSS**: `document.all.csss.href = "a.css";` 更改CSS链接。 26. **并排显示**: `display:inline` 使元素并排显示。 27. **隐藏焦点**: `hidefocus=true` 隐藏元素的焦点。 28. **根据宽度换行**: `word-break:break-all` 和 `word-wrap: break-word;` 控制文本换行。 29. **自动刷新**: `<meta HTTP-EQUIV="refresh" CONTENT="8;URL=http://c98.yeah.net">` 设置页面自动刷新。 30. **邮件链接**: `<a href="mailto:aaa@bbb.com?subject=ccc&body=xxxyyy">` 创建电子邮件链接，并设置主题和正文。 31. **快速转到位置**: `obj.scrollIntoView(true)` 让元素滚动到视口可见。 32. **锚点**: `<a name="first">` 和 `<a href="#first">anchors</a>` 定义和链接到页面内的锚点。 33. **网页传递参数**: `location.search();` 获取URL中的查询参数。 34. **可编辑内容**: `obj.contenteditable=true` 使元素变为可编辑。 35. **执行菜单命令**: `obj.execCommand` 执行浏览器内置的命令，如剪切、复制、粘贴等。 36. **双字节字符与汉字匹配**: `/[^\x00-\xff]/` 匹配非单字节字符，`/[\u4e00-\u9fa5]/` 匹配汉字。 37. **让英文字符串超出表格宽度换行**: `word-wrap: break-word;` 和 `word-break: break-all;` 控制单词换行。 38. **透明背景**: `<IFRAME src="1.htm" width=300 height=180 allowtransparency></iframe>` 设置IFRAME背景透明。 39. **获取style内容**: `obj.style.cssText` 返回元素的CSS样式文本。 40. **HTML标签内容**: `document.documentElement.innerHTML` 获取整个HTML文档的内容。 41. **第一个style标签**: `document.styleSheets[0]` 访问页面的第一个CSS样式表。 42. **style标签里的第一个样式**: `document.styleSheets[0].rules[0]` 访问CSS规则。 43. **防止空链接重置页面**: `<a href="javascript:void(0)">word</a>` 阻止空链接导致的页面跳转。 44. **上一网页源**: `asp:request.servervariables("HTTP_REFERER")` (ASP) 和 `javascript: document.referrer` (JavaScript) 获取前一个页面的URL。 45. **释放内存**: `CollectGarbage()` (仅IE) 用于释放JavaScript内存。 以上是JavaScript中的一些常见技巧，熟练掌握这些技巧可以提升代码效率和用户体验。然而，JavaScript的使用场景非常广泛，这里只列举了一部分，实际开发中可能还需要结合DOM操作、AJAX、Promise、ES6新特性等更多内容。