Python学习：javascripts和DOM简单使用
Python学习：Javascripts和DOM操作
矮哥linux运维群： 93324526 笔者QQ：578843228
二、JavaScript
JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。
1、如何编写
1. 存在形式
<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>
<!-- 方式二 -->
<script type"text/javascript">
//Js代码内容
</script>
2. 位置
HTML的head中
HTML的body代码块底部(推荐)
<body>
<script>...</script>
</body>
由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。
2、变量
JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。
// var a = 123; // 局部变量
// b = 123; // 全局变量
var name = 'aige';
function func() {
name = 123;
var name = 666;
}
func();
alert(v);
JavaScript中代码注释：
- 单行 //
- 多行 /* */
注意：此注释仅在Script块中生效。
3. 声明函数
// 普通函数
function func(arg){
alert(123);
}
func("alex")
// 普通函数，自执行函数
(function(arg){
alert(123);
})("alex")
(function(arg){})("alex")
// 匿名函数,当做参数传递
function(){
alert(123);
}
// 匿名函数的应用
function func(arg){
arg()
}
func(function(){alert(123)})
4、数据类型
JavaScript 中的数据类型分为原始类型和对象类型：
- 原始类型
数字
字符串
布尔值 - 对象类型
数组
“字典”
...
undefined
// 未定义 var age;
function func(a1,a2){
alert(a1);
alert(a2);
}
func(1)
null // 空值
数字
var age = 123.123;
var v = typeof age; # number
alert(v);
isNaN //判断是否是非数字
parseInt() //转换成整形
parseFloat(num) //转换成浮点型
字符串方法
obj.length 长度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
数组
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
字典
info = {name: 'aige',age: 18};
5、序列化
JSON.stringify
JSON.parse
6、转义
decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出
7、eval
JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
eval()
EvalError 执行字符串中的JavaScript代码
8、时间
JavaScript中提供了时间相关的操作，时间操作中分为两种时间：
时间统一时间
本地时间（东8区）
动态时间展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="i1"></div>
<script>
function currentDate() {
var da = new Date();
var year = da.getFullYear();
var month = da.getMonth() + 1;
var day = da.getDate();
var hours = da.getHours();
var minutes = da.getMinutes();
var seconds = da.getSeconds();
var txt = year + "-" + month + "-" + day + " " + hours+":"+minutes+":"+seconds;
document.getElementById('i1').innerHTML = txt;
}
setInterval(currentDate,1000);
</script>
</body>
</html>
9、条件&循环&异常处理
1、条件语句
JavaScript中支持两个中条件语句，分别是：if 和 switch
if
if(条件){
}else if(条件){
}else{
}
switch
switch(name){
case '1':
age = 123;
break;
case '2':
age = 456;
break;
default :
age = 777;
}
2、循环语句
JavaScript中支持三种循环语句，分别是：
var names = ["aige", "can-H", "can"];
for(var i=0;i<names.length;i++){
console.log(i);
console.log(names[i]);
}
var names = ["aige", "can-H", "can"];
for(var index in names){
console.log(index);
console.log(names[index]);
}
while(条件){
// break;
// continue;
}
3、异常处理
try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
注：主动跑出异常 throw Error('xxxx')
DOM
DOM+HTML操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="i1"></div>
<div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<div class="c1">4</div>
<script>
// var obj = document.getElementById('i1');
var objList = document.getElementsByClassName('c1');
for(var i=0;i<objList.length;i++){
objList[i].innerHTML = "aige";
}
</script>
</body>
</html>
1、 面向对象
// 面向对象
function Foo(name,age){
this.Name = name;
this.Age = age;
}
obj = new Foo('aige',18);
obj.Name
function Foo(name,age){
this.Name = name;
this.Age = age;
}
Foo.prototype={
"show":function(){
alert(this.Name);
}
}
// 利用原型实现方法重用
Foo.prototype.show = function(){
alert(this.Name);
}
obj1 = new Foo('aige',18);
obj1.show()
obj2 = new Foo('aige',18);
obj2.show()
2、利用HTML文档+JavaScript+DOM实现操作HTML数据
1. 查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
2. 间接查找
#这个会把空白符也找出来。例如回车，包括文本
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
3. HTML标签样式操作
var tag = document.getElementById('i1');
tag.classList.add('c1') //给标签添加样式
tag.classList.remove('c1') //给标签移除样式
<div class='c1 c2'></div>
tag.className "c1 c2"
tag.classList ['c1','c2']
菜单栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
.item .title{
height: 40px;
background-color: cadetblue;
line-height: 40px;
}
.item .content a{
display: block;
}
</style>
</head>
<body>
<div style="width: 200px;height: 600px;border: 1px solid #dddddd">
<div class="item">
<div class="title" onclick="changeMenu(this);">菜单一</div>
<div class="content">
<a href="#">内容一</a>
<a href="#">内容一</a>
<a href="#">内容一</a>
<a href="#">内容一</a>
</div>
</div>
<div class="item">
<div class="title" onclick="changeMenu(this);" id="m2">菜单二</div>
<div class="content hide">
<a href="#">内容二</a>
<a href="#">内容二</a>
<a href="#">内容二</a>
<a href="#">内容二</a>
<a href="#">内容二</a>
</div>
</div>
<div class="item">
<div class="title" onclick="changeMenu(this);">菜单三</div>
<div class="content hide">
<a href="#">内容三</a>
<a href="#">内容三</a>
<a href="#">内容三</a>
<a href="#">内容三</a>
<a href="#">内容三</a>
<a href="#">内容三</a>
</div>
</div>
</div>
<script>
function changeMenu(currentTagObj) {
// console.log(currentTagObj);
// currentTagObj当前点击的标签
// contentTagObj 当前点击的标签的弟弟
var contentTagObj = currentTagObj.nextElementSibling;
contentTagObj.classList.remove('hide');
// itemObjList 当前点击的标签的父亲的父亲的所有儿子
var itemObjList = contentTagObj.parentElement.parentElement.children;
// 循环当前标签的所有 父辈
for(var i=0;i<itemObjList.length;i++){
var loopItemObj = itemObjList[i];
// 只处理当前标签的大爷和叔叔
if(loopItemObj != contentTagObj.parentElement){
loopItemObj.lastElementChild.classList.add('hide');
}
}
}
</script>
</body>
</html>
4. 文本操作
innerText 只获取文本
innerHTML 获取文本以及标签
innerText = "文本"
innerHTML = "HTML格式解析"
input:
document.getElementById('username').value
document.getElementById('username').value = "asdf"
PS:
<input type="text" id="key" value="请输入关键字" onfocus="keyFocus();" onblur="keyBlur();" />
onfocus: 获取焦点
onblur： 失去焦点
搜索框示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="key" value="请输入关键字" onfocus="keyFocus();" onblur="keyBlur();" />
<script>
function keyFocus() {
console.log('获取焦点');
var val = document.getElementById('key').value;
if (val == "请输入关键字"){
document.getElementById('key').value = "";
}
}
function keyBlur() {
console.log('失去焦点');
var val = document.getElementById('key').value;
if(val.length>0){
}else{
document.getElementById('key').value = "请输入关键字";
}
}
</script>
</body>
</html>
5. 属性操作
<div id='i1'></div>
<input id='ck' type="checkbox" />
自定义属性
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
内置属性：
obj.id
checkbox
- obj.checked true或false
实例，多选反选取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll();" />
<input type="button" value="取消" onclick="removeAll();"/>
<input type="button" value="反选" onclick="reverseAll();"/>
<table border="1">
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input class="c1" type="checkbox" /></td>
<td>c1.com</td>
<td>80</td>
</tr>
<tr>
<td><input class="c1" type="checkbox" /></td>
<td>c2.com</td>
<td>80</td>
</tr>
<tr>
<td><input class="c1" type="checkbox" /></td>
<td>c3.com</td>
<td>80</td>
</tr>
<tr>
<td><input class="c1" type="checkbox" /></td>
<td>c4.com</td>
<td>80</td>
</tr>
</tbody>
</table>
<script>
function checkAll() {
var trList = document.getElementById('tb').children;
for(var i=0;i<trList.length;i++){
var tr = trList[i];
tr.firstElementChild.firstElementChild.checked = true;
}
}
function removeAll() {
var trList = document.getElementById('tb').children;
for(var i=0;i<trList.length;i++){
var tr = trList[i];
tr.firstElementChild.firstElementChild.checked = false;
}
}
function reverseAll(){
var trList = document.getElementById('tb').children;
for(var i=0;i<trList.length;i++){
var tr = trList[i];
if(tr.firstElementChild.firstElementChild.checked){
tr.firstElementChild.firstElementChild.checked = false;
}else{
tr.firstElementChild.firstElementChild.checked = true;
}
}
}
</script>
</body>
</html>
6. 创建标签
对象方式 ***
标签操作
创建标签
// 方式一
var tag = document.createElement('a')
tag.innerText = "aige"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/can-H"
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/can-H'>矮哥</a>"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="inp" />
<input type="button" value="添加" onclick="addElement();" />
<ul id="container">
<li>内容一</li>
</ul>
<script>
function addElement() {
// 获取用户输入的内容
var val = document.getElementById('inp').value;
// 创建标签(对象) *****
var tag = document.createElement('li');
tag.innerHTML = val;
// 将对象添加到 append
document.getElementById('container').appendChild(tag);
/*
var tag = "<li>" + val +"</li>";
document.getElementById('container').insertAdjacentHTML("beforeEnd",tag);
*/
document.getElementById('inp').value = "";
}
</script>
</body>
</html>
7. js提交表单
document.getElementById('f1').submit();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="f1" action="http://www.baidu.com">
<input type="text" />
<input type="submit" value="提交" />
<input type="button" value="b提交" onclick="submitForm();/>
<div onclick="submitForm();" >asdf</div>
</form>
<script>
function submitForm() {
document.getElementById('f1').submit();
}
</script>
</body>
</html>
8. 常用操作
console.log(..) // 输出到检查里的console
alert(..) // 弹窗
confirm(...) // 弹窗 不能自己加样式，想好看自己写模态对话框
var v = confirm('是否要删除？');
console.log(v);
location.href // 获取当前URL
location.href = "http://www.oldboyedu.com" // 重定向
location.reload() // 刷新
setInterval // 定时器
clearInterval // 清除定时器
setTimeout // 只执行一次的定时器
clearTimeout // 中断
var obj1= setInterval(function () {
console.log('1');
clearInterval(obj1);
},1000);
var obj2= setInterval(function () {
console.log('2');
clearInterval(obj2);
},1000)
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="删除" onclick="removeEle();" />
<div id="i1"></div>
<script>
function removeEle() {
document.getElementById('i1').innerHTML = "删除成功";
var obj = setTimeout(function () {
document.getElementById('i1').innerHTML = "";
},5000);
clearTimeout(obj);
}
// var obj1= setInterval(function () {
// console.log('1');
// clearInterval(obj1);
// },1000);
// var obj2= setInterval(function () {
// console.log('2');
// clearInterval(obj2);
// },1000)
</script>
</body>
</html>
9. 事件
常用事件：onblur onchange onclick ondblclick onfocus onkeydown onmouseout onmouseover
同一个事件，只能被绑定一次
1. 绑定事件
<div id='i1' onkeydown='func(this,event,123);'> 点我 </div>
function func(a,b,c){
// a -> 当前被点击的标签对象 document.getElementById('i1')
// b -> 当前事件相关的信息
// c = 123
}
2. 绑定事件 ***************
<div id='i1'> 点我 </div>
<script>
document.getElementById('i1).onclick = function(event){
// event -> 当前事件相关的信息
// this -> 当前被点击的标签对象
}
document.getElementById('i1).onclick = function(event){
// event -> 当前事件相关的信息
// this -> 当前被点击的标签对象
}
</script>
一个事件只能被绑定一次
3. 绑定事件
document.getElementById('i1').addEventListener('click',function(){
console.log(111);
},true)
document.getElementById('i1').addEventListener('click',function(){
console.log(222);
},true)
PS: addEventListener第三个参数
默认：
事件冒泡
捕获式
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="i1">asdfasdf</div>
<script>
// document.getElementById('i1').onclick = function () {
// console.log(111);
// };
//
// document.getElementById('i1').onmouseover = function () {
// console.log(222);
// }
document.getElementById('i1').addEventListener('click',function(){
console.log(111);
})
document.getElementById('i1').addEventListener('click',function(){
console.log(222);
})
</script>
</body>
</html>
| 属性 | 此事件发生在何时... |
|---|---|
| onabort | 图像的加载被中断 |
| onblur | 元素失去焦点 |
| onchange | 域的内容被改变 |
| onclick | 当用户点击某个对象时调用的事件句柄 |
| ondblclick | 当用户双机某个对象时调用的事件句柄 |
| onerror | 在加载文档或图像时发生错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘按键被按下 |
| onkeypress | 某个键盘按键被按下并松开 |
| onkeyup | 某个键盘按键被松开 |
| onload | 一张页面或一副图像完成加载 |
| onmousedown | 鼠标按钮被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标被移开 |
| onmouseover | 鼠标移到某个元素之上 |
| onmouseup | 鼠标按键被松开 |
| onreset | 重置按钮被点击 |
| onsubmit | 确认按钮被点击 |
| onunload | 用户退出页面 |
