JavaScript的107则使用技巧大全资源-CSDN文库

4星 · 超过85%的资源需积分: 3 134 浏览量 2012-06-18 13:29:25 上传评论收藏 40KB DOC 举报

### JavaScript的107则使用技巧详解 #### 1. 输出语句 - **知识点**：`document.write("")` - `document.write()`方法用于向文档写入文本、HTML表达式或者JavaScript代码。 #### 2. 注释 - **知识点**：`//` 单行注释 - JavaScript中的单行注释使用`//`，可以在一行内注释掉代码，方便调试和说明代码逻辑。 #### 3. HTML文档结构 - **知识点**：传统的HTML文档结构 - HTML文档的基本结构通常包括`<html>`标签下的`<head>`和`<body>`部分。 - `<head>`包含文档的元数据，如标题、样式表链接等。 - `<body>`包含了网页的主要内容。 - 此结构遵循了W3C的标准，确保了网页的可读性和兼容性。 #### 4. 浏览器窗口中的DOM顺序 - **知识点**：浏览器窗口中的DOM对象顺序 - 在浏览器窗口中，DOM对象按照一定的顺序组织起来：`window`对象是最顶层的对象，它包含了`navigator`、`screen`、`history`、`location`以及`document`等子对象。 - 这种层次结构使得开发者可以更容易地访问和控制页面的不同部分。 #### 5. 获取表单元素的名称和值 - **知识点**：`document.getElementById("表单中元素的ID号").name` 或 `.value` - 使用`getElementById`方法可以通过ID选择器获取到表单元素，并通过`.name`或`.value`属性来获取该元素的名称或值。 - 这个方法对于处理用户输入非常有用，特别是在验证表单数据或动态改变表单元素时。 #### 6. 小写转大写 - **知识点**：字符串转大写 - 可以使用`toUpperCase()`方法将字符串中的所有字符转换为大写形式。 - 示例代码： ```javascript document.getElementById("output").value = document.getElementById("input").value.toUpperCase(); ``` #### 7. 值类型 - **知识点**：JavaScript中的基本数据类型 - JavaScript支持以下几种基本的数据类型：`String`（字符串）、`Number`（数字）、`Boolean`（布尔）、`Null`（空值）、`Object`（对象）以及`Function`（函数）。 - 这些类型构成了JavaScript数据模型的基础。 #### 8. 字符串转数值 - **知识点**：`parseInt()` 和 `parseFloat()` - `parseInt()`用于将字符串转换为整数，而`parseFloat()`则用于将字符串转换为浮点数。 - 示例代码： ```javascript var num = parseInt("123"); // 转换为整数 var floatNum = parseFloat("123.456"); // 转换为浮点数 ``` #### 9. 数字转字符串 - **知识点**：数字转字符串 - 可以通过简单地将数字与空字符串`""`拼接来实现数字到字符串的转换。 - 示例代码： ```javascript var num = 123; var strNum = "" + num; // "123" ``` #### 10. 字符串长度 - **知识点**：`length` 属性 - 字符串的`length`属性可以返回该字符串中字符的数量。 - 示例代码： ```javascript var str = "Hello"; console.log(str.length); // 5 ``` #### 11. 字符串连接 - **知识点**：使用 `+` 连接符 - 字符串之间可以通过`+`运算符进行连接。 - 示例代码： ```javascript var str1 = "Hello"; var str2 = "World"; var result = str1 + " " + str2; // "Hello World" ``` #### 12. 比较操作符 - **知识点**：比较操作符 - JavaScript支持多种比较操作符，如`==`（等于）、`!=`（不等于）、`>`（大于）、`>=`（大于等于）、`<`（小于）和`<=`（小于等于）。 - 这些操作符常用于条件判断和逻辑运算。 #### 13. 变量声明 - **知识点**：使用 `var` 关键字 - 在JavaScript中，使用`var`关键字声明变量。 - 示例代码： ```javascript var myVar = "Hello World!"; ``` #### 14. 判断语句 - **知识点**：`if...else` 语句 - `if...else`语句用于基于条件执行不同的代码块。 - 示例代码： ```javascript if (x > 10) { console.log("x is greater than 10"); } else { console.log("x is less than or equal to 10"); } ``` #### 15. 循环结构 - **知识点**：`for` 循环 - `for`循环是一种常用的迭代结构，用于重复执行一段代码直到满足特定条件为止。 - 示例代码： ```javascript for (var i = 0; i < 10; i++) { console.log(i); } ``` #### 16. 循环中止 - **知识点**：`break` 语句 - `break`语句用于立即退出循环，无论循环条件是否满足。 - 示例代码： ```javascript for (var i = 0; i < 10; i++) { if (i === 5) { break; } console.log(i); } ``` #### 17. 函数定义 - **知识点**：函数定义 - JavaScript中的函数使用`function`关键字定义。 - 示例代码： ```javascript function sayHello(name) { console.log("Hello, " + name); } ``` #### 18. 表单访问 - **知识点**：`document.forms[]` - 当页面中有多个表单时，可以通过`document.forms[index]`的方式访问特定的表单对象。 - 示例代码： ```javascript var form = document.forms[0]; ``` #### 19. 窗口操作 - **知识点**：`window` 对象 - `window`对象提供了对浏览器窗口的访问，可以用来打开新窗口、关闭窗口等。 - 示例代码： ```javascript // 打开新窗口 window.open("http://www.example.com", "_blank"); // 关闭当前窗口 window.close(); // 当前窗口对象 window.self; ``` #### 20. 设置状态栏 - **知识点**：`window.status` 属性 - 可以使用`window.status`属性设置浏览器的状态栏文本。 - 示例代码： ```javascript window.status = "加载中..."; ``` #### 21. 弹出提示信息 - **知识点**：`alert()` 方法 - `alert()`方法用于显示一个带有消息和一个“确定”按钮的警告框。 - 示例代码： ```javascript alert("这是一个提示信息！"); ``` #### 22. 弹出确认框 - **知识点**：`confirm()` 方法 - `confirm()`方法用于显示一个带有消息、一个“确定”按钮和一个“取消”按钮的对话框。 - 示例代码： ```javascript if (confirm("您确定要继续吗？")) { // 用户点击了确定 } ``` #### 23. 弹出输入提示框 - **知识点**：`prompt()` 方法 - `prompt()`方法用于显示一个带有消息、一个输入框和一个“确定”按钮的对话框。 - 示例代码： ```javascript var name = prompt("请输入您的名字："); ``` #### 24. 指定显示链接 - **知识点**：`location.href` 属性 - `location.href`属性可以用于获取或设置当前页面的URL。 - 示例代码： ```javascript window.location.href = "http://www.example.com"; ``` #### 25. 获取表单数量 - **知识点**：`forms.length` 属性 - `forms.length`属性可以获取页面上表单的数量。 - 示例代码： ```javascript console.log(document.forms.length); ``` #### 26. 关闭文档输出流 - **知识点**：`document.close()` 方法 - `document.close()`方法用于关闭文档的输出流，确保所有内容都被正确加载。 - 示例代码： ```javascript document.close(); ``` #### 27. 字符串追加 - **知识点**：使用 `+=` 运算符 - 字符串追加可以通过`+=`运算符完成。 - 示例代码： ```javascript var str = "Hello"; str += " World!"; console.log(str); // "Hello World!" ``` #### 28. 创建文档元素 - **知识点**：`document.createElement()` 和 `document.createTextNode()` - `document.createElement()`用于创建新的HTML元素节点，而`document.createTextNode()`用于创建文本节点。 - 示例代码： ```javascript var newDiv = document.createElement("div"); var newText = document.createTextNode("Hello World!"); ``` #### 29. 获取元素 - **知识点**：`document.getElementById()` - `getElementById()`方法根据ID选择器获取DOM元素。 - 示例代码： ```javascript var element = document.getElementById("myElement"); ``` #### 30. 清空表单值 - **知识点**：清空表单中的文本型成员 - 通过遍历表单中的元素并检查它们的类型，可以将文本型成员的值清空。 - 示例代码： ```javascript var form = window.document.forms[0]; for (var i = 0; i < form.elements.length; i++) { if (form.elements[i].type == "text") { form.elements[i].value = ""; } } ``` #### 31. 检查复选框状态 - **知识点**：`checked` 属性 - 使用`checked`属性可以检查复选框是否被选中。 - 示例代码： ```javascript var isChecked = document.forms[0].checkThis.checked; ``` #### 32. 获取单选按钮组长度 - **知识点**：`groupName.length` 属性 - 通过`groupName.length`可以获取具有相同名称的一组单选按钮的数量。 - 示例代码： ```javascript var radioLength = document.forms[0].groupName.length; ``` #### 33. 检查单选按钮状态 - **知识点**：`checked` 属性 - 同样使用`checked`属性来检查单选按钮是否被选中。 - 示例代码： ```javascript var isChecked = document.forms[0].groupName[0].checked; ``` #### 34. 获取下拉列表框的值 - **知识点**：`options[n].value` 属性 - 使用`options[n].value`可以获取下拉列表框中的选项值。 - 示例代码： ```javascript var selectedValue = document.forms[0].selectName.options[1].value; ``` #### 35. 字符串定义 - **知识点**：字符串字面量 - 字符串可以直接使用引号（单引号或双引号）定义。 - 示例代码： ```javascript var myString = "This is lightsword"; ``` #### 36. 字符串大小写转换 - **知识点**：`toUpperCase()` 和 `toLowerCase()` 方法 - 使用`toUpperCase()`方法将字符串转换为大写形式，`toLowerCase()`则将其转换为小写形式。 - 示例代码： ```javascript var str = "Hello World"; var upperCaseStr = str.toUpperCase(); // "HELLO WORLD" var lowerCaseStr = str.toLowerCase(); // "hello world" ``` #### 37. 字符串位置查找 - **知识点**：`indexOf()` 方法 - `indexOf()`方法用于查找一个字符串在另一个字符串中首次出现的位置。 - 示例代码： ```javascript var str = "Hello World"; var index = str.indexOf("World"); // 6 ``` #### 38. 获取字符串中的字符 - **知识点**：`charAt()` 方法 - 使用`charAt()`方法获取字符串中指定索引位置的字符。 - 示例代码： ```javascript var str = "Hello"; var char = str.charAt(1); // "e" ``` #### 39. 获取子字符串 - **知识点**：`substring()` 方法 - `substring()`方法用于获取字符串的一部分。 - 示例代码： ```javascript var str = "Hello World"; var subStr = str.substring(0, 5); // "Hello" ``` #### 40. 数学函数 - **知识点**：`Math` 对象 - `Math`对象提供了许多静态方法来执行数学运算，如： - `Math.PI`：返回π（圆周率）的值。 - `Math.SQRT2`：返回2的平方根。 - `Math.max(value1, value2)`：返回两个数中的最大值。 - `Math.pow(value1, 10)`：返回`value1`的10次方。 - `Math.round(value1)`：四舍五入函数。 - 示例代码： ```javascript var pi = Math.PI; var maxVal = Math.max(10, 20); var powVal = Math.pow(2, 10); var roundVal = Math.round(3.5); ``` 以上内容涵盖了给定文件中的前40个JavaScript技巧，这些技巧可以帮助开发者更好地理解和使用JavaScript语言。接下来的部分将继续解析剩余的技巧。

资源推荐

资源详情

资源评论