- JavaScript （可以对html标签及CSS进行操作）
- Dom （API，提供找寻html中的标签，以便于使用JS对所找到的标签或CSS进行相应的操作）
- jQuery （用于将复杂的逻辑和运算封装到一个包中供外部调用）
JavaScript:
<srcipt>...</script>
存在的形式：文件，块
一般在body的底部书写。
--- 声明变量：
name = "alex" ；(全局变量)
var age=18； （局部变量）
--- 数字：
var age = "18";
console.log(age,typeof age);
age = parseInt(age);
console.log(age,typeof age);
var age = "18.9";
console.log(parseInt(age));
console.log(parseFloat(age));
Number('123');
parseInt('123');
--- 字符串：可在浏览器中的console调试。
var name = "abc";
var name = "abc ";
name.trim(); 去掉字符串尾部的空字符
name.charAt(0); 获取第一个字符a
name.substring(1,2); 获取等于1小于2中间的数据，这里是b
--- 布尔：
Boolean(1)
true
Boolean(0)
false
--- 数组：
var li = [11,22,33];
var n = [44,55,66];
var li = Array(11,22,33);
li.push(88); 往li放入88 （往后插入数据）
li.unshift("abc"); 往li中放入字符串（往前插入数据）
li.splice(1,0,'alex'); 在1这个位置放入'alex'字串，参数0是固定写法。
i = li.pop(); 将li尾部数据移出，并赋值给i (从尾部移出)
i = li.shift(); 将li的头部值移出，并赋值给i （从头部移出）
li.splice(1,2); 将li中1位置开始的元素取出2个（第一个参数是为位置，第二个参数是个数）
li.slice(0,2); 切片，从0位置，到2（不计算在内），这里是11,22
m = li.concat(n); 联合，将li和n联合到一起，并赋给m
li.reverse()；自身翻转变为33,22,11
m = li.join('-'); '-'为分隔符，11-22-33
name = 'zhaohong';
name.length; 获取字符串长度
--- 字典：
dic = {"k1":'v1'} 创建字典，是一个对象
--- 序列化和反序列化：
s = JSON.stringify(dic) 将dic字典序列化为一个字符串
m = JSON.parse(s) 将序列化的s，进行反序列化为一个对象
-- undefined
var name = "jake"
undefined
如果对于定义的变量未赋予值，则为undefined
如：var ss, ss显示为undefiled, 布尔值为false
name = null 指向了一个特殊地址，null的布尔值为false
--- 循环语句：
li = [11,22,33,44];
for(var item in li){
console.log(item); //输出为索引
}
var dic = {'k1'：11,'k2':22};
for(var item in dic){
console.log(item) //输出为key
}
for(var i=0;i<100;i++){
console.log(i);
}
for(var i=0;i<li.length;i++){
console.log(i);
}
while(true){
continue;
break;
}
和python中的while循环一样
--- 条件语句：
if（条件）{
}else if（条件）{
}else{
}
switch(name){
case 1:
console.log('111');
break;
case ..:
....
default:
....
}
--- 异常处理：
try{
}catch(e){
}finally{
}
--- Dom让js动起来
obj = Foo()
obj.xx
document
1、先查找元素，再操作元素。
2、getElementsByTagName()
3、getElementById();
4、getElementsByClassName();
<div>
<div id="n1">c1</div>
<a>test</a>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<script src="" type="text/javascript">
var nid = document.getElementById('n1')
nid.innerText; 查看标签内容
nid.innerText = "jake"; 设置标签内容
var li_list=document.getElementByTagName('li');
for var i in li_list){
var item = li_list[i];
item.innerText=i;
}
</script>
将div的文本c1改为alex, console.log(nid.innerText); 显示标签内容
input内的值需要用.value获取
console.log(username.value,pwd.value);
<div>
<div id="num">1</div>
<input type="button" value="+1" onclik="Add();" />
</div>
<script type ="text/javascript">
var nid = document.getElementById('num');
var text = nid.innerText;
text = parseInt(text);
text += 1;
nid.innerText = text;
</script>
步骤：
1、找到num
2、获取内容
3、自增
1、事件
2、选择查找（选择器）
3、内容修改获取
innerText -标签中间文本内容
innerHTML-标签中间内容
特殊的：
input , select , textarea使用value获取值
--- 搜索框例子：
1、onfocus，onblur
2、选择搜索框。
3、获取搜索框内容 value
<body>
<input type="text" id="search" value="请输入关键字" onfocus="Focus();" onblur="Blur();" />
<script type="text/javascript">
function Focus(){
var nid=document.getElementById('search');
var value=nid.value;
if(value=="请输入关键字"){
nid.value="";
}
}
function(){
var nid=document.getElementById('search');
var value=nid.value;
if(!value.trim()){
nid.value = "请输入关键字"；
}
}
</script>
</body>
---- 创建标签：
<script>
//创建标签，添加到container中
var nid=document.getElementById('container');
var tag = "<input type='text' />"
container.insertAdjacentHTML('beforeBegin',tag)
</script>
var creatObj = documet.createElment('a');
createObj.href = "http://www.etiantian.org";
createObj.innerText = "老男孩教育";
var nid = document.getElementById('container');
nid.appendChild(createObj);
--- 设置标签属性：
nid.setAttribute('name','aaa')
getAttribute
delAttribute
---- 表单：
<body>
<form action="/tijiao" method="post">
<input name="query" type="text" />
<input type="submit" value="提交" />
</ form>
</body>
-- 页面刷新： window.location.reload()
-- 页面跳转： windows.location.href = "http://www.etiantian.org"
-- 定时器：
<script>
setInterval("操作"，“间隔”)
setInterval("alert('123')"，2000)
</script>
--- 筛选器：
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:eq(1)")
$('tr').eq(1)
num = input()
temp = "tr:eq("+ num +")"
$(temp)