jquery的基本操作

1、jq中的hover事件(移入/移除)
写法参照:

 $('#div1').hover(function(){移入事件},function(){移出事件})

2、jq中的阻止默认事件;

1.e.preventDefault();
2、return false; (使用的时候要放在最底部)  

** 3、jq中的阻止事件传递(防止冒泡或下沉)**

     e.stopPropagation();

** 4、jq中获取元素的宽高**

   $('#div1').width()
   $('#div1').height()

** 5、jq中移除事件,off(事件类型,执行该事件的回调函数)**

$(document).off('mouseover',moveFn);

** 6、jq中获取元素的下标(下标从0开始)**

1.获取当前元素在所有同级别元素的下标:$(this).index();
2.获取当前元素在同类型元素且同级别元素的下标.index($(this))
3.获取某一组元素中,其中一个元素的下标(下标从0开始)
.eq(index);

** 7、jq中的class类名**

$('input').eq(index).addClass('active');
$('input').eq(index).removeClass('active');

** 9、jq中的创建节点**

创建:$('
  • '); 插入: (插入末尾)$('li').append(a); a.appendTo( $('li')); (插入前端)$('li').prepend(a); a.prependTo( $('li'));

    ** 9、jq中删除节点**

    $('#div1').remove();
    

    ** 10、jq中复制节点**

    $('#div1').clone();
    

    ** 11、jq中节点的关系**

    1.children();--获取匹配元素的中所有的子元素
    2.siblings();--获取同辈标签,可以筛选
    3.next();--获取匹配元素紧邻的下一个兄弟元素
    4.prev();--获取匹配元素的紧邻的前一个兄弟元素
    5.parent();--获取当前匹配元素的父元素
    

    ** 12、jq中的动画**

    
    1、
    show()--> 出现(参数:slow/fast/400)-$('div').show('slow',function(){回调函数})
    hide()-->隐藏
    toggle()--> 开关
    slideDown()-->向下滑动
    slideUp()--> 向上滑动
    slideToggle()--> 滑动开关
    fadeIn()-->逐渐出现
    fadeOut()--> 逐渐消失
    fadeToggle()--> 出现消失开关
    fadeTo()-->参数 1.时间 2.透明度 (0~1)--$('div').on('click',function(){$('#div1').fadeTo(100,1)});
    2、
    delay();延时  delay $('#div1').delay(2000)stop()  
    stop();()停止动画或者清除上一次动画   $('#div1').stop();
    

    ** 9、jq中的easing.js动画**

    1. 引入
    用法:
    $('#div1').animate({ 
    1、动画持续时间
    duration:100,
    2、动画运动方式
     easing:"easeInBounce",
    3、动画执行完毕后的回调函数
    complete:function(){
    alert("动画执行完毕");
    }
    })
    

    ** 学到知识点:**

    1、设置有分割的线性渐变
    background:-webkit-linear-gradient(top,#dfdfdf,#dfdfdf 20%,white 20%,white 40%,#dfdfdf 40%,#dfdfdf 60%,white 60%,white 80%,#dfdfdf 80%,#dfdfdf 100%);
    2、设置垂直居中
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    
    

    你可能感兴趣的:(jquery的基本操作)