js注释
JavaScript注释与Java注释相同
// 单行注释
/*
多行注释
*/
js五大基本类型：
number（数值型）、string（字符串性）、boolean（布尔型）、undefined类型、null类型
number包括：数值类型、包含整型、浮点型、NaN和Infinity（无穷大）。
关于数组的空间长度问题：
如何获取数组的空间长度：
通过length属性获取数组的空间长度
数组的length详解：
java：只读属性
js：读写属性
数组元素的默认值：
java：
1、整数类型（byte、short、int、long）的基本类型变量的默认值为0。
2、浮点型（float、double）的基本类型变量的默认值为0.0。
3、字符型（char）的基本类型变量的默认为 “/u0000”。
4、布尔性的基本类型变量的默认值为 false。
5、引用类型的变量是默认值为 null(null就是空对象)。
js：undefined
JavaScript 输出
JavaScript 没有任何打印或者输出的函数。
JavaScript 可以通过不同的方式来输出数据：
使用 **window.alert() **弹出警告框。
使用 **document.write() **方法将内容写到 HTML 文档中。
使用 **innerHTML 写入到 HTML 元素。
使用console.log() **写入到浏览器的控制台。
js数组排序：
sort()： 函数按照字符串顺序对值进行升序排序。
数组.sort(function(a, b){return a - b});
//字符串数组（字母顺序对数组进行排序）
var arr_str = ["Banana", "Orange", "Apple", "Mango"];
var arr_str_sort = arr_str.sort();
document.write(arr_str_sort);
//整形数组
var arr = [9,5,1,2,7,6,4,3,0];
var arr_sort = arr.sort(function(a, b){return a - b});
console.log(arr_sort);
解决js代码放在标签前面或<head>内导致js代码无效的解决方案：
使用<script>无效的解决方案：
window.οnlοad = function() {
//js代码
}
使用jquery无效的解决方案：
$(document).ready(function() {
//js代码
})
假设法：
1、定义一个变量，标记该变量的值为true。
2、推翻假设，把标记的值修改为false，并且跳出循环。
3、如果标记的值依旧为true，则证明为真；
如果标记的值修改为false，则证明为假
// 1.通过询问框获得一个正整数
var num = prompt("请输入一个正整数");
// a)假设num就是一个质数
var flag = true; // 设置标记的值为true
// 2.通过循环获得[2, num)之间所有的整数
for(var i = 2; i < num; i++) {
// b)判断num是否能被i整除。
if(num % i === 0) {
// 此处已经证明num不是一个质数，那么推翻假设，修改标记的值
flag = false;
// 因为此处已经确定num不是一个质数，所以后续循环没必要进行，那么我们需要跳出循环
break;
}
}
// c)价差flag标记的值，从而确定num是否是一个质数
if(flag) { // flag == true
document.write(num + "是一个质数");
} else { // flag == false
document.write(num + "不是一个质数");
}
常见的HTML事件
下面是一些常见的HTML事件的列表:
| 事件 | 描述 |
|---|---|
| onload | 窗体加载事件 |
| onclick | 鼠标单击事件 |
| ondblclick | 鼠标双击事件 |
| onfocus | 获得焦点事件 |
| onblur | 失去焦点事件 |
| onchange | 选项改变事件（通常用在下拉列表框） |
| onmousemove | 当鼠标移动到某个事件源就会触发 |
| onmouseover | 当鼠标悬停到某个事件源就会触发 |
| onmouseout | 当鼠标离开某个事件源就会触发 |
| onmousedown | 当鼠标按下某个事件源就会触发 |
| onmouseup | 当鼠标释放某个事件源就会触发 |
| onkeyup | 键盘释放触发 |
| onkeydown | 键盘按下触发 |
| onkeypress | 键盘在按下和释放之间触发 |
条件语句
-
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
-
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
-
JavaScript三目运算 - 当条件为true 时执行代码，当条件为 false 时执行其他代码
-
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
-
switch 语句 - 使用该语句来选择多个代码块之一来执行
常用的正则表达式及使用方法：
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子字符串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子字符串。
（详情参照：https://www.runoob.com/js/js-regexp.html）
/*是否带有小数*/
function isDecimal(strValue ) {
var objRegExp= /^d+.d+$/;
return objRegExp.test(strValue);
}
/*校验是否中文名称组成 */
function ischina(str) {
var reg=/^[u4E00-u9FA5]{2,4}$/; /*定义验证表达式*/
return reg.test(str); /*进行验证*/
}
/*校验是否全由8位数字组成 */
function isStudentNo(str) {
var reg=/^[0-9]{8}$/; /*定义验证表达式*/
return reg.test(str); /*进行验证*/
}
/*校验电话码格式 */
function isTelCode(str) {
var reg= /^((0d{2,3}-d{7,8})|(1[3584]d{9}))$/;
return reg.test(str);
}
/*校验邮件地址是否合法 */
function IsEmail(str) {
var reg=/^w+@[a-zA-Z0-9]{2,10}(?:.[a-z]{2,4}){1,3}$/;
return reg.test(str);
}
操作DOM元素的属性
innerHTML：改变DOM树的结构
innerText：不会改变，只会在元素里面添加文本信息
$("div1").innerHTML="<a href='#'>点击我</a>";
$("div2").innerText="<a href='#'>点击我</a>";
setAttribute(属性名,属性值);
getAttrribute(属性名);
removeAttribute(属性名);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
200px;
height:200px;
border:1px solid red;
}
</style>
<script>
window.onload=function(){
function $(id){
return document.getElementById(id);
}
$("btn").onclick=function(){
// 设置操作：将字符串../img/photo.jpg，赋值给img元素的src属性
$("myImg").setAttribute("src","../img/photo.jpg");
}
$("btn2").onclick=function(){
var imgPath=$("myImg").getAttribute("src");
alert(imgPath);
}
$("btn3").onclick=function(){
$("myImg").removeAttribute("src");
}
}
</script>
</head>
<body>
<img src="" id="myImg"/><br />
<input type="button" id="btn" value="显示图像" />
<input type="button" id="btn2" value="获取图像路径" />
<input type="button" id="btn3" value="删除图像路径" />
</body>
</html>
节点操作
parentNode：访问子节点的父节点
children：访问父节点的子节点
创建和插入子节点
createElement： 建立子节点
insertBefore：插入子节点
removeChild：删除父节点的子节点
cloneNode：克隆子节点
全选、全否、反选案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选、全否、反选</title>
<script>
window.onload=function (){
function $(id){
return document.getElementById(id);
}
/**
* 1.定义变量hobbys：存储所有选择的爱好
* 2.遍历所有的复选框，取出复选框的值，追加到hobbys变量中
* 3.将hobbys变量的值，设置到文本框
* */
// 获取所有的爱好
var hobbyList =document.getElementsByName("hobby");
var hobbys="";
$("btn1").onclick=function(){
for(var i=0;i<hobbyList.length;i++){
hobbyList[i].checked=true;
hobbys+=hobbyList[i].value+"-";
}
$("txtResult").value=hobbys;
}
// 全否
$("btn2").onclick=function(){
for(var i=0;i<hobbyList.length;i++){
hobbyList[i].checked=false;
}
// 清空之前全选的数据
hobbys="";
$("txtResult").value="";
}
// 反选：获取所有的爱好集合，遍历每个元素，进行取反操作(true->false, false->true)
$("btn3").onclick=function(){
hobbys="";
for(var i=0;i<hobbyList.length;i++){
//条件成立表示之前已经选中了，true改为false
if(hobbyList[i].checked){
hobbyList[i].checked=false;
}else{
hobbyList[i].checked=true;
//一旦选中将复选框的值追加到hobbys变量
hobbys+=hobbyList[i].value+"-";
}
}
// 将复选框选中的值设置到文本框
$("txtResult").value=hobbys;
}
}
</script>
</head>
<body>
<input type="checkbox" name="hobby" value="football" />足球
<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="pingpong" />乒乓球
<input type="checkbox" name="hobby" value="tennis" />网球
<input type="checkbox" name="hobby" value="swimming" />游泳
<br />
<input type="button" id="btn1" value="全选" />
<input type="button" id="btn2" value="全否" />
<input type="button" id="btn3" value="反选" />
<br />
<input type="text" id="txtResult" size="50px" placeholder="展示所有爱好"/>
</body>
</html>
js中Window方法
一些其他方法：
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸