Python 第十三篇之一：前端页面 js和dome
一：JavaScript:
JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。
1、位置：
<!-- 方式一 --> <script type"text/javascript" src="JS文件"></script> <!-- 方式二 --> <script type"text/javascript"> Js代码内容 </script>
2、JavaScript代码存在位置
- HTML的head中
- HTML的body代码块底部(推荐)
由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。
如： <script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script> <script> alert('123'); </script>
例如2,先写正常的代码，将JavaScript写在最下端：
<body>
<h1>xxxxxx</h1>
<script>
function f1() {
alert("f1")
}
f1()
</script>
</body>
3、变量
全局变量
局部变量
JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量
var name = "seven" # 局部变量
age = 18 # 全局变量
注释：
//
或
/* */
4、基本数据类型：
数字（Number）
1
2
3
4
5
var page = 111; #整数
var age = Number(18); #数值
var a1 = 1,a2 = 2, a3 = 3; #多个局部变量
parseInt("1.2"); #转换成整数
parseFloat("1.2"); #抓换成浮点数
字符串(String)：
var name = "jack"; var name = String("jack"); var age_str = String(18); 常用方法： obj.trim() obj.charAt(index) obj.substring(start,end) obj.indexOf(char) obj.length 可以在google浏览器的调试模式的console接口进行调试： 布尔(Boolean)： var status = true; var status = false; var status = Boolen(1==1) 数组(Array)： var names = ['jack', 'tom', 'eric'] 常用方法： 添加 obj.push(ele) 追加 obj.unshift(ele) 最前插入 obj.splice(index,0,'content') 指定索引插入 移除 obj.pop() 数组尾部获取 obj.shift() 数组头部获取 obj.splice(index,count) 数组指定位置后count个字符 切片 obj.slice(start,end) 合并 newArray ＝ obj1.concat(obj2) 翻转 obj.reverse() 字符串化 obj.join('_') 长度 obj.length 字典 var items = {'k1': 123, 'k2': 'tony'} 获取值 items.k1(); 序列化： #将字典转换为字符串 s1 = JSON.stringify(items) "{"k1":123,"k2":"tony"}" 将字符串序列化为对象： s2 = JSON.parse(s1) Object {k1: 123, k2: "tony"} s2 Object {k1: 123, k2: "tony"}
undefined：
undefined表示未定义值
var name;
null：
null是一个特殊值
5、循环语句：
var names = ["jack", "tony", "rain"]; // 数组：方式一 for(var i=0;i<names.length;i++){ console.log(i); console.log(names[i]); }
如图：
//属组：方式二
var names = {"name": "jack", "age": 18};
for(var index in names){
console.log(index);
console.log(names[index]);
}
如图：
//字典循环：
// 字典：方式一
var names = {"k1":"v1","k2":"v2"}
undefined
for(var index in names){
console.log(index);
console.log(names[index]);
}
如图：
while 循环：
while(条件){
// break;
// continue;
}
6、条件语句：
//if条件语句
if(条件){
}else if(条件){
}else{
}
var username= 'jack';
var age = 111;
// switch,case语句
switch(age){
case 111:
console.log("111");
break;
case 222:
console.log("222");
break;
default :
console.log("333");
age = 333;
}
7、异常处理：
try{
}catch(e) {
}finally{
}
#try是正常代码块，catch(e)捕获指定错误，finally当上面都没有执行的时候执行
8、函数：
函数1： function Foo (name,age) { this.Name = name; this.Age = age; this.Func = function(arg){ return this.Name + arg; } } var obj = new Foo('jack', 18); var ret = obj.Func("sb"); console.log(ret); 函数2： function func(arg){ console.log(arg); return "uuu" } func("jack"); var ret = func("123"); console.log(ret); 函数3：匿名函数 var f= function(arg){ console.log(arg) }; f("123"); 函数4--自执行函数： <script> (function(){ console.log("abc"); })(); </script>
函数5--自执行参数2-带参数： <script> (function(arg){ console.log("jack",arg); })("tom"); </script>
8、面向对象：基于函数加原型构造数类似于面向对象的功能
<script>
function Foo(name,age){
this.Name = name;
this.Age = age;
this.Func = function(arg){
return this.Name + arg;
}
}
var obj = new Foo("jack",18);
console.log(obj.Name);
console.log(obj.Age);
var ret = obj.Func("sb");
console.log(ret);
</script>
二：Dom
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
注：一般说的JS让页面动起来泛指JavaScript和Dom
默认格式是查找内容-->操作内容：
修改内容：
tags = document.getElementsByTagName('h1'); #根据tagName修改：
[<h1>xxx</h1>, <h1>yyy</h1>]
tags = document.getElementsByTagName('h1');
[<h1>xxx</h1>, <h1>yyy</h1>]
tags[0];
<h1>xxx</h1>
tags[0].innerText = "1234";
"1234"
tags[1].innerText = "2234";
"2234"
1、选择器：
<script type="text/javascript"> var nid = document.getElementById('n1'); //根据标签的id取值，id在性别选择和checkbox的时候是一样的，其他时候不能一样 nid.innerText = "jack"; </script> <script type="text/javascript"> //不指定的话默认就是text/javascript，如果写成别的会导致javascript无法正常使用 var lis = document.getElementsByTagName('li'); //根据标签的名称获取值 for(var i in lis){ //循环一个对象 var item = lis[i]; //取出对象里面的值 item.innerText = i; //innerText 是修改对应key的值 } var lis2 = document.getElementsByClassName('c1'); //根据标签使用的哪一个class获取值 for(var i in lis2){ var item = lis2[i]; item.innerText = i; } var username = document.getElementsByName('username')[0]; //根据标签内置的name获取value var pwd = document.getElementsByName('pwd')[0]; console.log(username.value,pwd.value); //value表示取出对应的值，username.value就是获取到username对应的值，pwd.value就是获取pwd的值
2、内容：
innerText innerHTML var obj = document.getElementById('nid') obj.innerText # 获取文本内容 obj.innerText = "hello" # 替换文本内容 obj.innerHTML # 获取HTML内容 obj.innerHTML = "<h1>asd</h1>" # 替换HTML内容 特殊的： input系列 textarea标签 select标签 value属性操作用户输入和选择的值
通过修改文本内容实现数值自动增加：
<body> <div> <div id="num">1</div> <input type="button" value="+1" onclick="Add();" /> </div> <script type="text/javascript"> function Add() { var nid = document.getElementById('num'); var text = nid.innerText; text = parseInt(text); text += 1; nid.innerText = text; } </script> </body>
获取文本内容：
获取到内部所有标签的文本内容，不包含div，h1等标签：
<div id="n1"> <h1>jack</h1> <h1>XX</h1> </div> <script type="text/javascript"> var text = document.getElementById("n1"); console.log(text.innerText); </script> </body>
结果：
jack
XX
获取包含标签在和文本内容在内的信息：
<body> <div id="n1"> <h1>jack</h1> <h1>XX</h1> </div> <script type="text/javascript"> var text = document.getElementById("n1"); console.log(text.innerHTML); </script> </body>
结果：
<h1>jack</h1> <h1>XX</h1>
特殊性：input、select、textarea：通过value 获取值，不能通过 innerText获取：
<body> <div id="n11">alex <h1>XXX</h1> </div> <h1>特殊的：value</h1> <h3><input type="button" onclick="GetValue();" value="获取值"></h3> <input id = "n22" type="text"> <select id="n33"> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> </select> <textarea id="n44">aa</textarea> </body> // 通过id获取到值并进行操作 function GetValue(){ var obj = document.getElementById('n22'); alert(obj.value); obj.value = "2"; //重新赋值 }
做一个搜索框吧：默认显示"请输入要搜索的内容"，当鼠标点到搜索框就则不显示，如果搜索框内没有输入任何内容，当鼠标离开时在显示"请输入要搜索的内容"。
<body> <input type="text" id="search" value="请输入要搜索的内容" onfocus="Focus();" onblur="Blur();" /> <script> function Focus(){ var nid = document.getElementById("search"); var value = nid.value; if(value == "请输入要搜索的内容") { nid.value = ""; }else if(value == "请再次输入关键字") { nid.value = ""; } } function Blur(){ var nid = document.getElementById('search'); var value = nid.value; if(!value.trim()){ nid.value = "请输入要搜索的内容"; } } </script> </body>
3、创建标签：
<body> <div id="container"></div> <a href="http://www.baidu.com" onclick="return AddElement();">添加</a> <script> function AddElement(){ /* var nid = document.getElementById('container'); var tag = "<input type = 'text' value='defalut' />"; nid.innerHTML = tag; container.insertAdjacentHTML("beforeBegin",tag); return false; //return false表示其后面的将不再执行 */ var createObj = document.createElement('a'); createObj.href = "http://www.baidu.com"; createObj.innerText = "我的搜索"; //nid.innerHTML = createObj; var nid = document.getElementById('container'); nid.appendChild(createObj); return false; } </script> </body>
4、标签属性及修改：
var obj = document.getElementById('container');
修改固定属性
obj.id
obj.id = "nid"
obj.className
obj.style.fontSize = "yy";
如图：
获取默认属性：
自定义属性
obj.setAttribute(name,value)
obj.getAttribute(name)
obj.removeAttribute(name)
如图：
总结：有的属性是默认属性可以使用obj.key直接获取，对于没有的属性即自定义可以使用obj.setAttribute("key","value")设置，然使用obj.getAttribute("key")可以获取值
5、提交表单
document.geElementById('form').submit()
6、事件
特殊的：
window.onload = function(){}
//jQuery：$(document).ready(function(){})
//onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。图片还么有渲染，就可以进行事件的执行。
特殊参数：this，event
7、其他功能
console.log()
alert()
confirm()
// URL和刷新
location.href
location.href = "url" window.location.reload()
// 定时器
setInterval("alert()",2000);
clearInterval(obj)
setTimeout();
clearTimeout(obj)
更改style里里面的属性：
var nid = document.getElementById("n1"); #找到id为n1的属性
nid.style.backgroundColor = "green" #进行操作
如图：
8、提交表单：
不做验证，即不判断用户的输入是否为空：
<body> <form id="forml" action="https://www.sogou.com/web" method="get"> <input name="query" type="text" /> <!-- <input type="submit" value="提交"> /* 方法1，使用submit直接提交 */ --> <div onclick="Submit();">提交</div> </form> <script> function Submit(){ document.getElementById('forml').submit(); #找到id为forml的并将表单给其提交 } </script> </body>
验证用户的输入是否为空：
<body> <form id="forml" action="https://www.sogou.com/web" method="get"> <input name="query" type="text" /> <input type="submit" value="提交" onclick="return MySubmit();" style="background-color: #999999"> </form> <script> function MySubmit(){ var q = document.getElementsByName('query')[0]; if(q.value.trim()){ return true }else { alert('请输入内容') return false } } </script> </body>
注：提交成功后将是搜狗的搜索界面
定时器：
<head> <meta charset="UTF-8"> <title>欢迎光临本网站，您的满意是我们最大的需求！</title> </head> <body> <input type="button" onclick="Stop();" value="停下来吧" > <input type="button" onclick="Start();" value="继续转吧" > <script> //setInterval("操作"，"间隔时间毫秒") obj1 = setInterval("Func()",1000); //obj2 = setTimeout("Func()",10000); //设置超时时间，即一共转动多少秒 function Stop(){ //清楚定时器 clearInterval(obj1); //clearTimeout(obj2); //调用超时 } function Start(){ obj1 = setInterval("Func()",1000); } function Func(){ var text = document.title; var firstChar = text.charAt(0); var subText = text.substring(1,text.length); var newTitle = subText + firstChar; document.title = newTitle; } </script> </body>
三：jQuery
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。
http://www.php100.com/manual/jquery/
