jQuery
1.动画
animate参数：参数一：要改变的样式属性值，写成字典的形式
参数二：动画持续的时间，单位为毫秒，一般不写单位
参数三：动画曲线，默认为'swing'，缓冲运动，还可以设置为‘linear’，匀速运动
参数四：动画回调函数，动画完成后执行的匿名函数
$('#div1').animate({要改变的属性值
},动画持续时间,动画的效果,function(){
动画执行完成之后调用的代码
});
jquery定义好的一些动画效果:
fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
使用方式:
$('div').fadeIn()
2.jquery 属性操作
html ( ),取出对象的内容// 取出html内容
var $htm = $('#div1').html();
// 设置html内容 # 修改
$('#div1').html('<span>添加文字</span>');
val( ),一般用来提取 input 里的内容
<label for="int">用户名：</label> # 点击用户名，光标也可以进入框里
<input type="text" id="int" >
// 取出html内容
var val = $("input").val();
// 设置html内容 # 修改
$("input").val("Hello World");
prop()取出或设置某个属性的值
这里的属性是指标签除 css（就是style里面的）样式以外的其他属性
用css()来获取
// 取出图片的地址 # 获取
var $src = $('#img1').prop('src');
var $src = $('#img1').prop(属性名);
// 设置图片的地址和alt属性 # 修改属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });
3.常见的事件类型
blur() 元素失去焦点 （光标消失）focus() 元素获得焦点 （显示光标）
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
submit() 用户递交表单
stop()用法，表示阻止记录的次数，只记录最后一次，例如
$div.mouseover(function(){
$div.stop().animate({'margin-top':'100px'})
hover(函数1为鼠标进入，函数2为鼠标离开)，例如，
$div.hover(function(){
$div.animate({'margin-top':'100px'})
},function(){
$div.animate({'margin-top':'0px'})
})
submit() <input type="sunmit"> ,例如
$('form').submit(function(){
alert('submit')
return false
4.正则表达式
定义形式:var re = new RegExp('规则', '可选参数');
var re = /规则/参数; # 用这种正则形式
使用 :
var result = re.test(要测试的字符串)
修饰参数
g： global: 全文搜索，默认搜索到第一个结果接停止
i： ingore case: 忽略大小写，默认大小写敏感
常用函数 test
使用方法：正则.test(字符串)
// 匹配成功，就返回真(true)，否则就返回假(false)
常用的匹配规则:
// 用户名验证：(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;
// 邮箱验证：
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
// 密码验证：
var rePass = /^[\w!@#$%^&*]{6,20}$/;
5.事件冒泡
阻止事件冒泡: event.stopPropagation();阻止默认行为: event.preventDefault();
防止事件冒泡，事件函数里面加一个return fale
合并写法：
return false;
$('.son').click(function(event){
alert('son')
return false # 该事件，不会上传到父级
6.事件委托( 代理 )
第一个参数: 请求委托的对象第二个参数: 请求委托的事件类型
第三个参数: 请求委托的处理方式(回调函数)
$ul.delegate('li', 'click', function() {
$(this).css({background:'red'}); # 点击的还是子级
}); # 父级包含子级，父级是代理人，子级是委托人
7.Dom操作
append( ) 在元素内部添加，从后面放入$div.append($span), $div.append($(str))
appendTo( ) 在元素内部添加，从后面放入
$('<em>哈哈哈,斜体</em>').appendTo($div2)
prepend( ) 在元素内部添加，从前面放入
$div1.prepend('<a href="#">a标签</a>')
prependTo( ) 在元素内部添加，从前面放入
$('<a href="#">a标签</a>').prependTo($div1)
after( ) 在元素外部添加，从后面放入
$div1.after("<em>哈哈,斜体</em>")
$div1.after($div2)
insertAfter( )：在元素外部添加，从后面放入
$('<em>哈哈,斜体</em>').insertAfter($div1)
before( ) 在被选元素前插入指定的内容。
$div1.before("<em>哈哈,斜体</em>")
insertBefore( ) 在您指定的已有节点之前插入新的节点。
$('<em>哈哈,斜体</em>').insertBefore($div1)
删除 $div.remove()
创建新的标签 var $div = $('<div>'); //创建一个空的div
8.js 对象
常用方法:创建:
var person = new Object();
添加属性：
person.name = 'tom';
person.age = '25';
添加方法：
person.sayName = function(){
alert(this.name);
}
调用属性和方法：
alert(person.age);
person.sayName();
第二种创建形式: (常用)
var person2 = {
name:'Rose',
age: 18,
sayName(函数名):function(){
alert('My name is' + this.name);
}
}
调用属性和方法：
alert(person2.age);
person2.sayName(); # 调用函数
9.Json
{"name":"jack",
"age":29,
"hobby":["reading","travel","photography"]
"school":{
"name":"Merrimack College",
"location":'North Andover, MA'
}
}
特点:
1.类似对象,但是里面没有方法
2.里面的key和value值,只要是字符串都需要加双引号,数字不用
3.json 内部可以包含别的 json 或者是数组
10.ajax&jsonp
同步: 一件一件事情按照顺序来做 （串联）异步: 开辟多条线路, 同时做多件事情 （并联）
局部刷新: ajax 可以实现局部刷新功能, 局部刷新也叫作无刷新
数据接口: 就是后台提供的一个url地址
使用方法:
$.ajax({
url:'请求地址',
type: '请求方式: 默认是'GET'，常用的还有'POST' ',
dataType: '设置返回的数据格式，常用的是'json'格式，也可以设置为'html' ',
data: '设置发送给服务器的数据',
success: '设置请求成功后的回调函数',
error: '设置请求失败后的回调函数',
async: '设置是否异步，默认值是'true'，表示异步'
})
现在常用的ajax写法:
$.ajax({
url: '/change_data',
type: 'GET',
dataType: 'json',
data:{'code':300268}
})
.done(function(dat) {
alert(dat.name); # success
})
.fail(function() {
alert('服务器超时，请重试！');
}); # error
$.ajax({
url:'https://api.douban.com/v2/movie/in_theaters?start=0&count=10',
type:'GET',
dataType:'jsonp'
}).done(function(data){ # success
console.log(data) # 定义一个形参来接收成功时，传来的数据
}).fail(function(error){ # error
// alert(error)
console.log(error) # 定义一个形参来接收失败时，传来的数据
})
jsonp:
ajax 只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到 jsonp 技术，jsonp 可以跨域请求数据，它的原理主要是利用了<script>标签可以跨域链接资源的特性。jsonp 和 ajax 原理完全不一样，不过 jquery 将它们封装成同一个函数。