目录
1.函数
- 返回值，就是函数执行的结果。
- 使用return 来设置函数的返回值。
- 语法：return 值;
- 该值就会成为函数的返回值，可以通过一个变量来接收返回值
- return后边的代码都不会执行，一旦执行到return语句时，函数将会立刻退出。
- return后可以跟任意类型的值，可以是基本数据类型，也可以是一个对象。
- 如果return后不跟值，或者是不写return则函数默认返回undefined。
- break、continue和return
- break
- 退出循环
- continue
- 跳过当次循环
- return
- 退出函数
- 参数，函数的实参也可以是任意的数据类型
有时，我们常常会通过return false来阻止页面跳转或者防止表单提交
比如阻止<a>标签的自动跳转，或者不需要form表单提交后跳转
2.作用域
- 作用域简单来说就是一个变量的作用范围。
- 在JS中作用域分成两种：
1.全局作用域
- 直接在script标签中编写的代码都运行在全局作用域中
- 全局作用域在打开页面时创建，在页面关闭时销毁。
- 全局作用域中有一个全局对象window，window对象由浏览器提供，
可以在页面中直接使用，它代表的是整个的浏览器的窗口。
- 在全局作用域中创建的变量都会作为window对象的属性保存
在全局作用域中创建的函数都会作为window对象的方法保存
- 在全局作用域中创建的变量和函数可以在页面的任意位置访问。
在函数作用域中也可以访问到全局作用域的变量。
- 尽量不要在全局中创建变量
2.函数作用域
- 函数作用域是函数执行时创建的作用域，每次调用函数都会创建一个新的函数作用域。
- 函数作用域在函数执行时创建，在函数执行结束时销毁。
- 在函数作用域中创建的变量，不能在全局中访问。
- 当在函数作用域中使用一个变量时，它会先在自身作用域中寻找，
如果找到了则直接使用，如果没有找到则到上一级作用域中寻找，
如果找到了则使用，找不到则继续向上找，一直会
3.this指针
- 我们每次调用函数时，解析器都会将一个上下文对象作为隐含的参数传递进函数。
使用this来引用上下文对象，根据函数的调用形式不同，this的值也不同。
- this的不同的情况：
1.以函数的形式调用时，this是window
2.以方法的形式调用时，this就是调用方法的对象
3.以构造函数的形式调用时，this就是新创建的对象
我们常常需要通过this指针的灵活使用，来达到调用方法的目的，尤其在for循环时，例如下面代码中的this与a【i】对象，虽然两者是同一个事物，但在js代码中，for循环会在页面加载时执行完毕，而单击事件需要在单击时才会触发，此时，i已经执行到4，因此会报undifine错误，因此要用this灵活代替。
<script type="text/javascript">
window.onload = function() {
var a = document.getElementsByTagName("a")
for (var i = 0; i < a.length; i++) {
a[i].onclick = function() {
var tr = this.parentNode.parentNode
var tr = a[i].parentNode.parentNode
var name=tr.getElementsByTagName("td")[0].innerText
var flag = confirm("您确定要删除"+name+"员工吗")
if (flag) {
tr.parentNode.removeChild(tr)
}
return false
}
}
}
</script>4.数组
- 数组的方法
- push()
- 用来向数组的末尾添加一个或多个元素，并返回数组新的长度
- 语法：数组.push(元素1,元素2,元素N)
- pop()
- 用来删除数组的最后一个元素，并返回被删除的元素
- unshift()
- 向数组的前边添加一个或多个元素，并返回数组的新的长度
- shift()
- 删除数组的前边的一个元素，并返回被删除的元素
- slice()
- 可以从一个数组中截取指定的元素
- 该方法不会影响原数组，而是将截取到的内容封装为一个新的数组并返回
- 参数：
1.截取开始位置的索引（包括开始位置）
2.截取结束位置的索引（不包括结束位置）
- 第二个参数可以省略不写，如果不写则一直截取到最后
- 参数可以传递一个负值，如果是负值，则从后往前数
- splice()
- 可以用来删除数组中指定元素，并使用新的元素替换
该方法会将删除的元素封装到新数组中返回
- 参数：
1.删除开始位置的索引
2.删除的个数
3.三个以后，都是替换的元素，这些元素将会插入到开始位置索引的前边
- 遍历数组
- 遍历数组就是将数组中元素都获取到
- 一般情况我们都是使用for循环来遍历数组：
for(var i=0 ; i<数组.length ; i++){
//数组[i]
}
- 使用forEach()方法来遍历数组（不兼容IE8）
数组.forEach(function(value , index , obj){
});
forEach()方法需要一个回调函数作为参数，
数组中有几个元素，回调函数就会被调用几次，
每次调用时，都会将遍历到的信息以实参的形式传递进来，
我们可以定义形参来获取这些信息。
value:正在遍历的元素
index:正在遍历元素的索引
obj:被遍历对象
5.正则表达式
- 正则用来定义一些字符串的规则，程序可以根据这些规则来判断一个字符串是否符合规则，
也可以将一个字符串中符合规则的内容提取出来。
- 创建正则表达式
- var reg = new RegExp("正则","匹配模式");
- var reg = /正则表达式/匹配模式
- 语法：
匹配模式：
i:忽略大小写
g:全局匹配模式
- 设置匹配模式时，可以都不设置，也可以设置1个，也可以全设置，设置时没有顺序要求
正则语法
| 或
[] 或
[^ ] 除了
[a-z] 小写字母
[A-Z] 大写字母
[A-z] 任意字母
[0-9] 任意数字
- 方法：
test()
- 可以用来检查一个字符串是否符合正则表达式
- 如果符合返回true，否则返回false
常用：
正则表达式在线测试 | 菜鸟工具，提供多种常用正则表达式，懂的都懂！！！！
以字母或者数字8到10位的正则表达式代码，弱密码
var reg= /^\w{8,10}$/;- 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)：
-
^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$ - 强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)：
-
^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
手机号匹配（以1开头，11位数字）
var reg = /^1\d{10}$/;6.Dom
常用dom方法
getElementById() 返回带有指定ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节
点列表(集合/节点数组)。
getElementsByClassName() 返回包含带有指定类名的所有元素的节
点列表。
getElementsByName('a') 通过name属性获取一组元素节点对象
如果需要读取元素节点属性，
直接使用 元素.属性名
例子：元素.id 元素.name 元素.value
注意：class属性不能采用这种方式，读取class属性时需要使用 元素.className
.innerHTML用于获取元素内部的HTML代码的 ,对于自结束标签，这个属性没有意义
可以使用innerText属性
* innerText
* - 该属性可以获取到元素内部的文本内容
* - 它和innerHTML类似，不同的是它会自动将html去除
获取父节点，子节点
父节点.firstchild 可以获取第一个子节点(包括空白文本节点)
父节点.firstElementchild 可以获取第一个子元素(不包括空白文本节点)
父节点.childNodes 表示当前节点的所有子节点
//phone.childNodes[0];
//或者firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
//返回#bj的父节点
var pn = bj.parentNode
Dom查询的其他方法
/*
* 根据元素的class属性值查询一组元素节点对象
* getElementsByClassName()可以根据class属性值获取一组元素节点对象，
* 但是该方法不支持IE8及以下的浏览器
*/
//var box1 = document.getElementsByClassName("box1");
//console.log(box1.length);
//获取页面中的所有的div
//var divs = document.getElementsByTagName("div");
//获取class为box1中的所有的div
//.box1 div
/*
* document.querySelector()
* - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
* - 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
* - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
*/
var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1")
//console.log(div.innerHTML);
//console.log(box1.innerHTML);
/*
* document.querySelectorAll()
* - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
* - 即使符合条件的元素只有一个，它也会返回数组
*/
box1 = document.querySelectorAll(".box1");
box1 = document.querySelectorAll("#box2");
console.log(box1);
};Dom的增删改
增
document.reateElement() 创建元素节点。
document.createTextNode() 创建文本节点。
父节点.appendChild(子节点)向一个父节点中添加一个新的子节点
myClick("btn01",function(){
//创建广州节点 <li>广州</li>
//创建li元素节点
/*
* document.createElement()
* 可以用于创建一个元素节点对象，
* 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
* 并将创建好的对象作为返回值返回
*/
var li = document.createElement("li");
//创建广州文本节点
/*
* document.createTextNode()
* 可以用来创建一个文本节点对象
* 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
*/
var gzText = document.createTextNode("广州");
//将gzText设置li的子节点
/*
* appendChild()
* - 向一个父节点中添加一个新的子节点
* - 用法：父节点.appendChild(子节点);
*/
li.appendChild(gzText);
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
});删
//删除#bj节点
myClick("btn04",function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/*
* removeChild()
* - 可以删除一个子节点
* - 语法：父节点.removeChild(子节点);
*
* 子节点.parentNode.removeChild(子节点);
*/
//city.removeChild(bj);
bj.parentNode.removeChild(bj);
});下附实战小项目，本质是增删查dom，此demo相对比较重要，尤其在新增时注意方法的使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
/*
* 删除tr的响应函数
*/
function delA() {
//点击超链接以后需要删除超链接所在的那行
//这里我们点击那个超链接this就是谁
//获取当前tr
var tr = this.parentNode.parentNode;
//获取要删除的员工的名字
//var name = tr.getElementsByTagName("td")[0].innerHTML;
var name = tr.children[0].innerHTML;
//删除之前弹出一个提示框
/*
* confirm()用于弹出一个带有确认和取消按钮的提示框
* 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
* 如果用户点击确认则会返回true，如果点击取消则返回false
*/
var flag = confirm("确认删除" + name + "吗?");
//如果用户点击确认
if(flag) {
//删除tr
tr.parentNode.removeChild(tr);
}
/*
* 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
* 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
*/
return false;
};
window.onload = function() {
/*
* 点击超链接以后，删除一个员工的信息
*/
//获取所有额超链接
var allA = document.getElementsByTagName("a");
//为每个超链接都绑定一个单击响应函数
for(var i = 0; i < allA.length; i++) {
allA[i].onclick = delA;
}
/*
* 添加员工的功能
* - 点击按钮以后，将员工的信息添加到表格中
*/
//为提交按钮绑定一个单击响应函数
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function() {
//获取用户添加的员工信息
//获取员工的名字
var name = document.getElementById("empName").value;
//获取员工的email和salary
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
//alert(name+","+email+","+salary);
/*
* <tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
需要将获取到的信息保存到tr中
*/
//创建一个tr
var tr = document.createElement("tr");
//设置tr中的内容
tr.innerHTML = "<td>"+name+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
"<td><a href='javascript:;'>Delete</a></td>";
//获取刚刚添加的a元素，并为其绑定单击响应函数
var a = tr.getElementsByTagName("a")[0];
a.onclick = delA;
//获取table
var employeeTable = document.getElementById("employeeTable");
//获取employeeTable中的tbody
var tbody = employeeTable.getElementsByTagName("tbody")[0];
//将tr添加到tbodye中
tbody.appendChild(tr);
/*tbody.innerHTML += "<tr>"+
"<td>"+name+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
"<td><a href='javascript:;'>Delete</a></td>"
+"</tr>";*/
};
};
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td>
<a href="javascript:;">Delete</a>
</td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td>
<a href="deleteEmp?id=002">Delete</a>
</td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td>
<a href="deleteEmp?id=003">Delete</a>
</td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>Dom操作css样式
* 通过JS修改元素的样式，仅此一种办法：
* 语法：元素.style.样式名 = 样式值
//修改box1的宽度
/*
* 通过JS修改元素的样式：
* 语法：元素.style.样式名 = 样式值
*
* 注意：如果CSS的样式名中含有-，
* 这种名称在JS中是不合法的比如background-color
* 需要将这种样式名修改为驼峰命名法，
* 去掉-，然后将-后的字母大写
*
* 我们通过style属性设置的样式都是内联样式，
* 而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
*
* 但是如果在样式中写了!important，则此时样式会有最高的优先级，
* 即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
* 所以尽量不要为样式添加!important
*
*/获取元素的css样式，下面的方法无法修改样式，只是获取css！！
自定义下面函数，可保证IE8浏览器兼容性问题，注意，将if判断条件的window去掉会报错
原因是，window.getComputedStyle,虽然也找不到，但属性找不到，会返回undefied，
如果不加window,就是变量找不到，会直接报错！！！！！！！！
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getStyle(obj , name){
if(window.getComputedStyle){
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
}
1159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
