【免费】js常用函数属性事件集资源-CSDN文库

需积分: 0 113 浏览量更新于2012-08-06 收藏 41KB DOC 举报

### JavaScript 常用函数、属性与事件集详解 #### 一、JavaScript 概述 JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它通常被用作客户端脚本语言，嵌入到HTML页面中，在浏览器端执行，用来实现网页动态效果。 #### 二、基本语法与概念 **1. 输出语句** - `document.write("")`: 用于向文档中写入文本或HTML内容。 - **示例**： ```javascript document.write("Hello, World!"); ``` **2. 注释** - 单行注释：`//` - **示例**： ```javascript // 这是一条单行注释 ``` **3. HTML 文档结构** - 标准的HTML文档结构由`<html>`标签包裹，内部包含`<head>`和`<body>`两部分。 - **示例**： ```html <html> <head> <title>Page Title</title> </head> <body> <p>This is a paragraph.</p> </body> </html> ``` **4. 浏览器窗口中的DOM结构** - 浏览器窗口中的主要对象包括：`window`、`navigator`、`screen`、`history`、`location`和`document`。 - **示例**： ```javascript console.log(window.navigator.userAgent); // 获取用户代理 ``` **5. 获取表单元素的名称和值** - 使用`getElementById`方法获取表单元素，并通过`.name`或`.value`属性访问其名称或值。 - **示例**： ```javascript var element = document.getElementById("elementId"); console.log(element.name); // 输出元素的名称 console.log(element.value); // 输出元素的值 ``` **6. 字符串大小写转换** - 使用`.toUpperCase()`将字符串转换为大写；使用`.toLowerCase()`将字符串转换为小写。 - **示例**： ```javascript var input = "hello world"; var output = input.toUpperCase(); document.getElementById("output").value = output; ``` **7. 数据类型** - JavaScript 的基本数据类型包括：`String`、`Number`、`Boolean`、`Null`、`Object`和`Function`。 **8. 字符串与数字之间的转换** - 将字符串转换为整数或浮点数：`parseInt()`、`parseFloat()` - 将数字转换为字符串：`"" + 变量` - **示例**： ```javascript var num = 123; var strNum = "" + num; // 转换为字符串 ``` **9. 字符串长度** - 使用`.length`属性获取字符串长度。 - **示例**： ```javascript var str = "Hello, World!"; console.log(str.length); // 输出 13 ``` **10. 字符串连接** - 使用`+`操作符连接字符串。 - **示例**： ```javascript var str1 = "Hello"; var str2 = "World"; var result = str1 + " " + str2; // 结果为 "Hello World" ``` **11. 比较操作符** - JavaScript 支持多种比较操作符，如`==`（等于）、`!=`（不等于）、`>`（大于）、`>=`（大于等于）、`<`（小于）、`<=`（小于等于）。 **12. 变量声明** - 使用`var`关键字声明变量。 - **示例**： ```javascript var x = 10; ``` **13. 条件语句** - `if (条件) { ... } else { ... }`: 根据条件执行不同的代码块。 - **示例**： ```javascript var age = 18; if (age >= 18) { console.log("成年人"); } else { console.log("未成年人"); } ``` **14. 循环结构** - `for (初始化表达式; 条件; 更新表达式) { 循环体 }`: 用于重复执行一段代码。 - **示例**： ```javascript for (var i = 0; i < 5; i++) { console.log(i); } ``` **15. 循环中断** - 使用`break`关键字退出循环。 - **示例**： ```javascript for (var i = 0; i < 10; i++) { if (i === 5) { break; } console.log(i); } ``` **16. 函数定义** - 函数定义的基本格式为：`function functionName([参数列表]) { 函数体 }` - **示例**： ```javascript function greet(name) { console.log("Hello, " + name); } greet("John"); // 输出 "Hello, John" ``` **17. 表单处理** - 处理多个表单时，可以使用`document.forms[index]`来访问特定的表单。 - **示例**： ```javascript var form = document.forms[0]; console.log(form.name); // 输出第一个表单的名称 ``` **18. 窗口操作** - 打开新窗口：`window.open(url, target, features)` - 关闭当前窗口：`window.close()` - 访问当前窗口：`self` - **示例**： ```javascript window.open("http://example.com", "_blank", "width=500,height=500"); ``` **19. 设置状态栏** - 使用`window.status`属性设置浏览器状态栏中的文本。 - **示例**： ```javascript window.status = "加载完成"; ``` **20. 弹出对话框** - `alert()`：显示一个警告对话框。 - `confirm()`：显示一个确认对话框，返回一个布尔值。 - `prompt()`：显示一个输入对话框，返回用户的输入。 - **示例**： ```javascript var answer = confirm("Are you sure?"); if (answer) { console.log("Confirmed"); } ``` **21. 修改当前URL** - 使用`window.location.href`属性修改当前页面的URL。 - **示例**： ```javascript window.location.href = "http://example.com"; ``` **22. 获取表单数量** - 使用`document.forms.length`获取文档中的表单数量。 - **示例**： ```javascript console.log(document.forms.length); // 输出表单数量 ``` **23. 关闭文档输出流** - 使用`document.close()`关闭文档输出流。 - **示例**： ```javascript document.write("<h1>Hello, World!</h1>"); document.close(); ``` **24. 字符串连接** - 使用`+=`运算符进行字符串追加。 - **示例**： ```javascript var str = "Hello"; str += ", World!"; console.log(str); // 输出 "Hello, World!" ``` **25. 创建文档元素** - 使用`document.createElement()`和`document.createTextNode()`创建新的DOM元素。 - **示例**： ```javascript var div = document.createElement("div"); var text = document.createTextNode("New Div Content"); div.appendChild(text); document.body.appendChild(div); ``` **26. 设置表单文本为空** - 遍历表单中的所有元素，如果类型为"text"，则将其值设为空。 - **示例**： ```javascript var form = document.forms[0]; for (var i = 0; i < form.elements.length; i++) { if (form.elements[i].type === "text") { form.elements[i].value = ""; } } ``` **27. 检查复选框状态** - 使用`.checked`属性检查复选框的状态。 - **示例**： ```javascript var isChecked = document.forms[0].checkThis.checked; console.log(isChecked); // 输出 true 或 false ``` **28. 处理单选按钮组** - 获取单选按钮组的长度：`document.forms[0].groupName.length` - 检查单选按钮是否被选中：`document.forms[0].groupName[i].checked` - **示例**： ```javascript var group = document.forms[0].radioGroup; for (var i = 0; i < group.length; i++) { if (group[i].checked) { console.log(group[i].value); } } ``` **29. 获取下拉列表框值** - 使用`.options[n].value`获取下拉列表框的值，其中`n`是选项的索引。 - **示例**： ```javascript var select = document.forms[0].selectName; var selectedValue = select.options[select.selectedIndex].value; console.log(selectedValue); ``` **30. 字符串操作** - 定义字符串：`var myString = new String("This is lightsword");` - 转换大小写：`.toUpperCase()`、`.toLowerCase()` - 查找字符串位置：`String1.indexOf("String2")` - 获取指定位置的字符：`.charAt(index)` - 获取子字符串：`.substring(startIndex, endIndex)` - **示例**： ```javascript var str = "Hello, World!"; console.log(str.substring(7, 12)); // 输出 "World" ``` **31. 数学函数** - `Math.PI`：返回π的值 - `Math.SQRT2`：返回√2的值 - `Math.max(value1, value2)`：返回两个数中的最大值 - `Math.pow(base, exponent)`：计算幂次方 - **示例**： ```javascript console.log(Math.max(10, 20)); // 输出 20 console.log(Math.pow(2, 3)); // 输出 8 ``` 以上是对标题和描述中的知识点进行了详细展开说明。这些基础知识对于任何JavaScript开发者来说都是必不可少的。掌握这些知识点能够帮助开发者更好地理解和应用JavaScript，从而实现更加复杂的功能。

资源推荐

资源评论