华清远见-重庆中心-JavaScript知识点梳理
2024-05-05 00:47:08
JavaScript简介
由网景（Netscape）公司推出
是一门面向对象的，清亮的，弱类型解释型脚本语言。
弱类型：没有数据的限制。
解释型：无需编译，只要是特定的单词，浏览器就可以翻译。
JavaScript写在哪里
1. 写在某个标签当中
例如：
<button onclick="document.write('hello JS')">点击一下 </button>
2.写在Script标签当中
script 标签可以放在内容当中，标签通常写在<head></head>中或者body结束之前
自己写的话最好写在页面中
<script></script>
3.写在单独的文件当中，在通过script标签导入
JS中的输出语句
<!-- 通过浏览器自带的消息提示框输出 --><button onclick="alert('hello javaScript')">点击一下</button>
<!-- 通过控制台输出日志信息 --><button onclick="console.log('hello JavaScript')">再点击一下</button>
<!-- 将输出类容放到页面上 --><button onclick="document.write('hello JS')">点击一下 </button>
JS中的注释
1.单行注释
//单行注释
<!--多行注释-->/**/
JS的组成
ECMAScript 是一种标准
ECMAScript定义了JavaScript的基本语法。
ECMAScript核心语法
** 数据类型 **
原始类型
| JS中的原始类型 | 说明 |
|---|---|
| 数值型number | 整数，小数为数值型 |
| 字符串型string | 单双引号的都是字符串类型 |
| 布尔型boolean | true/false |
| 空类型null | 通过null赋值 |
| 未定义类型undefined | 未声明或没有值 |
引用类型
对象，数组，函数等
定义类型
var name = "张三";var age;age=18;console.log("name:"+name+"age:"+age);
运算符
JS中的boolean可以用true/1，false/0来表示；
所以可以将true和false当作数来运算
- 算术
+ - * / %
除了+号外 ，其余都可以做字符运算
- 关系
> < >= <= == !=关系符号得到的结果是 true 或者 false
'==='比较的是两边的类型和内容是否相同，同为true才是true
'!=='比较值和数据类型
逻辑
&& || |赋值和符合数值
= += -= *= /= %= 如a*=b+c相当于a=a(b+c)自增自减
++ --
符号在前，先+1或-1后使用 反之；
条件
表达式1？表达式2：表达式3
//java中的while(true)在这里可以写作
while(1){//表达式
}
条件语句
if语句
- 单分支语句
if(判断条件){...
}
- 双分支语句
if(条件语句){...
}else{...
}
- 多分支语句
if(条件语句）{...
}else if(条件语句){...
}...
else{...
}
- 嵌套语句
if(条件){if(条件语句）{...
}
}
switch语句
switch(n)
{case 1:执行代码块 1break;case 2:执行代码块 2break;default:与 case 1 和 case 2 不同时执行的代码
}
注意：JS里的switch里的case后的数据类型可以是不同的，java中的必须是相同类型的case语句；
循环语句
for循环
循环代码块一定的次数
for (var i=0;i<cars.length;i++) { document.write(cars[i] + "<br>"); }
for/in循环
循环遍历对象的属性
while (条件) {需要执行的代码 }
while循环
当指定的条件为true时循环指定的代码块
do {需要执行的代码 } while (条件);
do/wihle循环
- 同while,指定true时执行指定代码块类容；
javaScript break和continue语句
break
跳出当前循环体，会执行接下来的代码
for (i=0;i<10;i++)
{if (i==3){break;}x=x + "The number is " + i + "<br>";
}
continue
它会中断当前循环体，直接结束本次循环，继续下一次迭代循环
while (i < 10){if (i == 3){i++; //加入i++不会进入死循环continue;}x= x + "该数字为 " + i + "<br>";i++;
}
JS中的数组
js中的数组类似于java中的集合数组
他是一个可变的数组且可以存放不同类型
定义数组的方式
var 数组名 = new Array(); var 数组名 = [];默认没有初始化的位置，用undefined填充
最大下标决定了数组长度
可以保存不同类型的数据
遍历数组的两种方式
- for循环遍历
for(var i=0;i<arr.length;i++){console.log(arr[i]); }- 增强for循环
for(var index in list){console.log(list[index]) }初始化数组
var list =[123,"asd",true,"qwe"]; var list = new Array(123,"asd",true,"qwe");
数组常用方法
以下方法在调用时都会影响数组本身
| 方法名 | 作用 | 返回值 |
|---|---|---|
| sort() | 将数组升序排序 | 排序后的数组 |
| reverse() | 将数组的元素倒序保存 | 倒叙后的数组 |
| pop() | 移除最后一个元素 | 被去除的元素 |
| push(参数) | 添加一个元素到数组的末尾 | 更新后的数组的长度 |
| unshift() | 添加元素到数组头 | 更新后的数组的长度 |
| shift(参数) | 移除数组头的元素 | 被移除的元素 |
| fill(参数) | 使用指定参数填充数组 | 填充后的数组 |
| splice(index) | 从指定位置分割元素 | 截取后的新元素 |
| splice(index , length) | 指定位置长度的截取数组 | 截取到的数组 |
| trim() [trimLeft() , trimRight()] | 去除字符串前后的空格 | 去除空格后的字符串 |
以下方法不会影响原数组
| 方法名 | 作用 | 返回值 |
|---|---|---|
| indexOf(元素) | 得到某个元素第一次出现的索引 | 索引 |
| lastindexOf(元素) | 得到元素最后一次出现的索引 | 索引 |
| concat(元素) | 将指定元素添加到数组末尾 | 添加后的数组 |
| join(字符) | 拼接字符到数组中 | 拼接后的数组 |
| slice(start,end) | 截取start到end之间的数组 | 截取后的数组 |
| map(方法名) | 让数组执行指定方法 | 执行方法后的新数组 |
JavaScript练习
1.分解质因子
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><p id="id"></p><script>let n = Number(prompt('输入一个正整数'));var m = n;var arr = [];var flag = 0;for (var i = 2; i <= n; i++) {if (n % i == 0) {arr.push(i)n /= i;i--;flag++;}}let arrNum = arr.join('*');if (flag < 2) {console.log(m + "就是一个质数");} else {document.getElementById('id').innerHTML = m + "=" + arrNum;}</script></body></html>
2.java版分解质因子
import java.util.Scanner;public class Main {public static void main(String[] args) {System.out.println("输入所求正整数:");Scanner sc = new Scanner(System.in);Long n = sc.nextLong();long m=n;int flag = 0;String[] str = new String[50];for (long i = 2; i <= n; i++) {if (n % i == 0) {str[flag] = Long.toString(i);flag++;n = n / i;i--;}}if (flag < 2)System.out.println(m + "为质数");else {System.out.print(m + "=" + str[0]);for (int k = 1; k < flag; k++) {System.out.print("*" + str[k]);}System.out.println("\n"+m+"共有"+flag+"个质因数.");}sc.close();}
}
3.输入某一年的某一月，计算这个月有多少天
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><p id="id"></p><script>var y = Number(prompt("请输入年份："));var m = Number(prompt("请输入月份："));var d;if (y % 4 == 0 || y % 100 == 0);switch (m) {case 1:d = 31;break;case 2:if (y % 4 == 0 && y % 100 != 0 || y % 400 == 0) {d = 28;} else {d = 29;}breakcase 3:d = 31;break;case 4:d = 30;break;case 5:d = 31;break;case 6:d = 30;break;case 7:d = 31;break;case 8:d = 31;break;case 9:d = 30;break;case 10:d = 31;break;case 11:d = 30;break;case 12:d = 31;break;default:console.log("没有这一天")}document.getElementById("id").innerHTML = y + "年的" + m + "月有" + d + "天";</script></body>
</html>
4.冒泡排序
<script>var flag = 0;var arr = new Array(12, 15, 65, 54, 33);for (var i = 0; i < arr.length; i++) {for (var j = 0; j < arr.length; j++) {if (arr[j - 1] > arr[j]) {flag = arr[j - 1];arr[j - 1] = arr[j];arr[j] = flag;}}}for (var i = 0; i < arr.length; i++) {console.log(arr[i]);}</script>
JavaScript正则表达式
Regular Expression
什么是正则表达式？
正则表达式是由字符序列形成的一类搜索模式，它可以通过自定义的一些列符号来搜索你要查询的内容，它可以是一个简单的符号，也可以是一连串的复杂的模式，他常常用来搜索或者替代文本的操作。
语法
定义一个正则表达式
- 直接量语
/正则表达式主体/修饰符（可有可无）
var patt = /runoob/i
创建对象
var reg = new RegExp("ceshi");
注：如果表达式返回的结果为true则说明表达式的格式正确，反之则不正确！
//字符串校验<script>var reg = new RegExp("cheshi");var result = reg.test('ceshi');//返回的结果为falseconsole.log(result);</script>//数字校验<script>var reg = /[0-9]/;var result = reg.test('1');//返回的结果为trueconsole.log(result)</script>
正则表达式修饰符
修饰符在全局搜索中不分大小
| 表达式 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配 |
正则表达式模式
方括号用于查找某个范围的字符：
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符 |
| [0-9] | 查找0-9之间的所有数字 |
| (x|y) | 查找任何以|分割的选项(两者其一) |
元字符是拥有特殊含义的字符：
| 元符号 | 描述 |
|---|---|
| \d | 查找数字 |
| \s | 查找空白字符 |
| \b | 匹配单词边界 |
| \uxxxx | 查找以i6进制xxxx规定的Unicode字符 |
量词：
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个n的字符串 |
| n* | 匹配任何包含零个或多个n的字符串 |
| n? | 匹配任何包含零个或一个n的字符串 |
| n{X} | 匹配含X个n的序列字符串 |
| n$ | 匹配任何结尾为n的字符串 |
| ^n | 匹配任何开头为 n的字符串 |
| ?=n | 匹配任何其后紧接指定字符串n的字符串 |
| ?!n | 匹配任何其后没有紧接指定字符串n的字符串 |
注：当^置于[ ]当中时意味着取反，如[^abc]为除了abc之外的其他字符 。
正则表达式常用方法
RegExp对象方法
| 方法名 | 作用 | 返回值 |
|---|---|---|
| test() | 检索表达式是否匹配某个模式 | true/fase |
| esec() | 检索字符串中的 正则表达式的匹配 | 返回匹配结果的数组 |
| toString() | 转换表达式为字符串 | 转换后的字符串 |
“其他详情可以查阅jsRegExp手册”
支持正则表达式的 String 对象的方法
| 方法 | 描述 |
|---|---|
| search | 检索与正则表达式相匹配的值 |
| match | 找到一个或多个正则表达式的匹配 |
| replace | 替换与正则表达式匹配的子串 |
| split | 把字符串分割为字符串数组 |
RegExp对象属性
| 属性 | 描述 |
|---|---|
| constructor | 返回一个函数，该函数是一个创建RegExp对象的原型 |
| global | 判断是否设置了”g"修饰符 |
| ignoreCase | 判断是否设置了’‘i’修饰符 |
| lastIndex | 用于判断规定下次的起始位置 |
| multiline | 判断是否设置了"m"修饰符 |
| source | 返回正则表达式的 匹配模式 |
例子1：QQ号的正则表达式
/* qq号大于5小于10位
第一位不能为零且每一位都为数字 */
var regqq=/^[1-9]{1}\d{4,9}$/;
例子2：手机号正则表达式
//简易版本var phoneReg = /^[1]([3-9])[0-9]{9}$/;//严谨版本var phoneReg = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
测试：
var telStr = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;var inputStr = "18810998988";if (!(telStr.test(inputStr))) {flag = '手机号码输入不规范';}else{msg = "手机号码规范";}
JavaScript对象
数学运算
常数学函数（方法）：
| 函数名 | 作用 | 返回值 |
|---|---|---|
| floor | 向下取整 | 返回整数部分的值 |
| ceil | 向上取整 | 小数部分大于零向上取整，为零则为整数部分 |
| round | 四舍五入 | 返回四舍五入后的值 |
| abs | 取绝对值 | 返回元素的绝对值 |
| sqrt | 开平方 | 返回开平方后的值 |
| cbrt | 开立方 | 返回开立方后的值 |
| pow | 幂运算 | 返回运算结果 |
| random | 产生[0,1)的随机数 | 产生的随机数 |
//计算m到n的随机数,包含[m,n];
Math.floor(Math.random()*（n-m+1）+m);
函数function
一段能够实现某一特定功能的代码，可以被重复的被调用
函数的定义
//函数的参数有就写，没有 就不用写
function 函数名(参数1 ，参数2 ，，，){//当有返回值的时候可以使用return，没有的时候可以不写return 返回值;
}
函数调用
1、作为函数被调用function 函数名(参数1 ，参数2 ，，，){return 返回值;
}//但函数被定义后，就可以使用函数名调用函数
var value = 函数名(参数1，参数2，，，);
//利用value来接收函数返回的参数，没有返回值就可以不用接收2、作为方法被调用var obj ={name:"bob";age:15;last:function(){return this.name + " " + this.age;},
};
//通过对象obj调用，函数作为方法被调用
obj.last();3、使用构造函数调用函数function f(a,b){this.a=a;this.b=b;
}
var T = new f("a","b"){console.log(T.b,T.a);
}
注：函数的调用一定是在函数被定义之后才可以被调用，没有定义的函数被调用会报错
全局函数
parseInt()
将传入的参数转换成一个整数
字符或字符串无法转为整数，但不会报错，得到的结果是（NaN)
能够识别数字开头的字符串，取数字部分，后面的丢弃。
parseFloat()
无法识别字符，同样可以截取数字开头部分
将一个字符串转换成一个浮点数
isNaN()
判断是不是一个数
返回一个boolean值
Number()
- 对象转数字 new Number(“123”)得到一个对象
eval()
可执行字符中可执行的内容当作命令执行
如：eval(“3+2”)得到的值是5；
匿名函数
function(){函数体;
}
JavaScriptBOM
Browser Object Model
浏览器对象模型
可以通过js获取浏览器信息的控制浏览器行为
弹框
警告框
//带有提示文字和确认按钮，没有返回值 alert("提示文字")输入框
//带有提示文字，输入框和确认按钮，有返回值 prompt("提示文字")确认框
//有返回值，提示文字
confirm("提示文字")
例子：猜数字游戏
<script>alert("欢迎来到猜数字游戏");var r = Math.floor( Math.random()*100+1)while(true){var num = prompt("请输入数字");if(num>r){alert("太大了!");}else if(num<r){alert("太小了!");}else{alert("恭喜你答对了!");}}</script>
window对象
表示浏览器窗口对象，可以获取浏览器的相关信息，调用其行为
| 常用属性和行为 | 作用 |
|---|---|
| window.innerWidth | 获取当前浏览器窗口可视区域的宽度 |
| window.innerHeight | 获取当前浏览器窗口可视区域的高度 |
| window.screen | 获取屏幕对象 |
| window.localtion | 获取本地对象 |
| window.history | 获取历史对象 |
| window.open | 打开一个页面 |
| window.close | 关闭一个页面（默认关闭自身）谁调用关闭谁 |
| window.setTimeout | 设置延时操作（执行一次结束） |
| window.clearTimeout | 清除倒计时 |
| window.setInterval | 设置时间间隔（执行无限次） |
| window.clearInterval | 清除时间间隔 |
//通过window.open()来打开一个窗口展示百度页面
<body><button id="btn">点击一下</button><script>var opens = document.getElementById("btn");opens.onclick = function() {window.open("http://www.baidu.com");}</script></body>
//添加一个按钮，在点击时弹出输入密码框，如果密码正确，3秒后关闭页面，如果错误
//不做任何操作
<body><button id="btn">点击一下</button><button id="clear">取消</button><script>var opens = document.getElementById("btn");var pwd;var time;opens.onclick = function() {pwd = prompt("请输入密码");if (pwd === "123456") {time = window.setTimeout(function() {alert("3秒后关闭当前页面");window.close();}, 3000);}}document.getElementById("clear").onclick = function(){window.clearTimeout(time);}</script>
</body>
//随机点名练习
<script>var h1 = document.getElementById("h1");var s;var nameList = ['刘希莲', '陈宜源', '吴泰恭', '张孝南', '陈嘉华', '陈志桦', '王佩桦', '强兰义', '李志伯'];document.getElementById("start").onclick = function() {s = window.setInterval(function() {var r = Math.floor(Math.random() * nameList.length);h1.innerText = nameList[r];}, 80)}document.getElementById("end").onclick = function() {window.clearInterval(s);}</script>
screen对象
用于获取屏幕相关信息
| 属性 | 作用 |
|---|---|
| [window]screen.width | 获取当前屏幕设置的宽度 |
| [window]screen.height | 获取当前屏幕设置的高度 |
| [window]screen.availWidth | 获取当前屏幕除导航栏外设置的宽度 |
| [window]screen.availHeight | 获取当前屏幕除导航栏外设置的高度 |
location对象
用于设置或获取地址栏相关信息
| 常用方法和属性 | 作用 |
|---|---|
| [window]location.href | 获取或设置当前页面地址(可后退) |
| [window]location.assign（“url”） | 改变当前地址（可后退） |
| [window]location.replace(“url”) | 替换当前页面地址（不可后退） |
| [window]location.reload() | 刷新当前页面 |
histroy对象
| 方法 | 作用 |
|---|---|
| [window]history.back() | 回退 |
| [window]history,forward()/go() | 前进 |
JavaScriptDOM
Document Object Model
文档模型
每个页面都是一个文档树（document tree）
每一个标签都是一个节点node
根节点就是html
document对象表示当前页面对象，表示当前页面对象
DOM用于操作（获取设置内容，样式等）
获取节点（获取HTML元素）
| 获取节点的方式 | 作用 |
|---|---|
| document.getElementById(“标签的id”) | 根据id获取页面中的节点 |
| document.getElementByClassName("标签的class名“) | 根据标签的class名获取页面中的所有对应的节点，返回一个节点数组 |
| document.getElementByTagName(“标签名”) | 通过标签名获取节点，得到的还是一个数组，不管有几个。 |
| document.getElementByName(“属性name”) | 通过属性name获取节点 |
获取节点文本
innerText:不能识别标签
innerHtml:可以识别到标签
练习
//判断输入内容是否是小于6位，并且显示不同的提示效果
<body><input type="text" placeholder="账号" name="name" /><span id="warning"></span><br /><input type="password" placeholder="密码" name="pwd" /><script>var names = document.getElementsByName("name")[0];names.onblur = function() {if (names.value.length < 6) {document.getElementById("warning").innerHTML = "<span style='color:red;'>密码不能小于6位</span>";} else {document.getElementById("warning").innerHTML = "<span style='color:green;'>√</span>";}}</script></body>
获取节点属性
| 常用属性 | 作用 |
|---|---|
| 节点src | 获取或设置资源路径，如img的src |
| 节点value | 获取或设置节点的value属性，如表单的value |
| 节点checked | 获取或设置单选按钮和复选按钮的选中状态 |
| 节点className | 获取或设置标签的class属性值 |
| 节点href | 获取或设置标签的跳转路径值如a标签 |
修改节点样式
单个节点样式
节点style.样式名=“值”；
样式名需要使用驼峰命名法比如background-color=>backgroundColor
多个节点样式
节点style,cssText=“正常的css写法”
值里面的 内容不可以换行
只能获取到通过该方式设置过的css样式
练习(随机点名)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>table {width: 500px;box-sizing: border-box;border: 1px solid #000000;text-align: center;border-collapse: collapse;}td {width: 100px;box-sizing: border-box;border: 1px solid #000000;}.hover {background-color: rgba(0, 255, 255, 0.5);}div {width: 500px;text-align: center;}.start,.end {background-color: aqua;margin-left: 15px;margin-right: 15px;border: none;margin-bottom: 5px;}</style></head><body><div><table cellpadding="10px"><tr><td>张纬祯</td><td>罗南扬</td><td>陈建玟</td><td>侯胜学</td><td>李妙峰</td></tr><tr><td>穆彦君</td><td>杜威柔</td><td>林家皓</td><td>李佩康</td><td>刘怡雨</td></tr><tr><td>潘坚昀</td><td>沈嘉玲</td><td>杨恭乔</td><td>王茹蓁</td><td>许婉婷</td></tr><tr><td>张惠忠</td><td>杨冠廷</td><td>叶彦博</td><td>郑紫智</td><td>刘丽雯</td></tr><button class="start">开始</button><button class="end">结束</button></table></div><script>var tdlist = document.querySelectorAll("td");var btns = document.querySelector(".start");var btne = document.querySelector(".end");var table = document.querySelector("table");var setTime;btns.addEventListener('click', function() {clearInterval(setTime);setTime = setInterval(change, 200);});btne.addEventListener('click', function() {clearInterval(setTime);});function change() {var num = Math.floor(Math.random() * 20);// 将所有td背景颜色初始化for (var i = 0; i < tdlist.length; i++) {tdlist[i].className = "";}tdlist[num].className = "hover";}</script></body>
</html>
[i].className = "";}tdlist[num].className = "hover";}</script></body>
</html>
练习(动态添加表格)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>table {width: 500px;box-sizing: border-box;border: 1px solid #000000;text-align: center;border-collapse: collapse;}tr,th,td {width: 100px;box-sizing: border-box;border: 1px solid #000000;}</style></head><body><input type="text" name="singer" placeholder="输入歌手名" /><input type="text" name="song" placeholder="输入歌曲" /><button id="btn">添加</button><table id="mtable"><tr><th>歌手</th><th>作品</th><th>操作</th></tr></table><script>document.getElementById("btn").onclick = function() {var table = document.getElementById("mtable");var singer = document.getElementsByName("singer")[0].value;var song = document.getElementsByName("song")[0].value;if (singer.length == 0 || song.length == 0) {alert("输入不能为空");return;}var tr = document.createElement("tr");var td1 = document.createElement("td");td1.innerText = singer;var td2 = document.createElement("td");td2.innerText = song;var td3 = document.createElement("td");td3.innerHTML = "<a>删除</a>";td3.children[0].onclick = function() {table.removeChild(tr);}tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);table.appendChild(tr);}</script></body>
</html>
事件
某个节点的行为
给节点添加事件
<button onclick="事件"></button>
<script>
节点.事件=function(){事件内容;
}
</script>
常用事件
| 事件 | 作用 |
|---|---|
| onclick | 鼠标点击事件 |
| ondblclick | 鼠标双击事件 |
| onblur | 文本框失去焦点 |
| onfocus | 文本聚焦事件 |
| onmouseenter/onmouseover | 鼠标移入 |
| onmouseout/onmouseleave | 鼠标移出 |
| onmousemove | 鼠标移动 |
| onmousewheel | 鼠标滚轮滚动 |
| onmousedown/onmouseup | 鼠标按下松开 |
| onsubmit | 表单提交 |
| onchange | HTML改变 |
event对象
在莫个函数中传一个参数，通常为e或event,就可以监听对应的事件，
如在onmouse相关事件中，加入event，就能监听鼠标状态
节点.事件=function（e）{}
| event对象常用属性和方法 | 作用 |
|---|---|
| event.clientX | 获取当前鼠标水平位置 |
| event.clientX | 获取当前鼠标垂直位置 |
| event.preventDefault | 阻止默认事件 |
| event.stopPropagation | 阻止事件冒泡 |
事件冒泡
文档中有重叠现象 ，并且有相同事件，在触发事件时就会有多个相同的事件被触发
JavaScript表单
表单
输入框
文本框 type=“text”
密码框 type=“password”
文本域 textarea
获取输入框中的值
//使用普通的后去id,class,name,标签名的方式
var v = document.getElementByName("name").value;
//获取表单的forms数组
document.forms[0].onsubmit=function(){//这样可以阻止表单的提交事件，只需要return false;即可
}
表单提交
一定要使用表单的提交事件（onsubmit()），不能用普通的单击事件
表单元素
select 下拉列表元素
<label for="os">OS</label><select name="os"><option>os</option><optgroup label="windows"><option value="home">home</option><option value="pre">pre</option><option value="pro">pro</option><option value="ult">ult</option></select>可以通过value属性获取选择的值
var data = document.getElementById('元素id').value;//select也可以设置多选，多选的时候就需要将选择遍历才能得到相应的值
var selected = [];
for (var i = 0, count = elem.options.length; i < count; i++) {if (elem.options[i].selected) {selected.push(elem.options[i].value);}
}
- checkbox 多选框控件
//多选框只有两种状态，一种是选中状态，另外一种时未选中状态
<input type="checkbox" name="toggle" id="toggle" value="toggle">
checked属性得到的只是一个boolean类型的值，表示是否被选中。
- radio 单选框控件
<input type="radio" name="gender" value="Female"> Female </input>
<script>
var radios = document.getElementsByName('gender');
var selected;
for (var i = 0; i < radios.length; i++) {if (radios[i].checked) {selected = radios[i].value;break;}
}
if (selected) {// 用户选中了某个选项
}
</script>
同复选框，单选框也是只有选中或者未选中状态
JavaScript轮播图
华清远见-重庆中心-JavaScript知识点梳理相关推荐
- 华清远见-重庆中心-框架阶段技术总结/知识点梳理
文章目录 华清远见-重庆中心-框架阶段技术总结/知识点梳理/个人总结 框架 Java主流框架 Spring 概念 组成 名词解释 IOC DI Spring控制台应用 1.创建一个普通的Maven项目 ...
- 华清远见—重庆中心——JAVA高级阶段知识点梳理
华清远见-重庆中心--JAVA高级阶段知识点梳理 String字符串 String是一个类,属于数据类型中的引用类型.Java中所有使用""引起来的内容都是属于这个类的实例,称为字 ...
- 华清远见-重庆中心-JavaWeb后端阶段技术总结
华清远见-重庆中心-JavaWeb后端阶段技术总结 JavaWeb 使用Java开发Web服务的技术,统称为JavaWeb. B/S与C/S模式 B/S:Browser/Server 浏览器/服务器模 ...
- 华清远见-重庆中心-前端阶段技术总结
华清远见-重庆中心-前端阶段技术总结 HTML Hyper Text Markup Language 超文本标记语言 超文本:超级文本/超链接文本,超越了文本的限制,如多媒体文件.超链接等. 标记:也 ...
- 华清远见-重庆中心-JAVA基础阶段技术总结
系列文章目录 第一章 华清远见--重庆中心-JAVA基础阶段技术总结 第二章 文章目录 系列文章目录 文章目录 前言 一.关于java 1.发展历程 2.编程开发 3.java架构 4.java的特点 ...
- 华清远见-重庆中心-JAVA面向对象阶段技术总结
华清远见-重庆中心-JAVA面向对象阶段技术总结 面向对象和面向过程的编程思想 面向对象(OOP) 通过创建(new)对象,赋予对象对应的行为和特征,让这些对象相互配合来解决问题 面向过程(POP) ...
- 华清远见-重庆中心-前端技术总结/知识点梳理/个人总结/面试题解析
HTML 1.1什么是HTML 超文本:有视频,音频,图片等,超越文本 超文本标记语言(Hyper Text Markup Language) 标记语言:有一套标签 1.2标签 是由<>包 ...
- 华清远见-重庆中心-JAVA基础阶段技术总结/知识点梳理/个人总结/关于JAVA技术的解析（看法）/面试题解析
Java基础知识 概述 什么是java:1.是边编译边解释的面向对象的编程语言. 2.java语言是1995年发布的,发布语言公司是:Sun 3.下载安装Java时从Oracle官网下载,最好下载LT ...
- 华清远见-重庆中心-JavaWeb阶段技术总结/知识点梳理/个人总结
文章目录 JavaWeb B/S与C/S模式 网站 网页 网络服务器 Tomcat 下载 目录结构 Maven 使用IDEA创建基于Maven的Web项目 1.新建webapp模板 2.设置项目名称和 ...
最新文章
- vuejs滚动条_Vue.js 桌面端虚拟滚动条|vue美化滚动条VScroll
- 小米android10怎么样,感觉小米10太贵不完美？这些Android旗舰也许就有你的菜！
- LeetCode - 15. 3Sum
- 点到直线的投影公式_12分高考答题必刷题型，“空间向量分析点到线的距离问题”...
- gojs 部分功能实现
- 备份恢复:如何让xtrabackup恢复速度提升20倍？
- linux下 卸载qt_Windows 下 Qt creator安装和使用
- 由一本书看一个行业 -- 网上购书之比较
- 携号转网实时手机号归属地查询接口API
- EXCEL快捷键大全（三）（九耶-钛伦特）
- 想成为一名黑客怎么办？
- R中两种常用并行方法——2. snowfall
- [喵咪软件推荐(1)]全球国家信息库
- Baumer工业相机堡盟相机如何使用自动曝光功能（自动曝光优点和行业应用）（C++）
- 装完黑苹果怎么装windows_黑苹果安装教程,小编教你黑苹果怎么安装
- mysql5.7应该导什么包_微信表情包制作amp;上线全过程（详细血泪史）
- c语言循环中按键跳出,C语言跳出循环
- hive安装 ———附下载链接、安装过程中所遇问题及解决办法（linux）
- 51单片机实现类似于Arduino中micros()、millis()函数功能并用于接收ppm信号
- 面试官：CPU 是如何工作的？我一脸懵逼。。