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 # 全局变量
|
注：注释 // 或 /* */
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)
|
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)
obj.indexOf(char)
obj.length
|
布尔(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') 指定索引插入
移除
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
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};
// 字典：方式一
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 = 'alex';
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
1、选择器
|
1
2
3
|
document.getElementById('id');
document.getElementsByName('name');
document.getElementsByTagName('tagname');
|
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内容
特殊的： input系列
textarea标签
select标签
value属性操作用户输入和选择的值
|
3、创建标签
|
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);
|
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
7、其他功能
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
console.log()alert()confirm()// URL和刷新
location.hreflocation.href = "url" window.location.reload()
// 定时器
setInterval("alert()",2000);
clearInterval(obj)setTimeout(); clearTimeout(obj) |
实例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8' > 5 <title>欢迎blue shit莅临指导 </title> 6 <script type='text/javascript'> 7 function Go(){ 8 var content = document.title; 9 var firstChar = content.charAt(0) 10 var sub = content.substring(1,content.length) 11 document.title = sub + firstChar; 12 } 13 setInterval('Go()',1000); 14 </script> 15 </head> 16 <body> 17 </body> 18 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8' /> 5 <title></title> 6 7 <style> 8 .gray{ 9 color:gray; 10 } 11 .black{ 12 color:black; 13 } 14 </style> 15 <script type="text/javascript"> 16 function Enter(){ 17 var id= document.getElementById("tip") 18 id.className = 'black'; 19 if(id.value=='请输入关键字'||id.value.trim()==''){ 20 id.value = '' 21 } 22 } 23 function Leave(){ 24 var id= document.getElementById("tip") 25 var val = id.value; 26 if(val.length==0||id.value.trim()==''){ 27 id.value = '请输入关键字' 28 id.className = 'gray'; 29 }else{ 30 id.className = 'black'; 31 } 32 } 33 </script> 34 </head> 35 <body> 36 <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();'/> 37 </body> 38 </html>
jQuery
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。
http://www.php100.com/manual/jquery/
1、选择器和筛选器
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta charset="utf-8"> 6 <title>Index</title> 7 <style> 8 a { 9 color: #428bca; 10 text-decoration: none; 11 } 12 13 .modal-backdrop { 14 position: fixed; 15 top: 0; 16 right: 0; 17 bottom: 0; 18 left: 0; 19 z-index: 1050; 20 background-color: #white; 21 opacity: 0.8; 22 } 23 24 .modal { 25 position: fixed; 26 top: 30%; 27 left: 50%; 28 z-index: 1030; 29 } 30 31 .hide { 32 display:none; 33 } 34 </style> 35 </head> 36 <body> 37 <div> 38 <input type="button" onclick="fadeIn();" value="加载条"/> 39 </div> 40 <div id="shade" class="modal-backdrop hide"> 41 <div class="modal"> 42 <img src="./images/loading_32.gif"/> 43 </div> 44 </div> 45 <script > 46 function fadeIn() { 47 document.getElementById('shade').className = 'modal-backdrop'; 48 } 49 50 function fadeOut() { 51 document.getElementById('shade').className = 'modal-backdrop hide'; 52 } 53 </script> 54 </body> 55 </html>