JavaScript介绍
js分为三个部分：ECMAScript标准（js的基本语法）、DOM（文档对象模型）、BOM（浏览器对象模型）。
js是一种脚本语言，解释型语言。
JavaScript三种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
alert("我是第一种写法");
</script>
</head>
<body>
<input type="button" value="按钮" onclick="alert('我是第二种写法')"/>
<script language="JavaScript" src="test.js"></script>
</body>
</html>
test.js
alert("我是第三种写法");
变量和数据类型
js中声明变量都用var，js中字符串可以使用单引号，也可以使用双引号。
原始数据类型：
number、string、boolean、null、undefined、object
获取变量的数据类型(注意，null获取的类型为object)
typeof 变量名;//或者
typeof (变量名);
判断是不是数字（不是数字返回true）
isNaN(变量名);
判断字符串长度
字符串变量名.length
其他类型转为数字，Number最严格
parseInt("10");
parseFloat("10.02");
Number("10");
其他类型转为字符串
变量名.toString();//变量名一定要有意义
String(变量名);
其他类型转为布尔()
Boolean(变量);
注意:
==和===区别，==只进行值的比较，===对比值和类型。
注意:运算符先后顺序，先
&&，后||。
if语句
if(条件){
} else if(条件){
} else {
}
三元表达式
var 变量 = 表达式1 ? 表达式2 : 表达式3;
switch语句
switch (表达式){
case 值1:
代码1;
break;
case 值2:
代码2;
break;
...
default:
代码3;
break;
}
while循环(有可能一次都不执行)
while(循环的条件){
循环体;
计数器++;
}
do…while(至少执行一次)
do{
//循环体
}while(条件);
for循环
先执行表达式1，然后判断表达式2，如果不成立直接跳出循环。如果成立，执行循环体代码，结束后，跳到表达式3，然后判断表达式2。
for (表达式1; 表达式2; 表达式3) {
循环体;
}
for(var i = 0; i < 10; i++){
}
调试
alert();
console.log();
document.write("");
代码调试
数组
var arr1 = new Array();//空数组
var arr2 = new Array(5);//长度为5，每个值是undefined
var arr3 = [];//空数组
var arr4 = new Array(10,20,40,55,35);//5个值
var arr5 = [10,30,50,20,40];//5个值
设置某个位置的值
数组名[下标] = 值;
获取某个位置的值
var result = 数组名[下标];
获取数组长度
数组名.length
数组中存储的数据类型可以不一样。
从数组最后添加和删除数据：
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4
根据下标添加和删除元素
arr.splice(start,num,element1,.....,elementN)
参数解析：start：必需，开始删除的索引。num：可选，删除数组元素的个数。elementN：可选，在start索引位置要插入的新元素。
此方法会删除从start索引开始的num个元素，并将elementN参数插入到start索引位置。
var colors = ["red", "green", "blue"];
colors.splice(0,1); //删除第一项
alert(colors); //green,blue
colors.splice(1, 0, "yellow", "orange"); //从第一个索引位置插入两项数据
alert(colors); //green,yellow,organge,blue
colors.splice(1, 1, "red", "purple"); //删除一项，插入两项数据
alert(colors); //green,red,purple,orange,blue
函数
函数的定义
function 函数名(){
函数体
}
函数的调用
函数名();
函数的参数
function 函数名(参数名){
函数体
}
注意:参数不需要定义var。形参指函数定义时小括号中的变量。实参指函数在调用时候小括号中传入的值。形参和实参个数可以不一致。
函数的返回值
function getSum(x,y){
return x + y;
}
var result = getSum(10,30);
函数的数据类型是function
arguments对象伪数组
arguments可以获取传入的每个参数的值
function f1(){
arguments.length;
console.log(arguments)
}
f1(10,20,30,50);
匿名函数（函数表达式）
var f1 = function (){
console.log("dsds");
}
//匿名函数不能直接调用
f1();
函数的自调用（一次性）
(function (){
console.log("ddddds");
})();
函数作为参数（回调函数）
注意f2不要加括号
function f1(fn){
fn();
}
function f2(){
console.log("原来这样");
}
f1(f2);
函数作为返回值
注意ff();
function f1(){
console.log("原来");
return function (){
console.log("原来这样");
};
}
var ff = f1();
ff();
作用域
全局变量：用var声明的。可以在页面的任何位置使用。页面不关闭，全局变量不会释放，会占空间，消耗内存。
局部变量：函数function中定义的变量。外面不能使用。
块级作用域：一对大括号中声明的变量。在js中，括号外面也能使用块级作用域中的变量。函数除外。
全局作用域：全局变量的适用范围。
局部作用域：局部变量的适用范围。
隐式全局变量：声明变量没有用var。函数中声明的局部变量，函数外面不可以访问。函数中声明的隐式全局变量，函数外面可以访问。
全局变量不能被删除，隐式全局变量可以被删除。使用var是不会被删除，没有var是可以删除。
var num1 = 10;
num2 = 20;
delete num1;
delete num2;
console.log(typeof num1);//number
console.log(num1 + 10);//20
console.log(typeof num2);//underfine
预解析
变量的声明和函数的声明被提前了。
把变量的声明提前了。局部作用域中局部变量声明也会提前，只提前在局部作用域中。
console.log(num);//underfine
var num = 10;
函数的声明提前了。
f1();
function f1(){
console.log("dd");//dd
}
注意：
结果为underfine
f1();
var num = 20;
function f1(){
console.log(num);//underfine
}
结果为20
var num = 20;
function f1(){
console.log(num);//20
}
f1();
结果为underfine
var num = 20;
function f1(){
console.log(num);//underfine
var num = 30;
}
f1();
结果为一个报错，其余为9，因为b和c为隐式全局变量，a是局部变量。
f1();
console.log(c);
console.log(b);
console.log(a);//报错
function f1(){
var a = b = c = 9;
console.log(c);
console.log(b);
console.log(a);
结果为f1();报错，预解析f1是变量，调用f1();报错。
f1();
var f1 = function (){
console.log(a);
var a = 9;
}
创建对象
1、调用系统的构造函数创建对象
var people = new Object();
//添加属性
people.name = "小李";
people.age = 18;
//添加方法
people.eat = function(){
console.log("吃");
};
//调用
people.eat();
获取变量或者对象属于什么类型
instanceof
工厂模式创建对象
function createObject(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.say = function (){
console.log("我叫"+this.name+"，今年"+this.age);
};
return obj;
}
var person1 = createObject("小李",20);
person1.say();
2、自定义构造函数创建对象
函数和构造函数区别，首字母是不是大写
function Person(name,age){
this.name = name;
this.age = age;
this.say = function (){
console.log("我叫"+this.name+"，今年"+this.age);
};
}
var obj = new Person("小明",20);
console.log(obj.age);
obj.say();
3、字面量的方式创建对象
var obj = {
name : "jsop",
say : function (){
console.log("I am " + this.name);
}
};
obj.say();
JSON格式的数据遍历
访问属性的另一种写法：[""]
var obj = {
name : "jsop",
say : function (){
console.log("I am " + this.name);
}
};
obj.say();
遍历
var json = {
"name" : "jsop",
"age" : 18
};
for(var key in json){
console.log(key);
console.log(json[key]);
}
内置对象(系统提供的)
https://developer.mozilla.org/zh-CN/
Math
Math.random()//[0,1)范围
Date
var dt = new Date();//当前时间
console.log(dt.valueOf());//毫秒值
String
.replace("原来的字符串","新的字符串");
.slice(开始索引，结束索引)；//截取
.split();//切割
Array
.push(值);//给数组追加值，在最后添加，返回值是数组长度
.unshift();//给数组追加值，在最前添加，返回值是数组长度
.pop();//删除数组最后的值，返回删除的值
.shift();//删除数组第一个的值，返回删除的值
DOM-文档对象模型
文档：document
元素element：页面中的每个标签，都是一个元素，每个元素都可以看成是一个对象。
节点node：页面中所有的内容都是节点，包括标签，属性，文本。
根元素：html标签。
获取元素对象
document.getElementById("id")
<body>
<input type="button" value="显示" id="btn">
<script >
document.getElementById("btn").onclick = function (){
alert("哈哈");
};
</script>
</body>
document.getElementsByTagName("标签名")
返回一个伪数组
var pObjs = document.getElementsByTagName("p")
for (var i = 0; i < pObjs.length;i++){
pObjs[i].innerText = "哈哈哈";
}
和document.getElementsByTagName类似的有：document.getElementsByName获取的是name伪数组，document.getElementsByClassName获取的是class伪数组
document.getElementsByTagName–排他功能
<input type="button" value="显示" >
<input type="button" value="显示" >
<input type="button" value="显示" >
<input type="button" value="显示" >
<input type="button" value="显示" >
<input type="button" value="显示" >
<script >
var objs = document.getElementsByTagName("input")
for (var i = 0; i < objs.length;i++){
objs[i].onclick = function () {
for (var j = 0; j < objs.length;j++){
objs[j].value = "显示";
}
this.value= "点击";
};
}
</script>
根据选择器的方式获取元素
<input type="button" value="show" id="btn" class="cls"/>
<script >
document.querySelector("#btn").onclick = function(){
alert("哈哈");
};
var objs = document.querySelectorAll("cls");//伪数组
</script>
小结
根据id属性的值获取元素，返回来的是一个元素对象document.getELementById("id属性的值");
根据标签名字获取元素，返回来的是一个伪数组，里面保存了多个的DOM对象document.getELementsByTagName("标签名字");
下面的几个，有的浏览器不支持
根据name属性的值获取元素，返回来的是一个伪数组，里面保存了多个的DOM对象document.getELementsByName ("name属性的值")
根据类样式的名字来获取元素，返回来的是一个伪数组，里面保存了多个的DOM对象document.getELementsByClassName("类样式的名字")根据选择器获取元素，返回来的是一个元素对象document.querySelector( "选择器的名字");
对象属性
class设置使用className
document.getElementById("dd").className = "cls";
获取body、title、html
document.body
document.title
document.documentElement
阻止超链接跳转
<a href="http://www.baidu.com" id="ak">百度</a>
<script >
document.getElementById("ak").onclick = function (){
alert("哈啊哈");
return false;
};
</script>
鼠标进入和离开
.onmouseover
.onmouseout
文本框获取焦点和失去焦点
.onfocus
.onblur
键盘弹起
.onkeyup
获取输入框输入长度value.length
<input type="text" value="" id="txt"/>
<script >
document.getElementById("txt").onblur = function(){
alert(this.value.length);
};
</script>
innerText和textContent、innerHTML
凡是成对的标签，设置文本内容，都使用innerText属性,同样，获取文本内容是.innerText。
document.getElementById("p1").innerText="这是设置文本p";
单数不兼容。innerText：谷歌，火狐支持，IE8不支持；textContent：谷歌，火狐，IE8都支持。
封装
//设置
function setInnerText(element,text){
if(typeof element.textContent == "underfined"){//不支持
element.innerText = text;
} else{//支持
lement.textContent = text;
}
}
//获取
function getInnerText(element){
if(typeof element.textContent == "underfined") {//不支持
return element.innerText;
} else{//支持
return element.textContent;
}
}
innerText和innerHTML都可以设置设置文本，innerHTML还可以设置标签。
innerText可以获取标签中的文本，但是标签中还有标签，那么最里面的标签文本内容也能获取。innerHTML可以获取标签中的所有文本，包括标签。
.innerHTML = "haha";
.innerHTML = "<p>这是p</p>>";
自定义属性
自定义属性获取：getAttribute。自定义属性动态设置：setAttribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
list-style: none;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
<script >
var list = document.getElementsByTagName("li");
for(var i = 0; i < list.length; i ++){
list[i].setAttribute("score",(i+1)*10);
list[i].onclick = function(){
alert(this.getAttribute("score"));
};
}
</script>
</body>
</html>
移除自定义属性
.removeAttribute("name")
移除class
.removeAttribute("class");
设置backgroundImage
.style.backgroundImage = "url(" + src + ")";
节点
节点的类型
nodeType:1、标签，2、属性，3、文本。
节点的名字
nodeName:标签节点：大写的标签名字；属性节点：小写的属性名字；文本节点：#text
节点的值
nodeValue:标签节点：null;属性节点：属性值；文本节点：文本内容。
获取父节点和父元素
.parentNode
.parentElement
子节点和子元素
.childNodes
.children
第一个子节点和子元素
.firstChild//IE8是元素
.firstElementChild//IE8不支持
最后一个子节点和子元素
.lastChild//IE8是元素
.lastElementChild//IE8不支持
某元素的前一个兄弟节点和元素
.previousSibling//IE8是元素
.previousElementSlbling//IE8不支持
某元素的后一个兄弟节点和元素
.nextSibling//IE8是元素
.nextElementSlbling//IE8不支持
获取节点
.getAttributeNode("属性名");
元素的创建
三种方式
1、document.write("标签的代码及内容")
缺陷：如果是在页面加载完毕后，通过这种方式创建的，页面上存在的所有的内容全部被干掉。
2、对象.innerHTML = "标签及代码"
3、document.createElement("标签的名字")
注意：要追加到父级元素，appendChild
<input type="button" value="追加" id="btn"/>
<div id="dv"></div>
<script >
document.getElementById("btn").onclick = function (){
var pObj = document.createElement("P");
pObj.innerText = "这是p";
document.getElementById("dv").appendChild(pObj);
};
</script>
把新的子元素插到第一个子元素前面
.insertBefore(新元素，旧元素);
移除父级元素中的第一个元素
.removeChild(父元素对象.firstElementChild);
移除父级元素中的所有元素
while(父元素对象.firstElementChild){
.removeChild(父元素对象.firstElementChild);
}
createElement只创建一个元素
<input type="button" value="追加" id="btn"/>
<div id="dv"></div>
<script >
document.getElementById("btn").onclick = function (){
if(!document.getElementById("dv").firstElementChild){
var pObj = document.createElement("P");
pObj.innerText = "这是p";
document.getElementById("dv").appendChild(pObj);
}
};
</script>
元素绑定多个事件.addEventListener和.attachEvent
<input type="button" value="多个事件" id="btn"/>
<script >
document.getElementById("btn").addEventListener("click",function(){
console.log("哈哈");
},false);
document.getElementById("btn").addEventListener("click",function(){
console.log("嘻嘻");
},false);
</script>
兼容性.addEventListener支持谷歌火狐，.attachEvent支持IE
function commonAddEventListener(element,type,fn){
if(element.addEventListener()){
element.addEventListener(type,fn,false);
} else if (element.attachEvent()){
element.attachEvent("on" + type,fn);
} else{
element["on" + type] = fn;
}
}
addEventListener和attachEvent都可以为元素绑定事件。它们的不同点有：参数个数不一样；addEventListener中事件类型没有on,attachEvent中事件类型有on;addEventListener中this指当前绑定的事件，attachEvent中this指window。
元素解绑事件
解绑onclick、addEventListener、attachEvent
.onclick = null;
.removeEventListener("click","解绑函数名",false);
.detachEvent("onclick","解绑函数名");
事件冒泡
指多个元素嵌套，有层次关系，这些元素都注册了相同事件，如果里面的元素事件触发了，那么外面的元素的该事件自动的触发了。
阻止事件冒泡
window.event.cancelBubble = true;//谷歌和IE支持，火狐不支持
window.event.stopPropagation();//谷歌和火狐支持，IE不支持
事件的三个阶段
addEventListener第三个参数控制事件阶段的。
1、事件的捕获阶段，从外向内。
2、事件的目标阶段，
.eventPhase
3、事件的冒泡阶段，从内向外。
为同一个元素绑定多个不同事件，指定的是同一个事件处理函数
.onclick = f;
.onmouseover = f;
.onmouseout = f;
function f (e){
switch (e.type){
case "click":
break;
case "mouseover":
break;
case "mouseout":
break;
}
}
BOM
浏览器对象模型。
window:浏览器的顶级对象；
document:页面中的顶级对象。
页面中的所用内容都是属于浏览器的，页面中的内容也都是window的。
alert()
prompt()
confirm()
onload
onload使用
window.onload = function(){
document.getElementById("btn").onclick = function (){
};
};
onunload页面关闭后触发的事件；onbeforeunload页面关闭前触发的事件(IE8支持)。
location
属性
window.location.hash//#及后面内容
window.location.host//主机名及端口号
window.location.hostname//主机名
window.location.pathname//路径
window.location.port//端口号
window.location.protocol//协议，http
window.location.search//？及后面内容
方法
window.location.href = "设置跳转页面地址";//可后退
window.location.assign("设置跳转页面地址");//可后退
window.location.reload();//刷新，重新加载
window.location.replace("设置跳转页面地址");//不可后退
history
window.history.back();
window.history.forward();
window.history.go();//整数和负数代表前进和后退
navigator
window.navigator.platform//判断浏览器所在的系统平台类型
window.navigator.userAgent
定时器
js 定时器有两种创建方式：setTimeout和setInterval。
//以指定的时间间隔（以毫秒计）调用一次函数的定时器
setTimeout(func[, delay, param1, param2, ...])
//以指定的时间间隔（以毫秒计）重复调用一个函数的定时器
setInterval(func[, delay, param1, param2, ...])
setTimeout函数的参数说明:func, 表示定时器要执行的函数名；delay, 表示时间间隔，默认是0，单位是毫秒；param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。
setInterval函数的参数说明:func , 表示定时器要执行的函数名;delay, 表示时间间隔，默认是0，单位是毫秒;param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。
反复执行
var timeId = window.setInterval(function(){},1000);//设置定时
window.clearInterval(timeId);//停止定时
一次性定时器
var timeId = window.setTimeout(function(){},1000);
clearTimeout(timeId);//清除定时缓存空间
offset
获取元素的宽和高（包含边框）
.offsetWidth;//数字类型，没有px
.offsetHeight;
获取元素的left和top，
.offsetLeft;
.offsetTop;
注意：
没有脱离文档流时，和父级元素的margin、padding、border，自己的margin，有关系。脱离文档流时，和自己的margin、left，有关系。
scroll
元素中内容实际的宽和高，不包含边框，没有内容，就是宽高
.scrollWidth;
.scrollHeight;
向左或者向上卷曲出去的距离
.scrollLeft;
.scrollTop;
滚动事件
.onscroll
滚动距离计算
var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var left = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
client
可视区域（没有边框）边框内的宽高
.clientWidth;
.clientHeight;
左边框和上边框的宽度
.clientLeft;
.clientTop;
获取元素的样式属性值
window.getComputedStyle(元素对象,null).属性;//谷歌，火狐
元素对象.currentStyle.属性;//IE8
兼容代码
function getStyle(element,attr){
if(window.getComputedStyle){
return window.getComputedStyle(element,attr)[attr];//谷歌，火狐
} else{
return element.currentStyle[attr];
}
}
其他
透明度
.style.opacity =
jQuery
介绍
jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery极大地简化了JavaScript编程。
jQuery的作用和JavaScript一样，都是负责网页和用户的交互效果。jQuery的优点就是兼容主流浏览器，代码编写更加简单。
用法
引入
<script src="js/jquery-1.12.4.min.js"></script>
使用js获取标签元素，需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素，而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的 window.onload 更快。
入口函数示例代码:
<script src="js/jquery-1.12.4.min.js"></script>
<script>
window.onload = function(){
var oDiv = document.getElementById('div01');
alert('原生就是获取的div：' + oDiv);
};
$(document).ready(function(){
var $div = $('#div01');
alert('jquery获取的div：' + $div);
});
</script>
<div id="div01">这是一个div</div>
入口函数的简写示例代码:
// 上面ready的写法可以简写成下面的形式：
$(function(){
var $div = $('#div01');
alert('jquery获取的div：' + $div);
});
选择器
选择器就是快速选择标签元素，获取标签的，选择规则和css样式一样。
标签选择器、类选择器、id选择器、层级选择器、属性选择器，示例代码:
$('#myId') //选择id为myId的标签
$('.myClass') // 选择class为myClass的标签
$('li') //选择所有的li标签
$('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签
$('input[name=first]') // 选择name属性等于first的input标签
可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功，否则选择失败。
$(function(){
result = $("div").length;
alert(result);
});
选择集过滤
选择集过滤就是在选择标签的集合里面过滤自己需要的标签。
选择集过滤的操作：has(选择器名称)方法，表示选取包含指定选择器的标签；eq(索引)方法，表示选取指定索引的标签。
has方法的示例代码:
<script>
$(function(){
// has方法的使用
var $div = $("div").has("#mytext");
// 设置样式
$div.css({"background":"red"});
});
</script>
<div>
这是第一个div
<input type="text" id="mytext">
</div>
<div>
这是第二个div
<input type="text">
<input type="button">
</div>
eq方法的示例代码:
<script>
$(function(){
// has方法的使用
var $div = $("div").has("#mytext");
// 设置样式
$div.css({"background":"red"});
// eq方法的使用
var $div = $("div").eq(1);
// 设置样式
$div.css({"background":"yellow"});
});
</script>
<div>
这是第一个div
<input type="text" id="mytext">
</div>
<div>
这是第二个div
<input type="text">
<input type="button">
</div>
选择集转移
选择集转移就是以选择的标签为参照，然后获取转移后的标签。
选择集转移操作：
$('#box').prev(); 表示选择id是box元素的上一个的同级元素
$('#box').prevAll(); 表示选择id是box元素的上面所有的同级元素
$('#box').next(); 表示选择id是box元素的下一个的同级元素
$('#box').nextAll(); 表示选择id是box元素的下面所有的同级元素
$('#box').parent(); 表示选择id是box元素的父元素
$('#box').children(); 表示选择id是box元素的所有子元素
$('#box').siblings(); 表示选择id是box元素的其它同级元素
$('#box').find('.myClass'); 表示选择id是box元素的class等于myClass的元素
获取和设置元素内容
jquery中的html方法可以获取和设置标签的html内容。
<script>
$(function(){
var $div = $("#div1");
// 获取标签的html内容
var result = $div.html();
alert(result);
// 设置标签的html内容，之前的内容会清除
$div.html("<span style='color:red'>你好</span>");
// 追加html内容
$div.append("<span style='color:red'>你好</span>");
});
</script>
<div id="div1">
<p>hello</p>
</div>
获取和设置元素属性
使用css方法可以给标签设置样式属性，那么设置标签的其它属性可以使用prop方法了。
<style>
.a01{
color:red;
}
</style>
<script>
$(function(){
var $a = $("#link01");
var $input = $('#input01')
// 获取元素属性
var sId = $a.prop("id");
alert(sId);
// 设置元素属性
$a.prop({"href":"http://www.baidu.com","title":'这是去到百度的链接',"class":"a01"});
// 获取value属性
// var sValue = $input.prop("value");
// alert(sValue);
// 获取value属性使用val()方法的简写方式
var sValue = $input.val();
alert(sValue);
// 设置value值
$input.val("222222");
})
</script>
<a id="link01">这是一个链接</a>
<input type="text" id="input01" value="111111">
jQuery事件
常用事件
click() 鼠标单击
blur() 元素失去焦点
focus() 元素获得焦点
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
ready() DOM加载完成
示例代码:
<script>
$(function(){
var $li = $('.list li');
var $button = $('#button1')
var $text = $("#text1");
var $div = $("#div1")
// 鼠标点击
$li.click(function(){
// this指的是当前发生事件的对象，但是它是一个原生js对象
// this.style.background = 'red';
// $(this) 指的是当前发生事件的jquery对象
$(this).css({'background':'gold'});
// 获取jquery对象的索引值,通过index() 方法
alert($(this).index());
});
// 一般和按钮配合使用
$button.click(function(){
alert($text.val());
});
// 获取焦点
$text.focus(function(){
$(this).css({'background':'red'});
});
// 失去焦点
$text.blur(function(){
$(this).css({'background':'white'});
});
// 鼠标进入
$div.mouseover(function(){
$(this).css({'background':'gold'});
});
// 鼠标离开
$div.mouseout(function() {
$(this).css({'background':'white'});
});
});
</script>
<div id="div1">
<ul class="list">
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
<input type="text" id="text1">
<input type="button" id="button1" value="点击">
</div>
事件代理
事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
事件冒泡代码:当点击子元素div，它的点击事件会向它父元素传递，也会触发了父元素的点击事件，这就是事件冒泡。
<script>
$(function(){
var $div1 = $('#div1');
var $div2 = $('#div2');
$div1.click(function(){
alert($(this).html());
});
$div2.click(function(){
alert($(this).html());
});
});
</script>
<div id="div1" style="width:200px; height:200px; background: red;">
<div id="div2" style="width:100px; height:100px;background: yellow;">
哈哈
</div>
</div>
事件代理的使用，一般绑定事件的写法:
$(function(){
$ali = $('#list li');
$ali.click(function() {
$(this).css({background:'red'});
});
})
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
事件代理的写法
$(function(){
$list = $('#list');
// 父元素ul 来代理 子元素li的点击事件
$list.delegate('li', 'click', function() {
// $(this)表示当前点击的子元素对象
$(this).css({background:'red'});
});
})
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
delegate方法参数说明:
delegate(childSelector,event,function)
//childSelector: 子元素的选择器
//event: 事件名称，比如: 'click'
//function: 当事件触发执行的函数
JavaScript对象
JavaScript中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象，此外，JavaScript 允许自定义对象，对象可以拥有属性和方法。
创建自定义javascript对象有两种方式:通过顶级Object类型来实例化一个对象;通过对象字面量创建一个对象。
Object类创建对象的示例代码:
<script>
var person = new Object();
// 添加属性：
person.name = 'tom';
person.age = '25';
// 添加方法：
person.sayName = function(){
alert(this.name);
}
// 调用属性和方法：
alert(person.age);
person.sayName();
</script>
对象字面量创建对象的示例代码:
<script>
var person2 = {
name:'Rose',
age: 18,
sayName:function(){
alert('My name is' + this.name);
}
}
// 调用属性和方法：
alert(person2.age);
person2.sayName();
</script>
json数据
json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象。
示例代码:
var sJson = '{"name":"tom","age":18}';
var oPerson = JSON.parse(sJson);
// 操作属性
alert(oPerson.name);
alert(oPerson.age);
ajax
ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，当前端页面想和后台服务器进行数据交互就可以使用ajax了。
jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。
示例代码:
<script>
$.ajax({
// 1.url 请求地址
url:'http://t.weather.sojson.com/api/weather/city/101010100',
// 2.type 请求方式，默认是'GET'，常用的还有'POST'
type:'GET',
// 3.dataType 设置返回的数据格式，常用的是'json'格式
dataType:'JSON',
// 4.data 设置发送给服务器的数据, 没有参数不需要设置
// 5.success 设置请求成功后的回调函数
success:function (response) {
console.log(response);
},
// 6.error 设置请求失败后的回调函数
error:function () {
alert("请求失败,请稍后再试!");
},
// 7.async 设置是否异步，默认值是'true'，表示异步，一般不用写
async:true
});
</script>
同步和异步说明：同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。异步是多个ajax同时请求，不需要等待其它ajax请求完成，好比线程异步。
$.ajax按照请求方式可以简写成$.get或者$.post方式。示例代码:
<script>
$(function(){
/*
1. url 请求地址
2. data 设置发送给服务器的数据, 没有参数不需要设置
3. success 设置请求成功后的回调函数
4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
*/
$.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
console.log(dat);
console.log(status);
alert(dat);
}).error(function(){
alert("网络异常");
});
/*
1. url 请求地址
2. data 设置发送给服务器的数据, 没有参数不需要设置
3. success 设置请求成功后的回调函数
4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
*/
$.post("test.php", {"func": "getNameAndTime"}, function(data){
alert(data.name);
console.log(data.time);
}, "json").error(function(){
alert("网络异常");
});
});
</script>
