JQ高级

1.选择器

$('.box'),('')里面为css3选择器

$('.box:even') , :even用来查找索引为偶数位的从上到下排序的box；
$('.box:odd') , :odd用来查找索引为奇数位的从上到下排序的box；

$('.box').eq(n) | $('.box:eq(n)') 索引取值，取第n索引位的jq对象；
（:contain(data)通过内容来进行模糊匹配）

2.进行属性操作

文本内容操作

// 赋值: 有参数
$('.box').html('<i>beat box</i>');
// 取值: 无参数
console.log($('.box').text());
// 表单内容
$('.inp').val("input 内容 为 value");
console.log($('.inp').val());

属性操作
//取
console.log($('.box').attr('style'));
//设
$('.box').attr('style','color:red');
//增
$('.box').attr('abc',function () {
　　return "AAA"
})

添加删除类名

$('.box').addClass('active');//添加
$('.box').removeClass('active');//删除
$('.box').toggleClass('active')；//添加删除之间切换

 

3.css样式设置

// 取值
console.log($('.box').css('width'));
//设值
$('.box').css('color','red')//单一属性设值
$('.box').css({
    width:'300px',
    backgroundColor:'blue'
})
//设置多个值；给css()函数赋值一个js对象，key可以为字符串类型，也可以省略''但前提是要使用小驼峰命名法；属性的值为数值加单位，单位可以省略，最后都用字符串数据赋值。

.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;
    })

View Code

4.事件

事件的绑定方法：1.on 参数为：事件名，委派的子级，{key:value传入的数据}，事件回调函数
2.click：两个参数，{key：value 传入的数据} 和 事件回调函数

jq事件对象：坐标：ev.clientX | ev.clientY
按键：ev.keyCode;数据:ev.data.key => eg:ev.data.name

冒泡：ev.stopPropagation();

默认动作：ev.preventDefault();

 委派：

$('.box').on('click', 'a' , {name:xia}, function(){})

 

委派是通过父级来绑定点击事件，就是将事件委派给子级标签

 

5.动画

hide(time_num, finish_fn) 
show(time_num, finish_fn)  
toggle(time_num, finish_fn)

(time_num是动画持续的时间，finish_fn是动画结束后的回调函数)

slideUp(time_num, finish_fn) | slideDown(time_num, finish_fn) | slideToggle(time_num, finish_fn)

fadeOut|fadeIn|fadeTo|fadeToggle(time_num,finish_fn)

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

animate({

    width: 300,

    height: 500

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

    // 动画结束后回调

})

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

自定义动画

 

 

转载于:https://www.cnblogs.com/xiamenghan/p/10187509.html