jq的简单操作

1.选择器

• css3语法选择器

$('css3选择器位')
li:even 偶数位  //所有的li的偶数位对象
li:odd 奇数位  //所有的li的奇数位对象

• 索引匹配

$('div:eq(0)')
$('div').eq(0)
$("ul")页面中的所有ul, 取第n个ul
$("ul")[n] => 得到第n索引位js对象, 本非jq对象
$("ul").eq(n)  => 得到第n索引位jq对象
$("ul:eq(n))" => 得到第n索引位jq对象

• 内容

$('div:contains(标签文本内容)')
// 注: 采用模糊匹配

2.属性操作

• 文本

// 赋值: 有参数
$('.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', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1611571505,2177664062&fm=26&gp=0.jpg')
// 增
$('img').attr('abc', function () {
    return "ABC";
})

• 类名

$(this).addClass('active'); // 添加
$(this).removeClass('box');  // 删除
// 如果有active 删除, 反之添加
$(this).toggleClass('active');  // 切换

3.css样式设置

// 取值

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

// 设值

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

    .css({  // 设置多个属性值

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

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

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

        '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);

        }

        return oldWidth;

})

4.事件

• 绑定方式

// 第一种 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标签

5.动画

• 系统预定义

// 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动画