day13主要内容：JavaScript、DOM、jQuery
武Sir blog:http://www.cnblogs.com/wupeiqi/articles/5369773.html
JavaScript
JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。
1. JavaScript代码存在形式
<!-- 形式一 -->
<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实现特效慢而已。
3. 变量
//全局变量:可以在脚本中的任何位置被引用。 name = "Alex" //局部变量：只存在于声明它的那个函数内部。 var name = "Alex" 良好的编程习惯应该是，在第一次对某个变量赋值时应该用var对其作出声明。在函数内部使用变量时，更应该如此。
4. 基本数据类型
4.1 数值（Number）
var page = 111;
var age = Number(18);
var a1 = 1,a2 = 2, a3 = 3;
parseInt("1.2"); //转换成int类型
parseFloat("1.2"); //转换成float类型
4.2 字符串(String)
var name = "Alex";
var name = String("Alex");
var ageStr = String(18);
常用方法：
obj.trim() //去除空格
obj.charAt(index) //指定索引位
obj.substring(start,end) //切片
obj.indexOf(char) //求索引值
obj.length //长度
4.3 布尔值(Boolean)
var status = true; var status = false; var status = Boolen(1==1)
4.4 数组(Array)
var names = ['alex', 'john', 'eric']
var names = Array('alex', 'john', '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 = Array();items["name"] = "computer";items["year"] = 2000；items["running"] = false;不推荐这样使用。本质上，在创建关联数组时，你创建的是Array对象的属性。在JavaScript中，所有的变量实际上都是某种类型的对象。因此，理想状态下，不应该修改Array对象的属性，而应该使用通用的对象（Object）来表达这种情形。
4.5 对象（Object）
与数组类似，对象也是使用一个名字表示一组值。对象的每个值都是对象的一个属性。
var person = new Object; persion.name = "Alex"; persion.age = 18;
类似于Python的字典类型?
//这里的persion是一个对像，类似于Python中的字典？
var persion = {'name': "Alex", 'age': 18};
console.log(persion.name);
console.log(persion.age);
4.6 undefined
undefined表示未定义值，即表示变量不含有值。
4.7 null
null是一个特殊值，可以通过将null赋值给变量来清空该变量。
5. 循环语句
var num = 2;
//循环
console.log("For循环：");
nameArray = ["Alex", "John", "Eric"];
//一种循环数组的方法
for(var i=0;i<nameArray.length;i++){
console.log(i);
console.log(nameArray[i]);
}
//另外一种循环数组的方法
for(var inx in nameArray){
console.log(inx);
console.log(nameArray[inx]);
}
console.log("While循环：");var num = 1;while(i < 10){ console.log(num); num++;}
console.log("do while循环:");var num = 1;do { console.log(num); num++;} while (num < 10);
//continue和break
while (num < 10){
if (num == 5){
num ++;
continue; //跳过本次循环
}
if (num == 7){
break; //跳出循环
}
console.log(num);
num ++;
}
6. 条件语句
var num = 2;
//条件判断
console.log("if条件判断:");
if(num == 1){
console.log("num=1");
}else if (num == 2){
console.log("num=2");
}else if (num == 3){
console.log("num=3");
}else {
console.log("unknown num!");
}
//switch判断
console.log("switch判断：");
switch (num){
case 1:
console.log("num=1");
break;
case 2:
console.log("num=2");
break;
case 3:
console.log("num=3");
break;
default:
console.log("unknown num!");
}
7. 异常处理
var num = 2;
//异常处理
console.log("异常处理:");
try{
console.log(num=2);
}catch(e){
console.log(e);
}finally {
console.log("finally do something...");
}
8. 函数
//函数声明
function func1(arg){
console.log(arg);
return "alex";
}
var ret = func1("1111");
console.log(ret);
//匿名函数
var f = function(arg){
console.log("1111", arg);
};
f("2222");
//自执行函数
(function (arg){
console.log(arg);
})("123");
JavaScript 内嵌函数:
所有函数都能访问全局变量。
实际上，在 JavaScript 中，所有函数都能访问它们上一层的作用域。
JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。
该实例中，内嵌函数 plus() 可以访问父函数的 counter 变量：
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
JavaScript 闭包:
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
计数器受匿名函数的作用域保护，只能通过 add 方法修改。
9. 面向对象
//面向对象
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 ret1 = obj.Func("humor");
console.log(ret1);
DOM
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
注：一般说的JS让页面动起来泛指JavaScript和Dom
1. 选择器
document.getElementById('id');
document.getElementsByName('name');
document.getElementsByTagName('tagname');
2. 内容
innerText
innerHTML
var obj = document.getElementById('nid')
obj.innerText # 获取文本内容
obj.innerText = "hello" # 设置文本内容
obj.innerHTML # 获取HTML内容
obj.innerHTML = "<h1>q1mi</h1>" # 设置HTML内容
特殊的：
input系列
textarea标签
select标签
value属性操作用户输入和选择的值
3. 创建标签
方式一：
var obj = document.createElement('a');
obj.href = "http://www.liwenzhou.com;
obj.innerText = "q1mi";
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. 标签属性
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. 提交表单
document.geElementById('form').submit()
6. 事件
7. 特殊
window.onload = function(){}
//jQuery：$(document).ready(function(){})
//onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。图片还么有渲染，就可以进行事件的执行。
特殊参数：this，event
8. 其他
console.log()
alert()
confirm()
// URL和刷新
location.href
location.href = "url" window.location.reload()
// 定时器
setInterval("alert()",2000);
clearInterval(obj)
setTimeout();
clearTimeout(obj)
jQuery
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。
http://www.php100.com/manual/jquery/
参考：http://www.runoob.com/jquery/jquery-tutorial.html
jQuery 安装
网页中添加 jQuery
可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：
从 jquery.com 下载 jQuery 库
从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
下载 jQuery
有两个版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
以上两个版本都可以从 jquery.com 中下载。
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：
<script src="jquery-2.2.3.js"></script>
提示： 将下载的文件放在网页的同一目录下，就可以使用jQuery。
替代方案
如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。
百度、新浪、谷歌和微软的服务器都存有 jQuery 。
如果站点用户是国内的，建议使用百度、新浪等国内CDN地址，如果站点用户是国外的可以使用谷歌和微软。
例如从谷歌引用 jQuery，使用以下代码：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪事件
为了防止文档在完全加载（就绪）之前就运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
① 试图隐藏一个不存在的元素
② 获得未完全加载的图像的大小
以下两种方式可以实现文档就绪后再执行jQuery方法：
1.
$(document).ready(function(){
// jQuery methods go here...
});
2.
$(function(){
// jQuery methods go here...
});
jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
$("p")
#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
$("#test")
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：
$(".test")
更多实例
注意：为了 jQuery 函数易于维护，应该把 jQuery 函数放到独立的 .js 文件中。
jQuery 事件
jQuery 是为事件处理特别设计的。
什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：
①在元素上移动鼠标。
②选取单选按钮
③点击元素
在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。
常见 DOM 事件：
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$("p").click();
定义一个触发事件：
$("p").click(function(){
// action goes here!!
});
常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTMl 元素时执行。
在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：
$("p").click(function(){
$(this).hide();
});
dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
blur()
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});