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)：

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', );
var ret = obj.Func("sb");
console.log(ret);函数2：
function func(arg){
console.log(arg);
return "uuu"
}
func("jack");
var ret = func("");
console.log(ret);函数3：匿名函数
var f= function(arg){
console.log(arg)
};
f("");函数4--自执行函数：
<script>
(function(){
console.log("abc");
})();
</script>函数5--自执行参数2-带参数：
<script>
(function(arg){
console.log("jack",arg);
})("tom");
</script>

8、面向对象：基于函数加原型构造数类似于面向对象的功能

二：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、选择器：

2、内容：

innerText
innerHTMLvar 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>

结果：

特殊性：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" />

<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>