Python 前端 js基础
Javascript 概述
JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。
1、JavaScript代码存在形式
|
1
2
3
4
5
6
7
|
<!-- 方式一 -->
<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实现特效慢而已。
|
1
2
3
4
5
6
|
如：<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>
|
3、变量
- 全局变量
- 局部变量
JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量
|
1
2
|
var name = "seven" # 局部变量
age = 18 # 全局变量
|
注：注释 // 或 /* */
js压缩：一般js文件都被压缩，然后子再传递给浏览器端，jquery.min.js就是jquery.js压缩后的，格式发生了改变，例如，函数是被压缩成一行。
4、基本数据类型
数字（Number）
|
1
2
3
4
5
|
var page = 111;
var age = Number(18);
var a1 = 1,a2 = 2, a3 = 3; #统一一行来定义多个局部变量
parseInt("1.2"); #字符串转换为int类型
parseFloat("1.2"); #字符串转换为浮点型
|
console.log(age, typeof age) #typeof 查看数据的类型
字符串(String)
|
1
2
3
4
5
6
7
8
9
10
|
var name = "wupeiqi";
var name = String("wupeiqi");
var age_str = String(18);
常用方法： obj.trim() #去除空格
obj.charAt(index) #根据索引来取值
obj.substring(start,end) #获取序列，和python的切片一样
obj.indexOf(char) #获取想要字母的下标
obj.length #获取字符串的长度
|
如python 一样，js也是可以对字符串做操作的，
布尔(Boolean)
|
1
2
3
|
var status = true; #注意首字母是小写
var status = false;
var status = Boolen(1==1)
|
数组(Array)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
var names = [\'alex\', \'tony\', \'eric\']
var names = Array(\'alex\', \'tony\', \'eric\') #创建数字的两种方法
常用方法： 添加
obj.push(ele) #追加
obj.unshift(ele) #最前插入
obj.splice(index,0,\'content\') #指定索引插入，索引，中间必须是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\'}
|
更多操作见：http://www.shouce.ren/api/javascript/main.html
javascript的序列化与反序列化：
undefined
|
1
2
|
undefined表示未定义值var name; |
null
|
1
|
null是一个特殊值 |
5、循环语句
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
var names = ["alex", "tony", "rain"];
// 数组：方式一
for(var i=0;i<names.length;i++){
console.log(i);
console.log(names[i]);
}// 数组：方式二
for(var index in names){
console.log(index);
console.log(names[index]);
}var names = {"name": "alex", "age": 18};
// 字典：方式一 #因为字典的key不是数字，所以只有这一种循环的模式
for(var index in names){
console.log(index);
console.log(names[index]);
}// while循环
while(条件){
// break;
// continue;
} |
6、条件语句
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//if条件语句
if(条件){
}else if(条件){
}else{
}
var name = \'python\';
var age = 1;
// switch,case语句
switch(name){
case \'1\':
age = 123;
break;
case \'2\':
age = 456;
break;
default :
age = 777;
}
|
7、异常处理
|
1
2
3
4
5
6
7
|
try{
}catch(e) {}finally{
} |
8、函数
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
函数的声明 function func(arg){
return true;
}
匿名函数 var func = function(arg){
return "tony";
}
自执行函数 (function(arg){
console.log(arg);
})(\'123\')
|
9、面向对象
|
1
2
3
4
5
6
7
8
9
10
11
|
function Foo (name,age) { this.Name = name;
this.Age = age;
this.Func = function(arg){
return this.Name + arg;
}
}var obj = new Foo(\'alex\', 18);
var ret = obj.Func("sb");
console.log(ret); |
Dom 概述
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
注：一般说的JS让页面动起来泛指JavaScript和Dom
Dom等于把整个页面封装起来，可以利用，document.getXXX的方式来调用其的内容。
1、选择器
|
1
2
3
|
document.getElementById(\'id\');
document.getElementsByName(\'name\');
document.getElementsByTagName(\'tagname\');
|
获取这个id=‘hello’正行的代码
2、内容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
innerTextinnerHTMLvar obj = document.getElementById(\'nid\')
obj.innerText # 获取文本内容
obj.innerText = "hello" # 设置文本内容
obj.innerHTML # 获取HTML内容
obj.innerHTML = "<h1>asd</h1>" # 设置HTML内容
特殊的：以下这些都需要value来获取值 input系列
textarea标签
select标签
value属性操作用户输入和选择的值
|
让网页动起来：
1 <p id="hello">1</p> 2 <button type="button" onclick="abc()">+1</button> 3 4 <script> 5 function abc(){ 6 var a = document.getElementById("hello"); 7 var text = a.innerText; 8 var text = parseInt(text); 9 text += 1; 10 a.innerText = text 11 12 }
1 <input type="text" id="search" value="请输入关键字" onfocus="abc()" onblur="cba()"> 2 3 4 <script> 5 function abc(){ 6 var ndi = document.getElementById(\'search\') 7 var value = ndi.value; 8 if(value == \'请输入关键字\'){ 9 ndi.value = \'\'; 10 } 11 } 12 13 function cba(){ 14 var ndi = document.getElementById(\'search\') 15 var value = ndi.value; 16 if(!value.trim()){ 17 ndi.value = \'请输入关键字\' 18 } 19 } 20 21 </script>
输入框显示值
3、创建标签
dd
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
方式一： var obj = document.createElement(\'a\');
obj.href = "http://www.etiantian.org";
obj.innerText = "老男孩";
var container = document.getElementById(\'container\');
//container.appendChild(obj);
//container.insertBefore(obj, container.firstChild);
//container.insertBefore(obj, document.getElementById(\'hhh\'));
方式二： var container = document.getElementById(\'container\');
var obj = "<input type=\'text\' />";
container.innerHTML = obj;
// \'beforeBegin\', \'afterBegin\', \'beforeEnd\', \'afterEnd\'
//container.insertAdjacentHTML("beforeEnd",obj);
|
1 <body> 2 3 <div id="container"></div> 4 <a href="http://www.baidu.com" onclick="return addevent()">添加</a> 5 6 7 <script> 8 function addevent(){ 9 var nid = document.getElementById("container") 10 var tag = "<input type=\'text\' />" 11 nid.innerHTML = tag; 12 return false; 13 } 14 15 </script> 16 17 </body>
自定义的函数优先执行，然后再执行自带的函数。
4、标签属性
|
1
2
3
4
5
6
7
8
9
10
11
|
var obj = document.getElementById(\'container\');
固定属性 obj.id
obj.id = "nid"
obj.className
obj.style.fontSize = "88px";
自定义属性 obj.setAttribute(name,value)
obj.getAttribute(name)
obj.removeAttribute(name)
|
5、提交表单
|
1
|
document.geElementById(\'form\').submit()
|
6、事件
特殊的：
|
1
2
3
|
window.onload = function(){}
//jQuery：$(document).ready(function(){})
//onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。图片还么有渲染，就可以进行事件的执行。
|
特殊参数：this，event
版权声明：本文为nopnog原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。