jq操作

　　一.选择器

　　css3语法选择器

　　$('css选择器位')

　　索引匹配

　　$('div:eq(0)')

　　$('div').eq(0)

　　内容

　　$('div:contains(标签文本内容)')

　　// 注:采用模糊匹配

　　二.属性操作

　　// 赋值: 有参数

　　$('.box').html('<i>beat box</i>');

　　// 取值: 无参数

　　console.log($('box').text());

　　// 表单内容

　　// $('.inp').val('input 内容 为 value');

　　console.log($('.inp').val());

　　属性

　　// 取

　　console.log($('img').attr('alt'));

　　// 设

　　$('img')attr('src'.'fasfdas')

　　// 增

　　$('img').attr('abc',function() {

　　    return "ABC";

　　})

　　类名

　　$(this).addClass('active');　　//添加

　　$(this).removeClass('box');　　//删除

　　// 如果有active 删除, 反之添加

　　$(this).toggleClass('active');　　//切换

　　三.css样式设置

　　// 取值

　　console.log($('.box').css('font-size'));

　　// 设置

　　$('.box').css('color','deeppink')　　//单一属性设值

　　　　.css ({

　　　　//设置多个属性值

　　　　//1.就是给css()函数赋值一个js对象

　　　　//2.key为字符串类型,可以省略"",前提要使用js语法,小驼峰命名法

　　　　// 3.属性值为数值+单位方式,可以省略单位,尽量全部用字符串数据复制

　　　　 '300px',

　　　　height: 300,

　　　　'background-color':'cyan',

　　　　borderRadius: '30px'

　　})

　　　　.css('width',function(index,oldwidth) {

　　　　//逻辑单一属性设值

　　　　if (index == 0) {

　　　　// 延迟1s

　　　　// var b_time = new Date().getTime();

　　　　// while (new Date(),getTime() - b_time < 1000) {}

　　　　return 1.5 * parseInt(oldwidth);

　　}

　　})

　　四.事件

　　绑定方式

　　// 第一种 on

　　// 四个参数: 事件名, 委派的自己, {key-value传入的数据},事件回调函数

　　$('.box').on('click','span',{name:'hehe'},function(ev) {})

　　// 第二种

　　// 两个参数: {key-value传入的数据},事件回调函数

　　$('.box').click({name:'hehe'},function(ev){})

　　事件对象

　　// 为jq事件对象,兼容js事件对象

　　// 坐标: ev.clientX | ev.clientY

　　// 按键: ev.keyCode

　　// 数据: ev.data.key名  => eg:ev.data.name

　　冒泡与默认动作

　　// 冒泡: ev.stopPropagation();

　　// 默认动作: ev.preventDefault();

　　委派

　　$('.box').on('click','span',{name:'hehe'},function(ev){})

　　// 注: 通过父级box来绑定点击事件,其实将事件委派给其子级span标签

　　五.动画

　　系统预定义

　　// time_num: 动画持续的时间

　　// finish_fn: 动画结束后的回调函数

　　// 1.hide(time_num, finish_fn) | show(time_num, finish_fn) | toggle(time_num, finish_fn)

　　// 2.slideUp() | slideDown() | slideToggle() 参数同上

　　// 3. fadeOut() | fadeIn() | fadeTo() | fadeToggle()　　参数同上

　　自定义动画

　　// 参数: 做动画的样式们 {}, 动画持续事件,运动曲线,动画结束后的回调函数

　　animate({

　　　　 300,

　　　　height: 500

　　}, 300, 'linear', function() {

　　// 动画结束后回调

})

// 动画本体采用的是css动画