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></li>');
插入:
(插入末尾)$('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. 引入<script type="text/javascript" src="jquery.easing.1.3.js"></script>
用法:
$('#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%);