- 鼠标移入移出
</div>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
/* hover 由mouseenter和mouseleave组成 */
// $('.div1').hover(function(){
// console.log(1);
// })
/* mouseenter mouseleave ★在进入子元素区域的时候不会触发*/
// $('.div1').mouseenter(function(){
// console.log('mouseenter');
// })
// $('.div1').mouseleave(function(){
// console.log('mouseleave');
// })
/* mouseover和 mouseout 在进入子元素区域的时候也会触发*/
// $('.div1').mouseover(function(){
// console.log('mouseover')
// })
// $('.div1').mouseout(function(){
// console.log('mouseout')
// })
</script>
- 导航菜单
<script src="./jquery-1.12.4.js"></script>
<script>
$('li').hover(function(){
/* first代表集合元素的第一个元素 last代表集合元素的最后一个元素 */
/* css('background','')不会改变元素原来的background样式 */
/* ★css('background','none')会改变元素原来的background样式 */
$(this).css('background','#ccc').siblings().css('background','')
})
</script>
- 轮播图
<script src="./jquery-1.12.4.js"></script>
<script>
let i = 0;
let timer = null
$('img').eq(i).show().siblings().hide();
/* 自动播放 */
show();
$('.left').click(function () {
/* 先清空定时器 阻止自动播放 */
clearInterval(timer)
i--;
/* 防止减到-1 找不到对应的图片 */
if (i == -1) {
i = $('img').length - 1
}
/* 展示当前对应的图片其他图片淡出 */
$('img').eq(i).show().siblings().hide();
/* 继续开始自动播放 */
show();
})
$('.right').click(function () {
/* 先清空定时器 阻止自动播放 */
clearInterval(timer)
i++;
/* 防止减到-1 找不到对应的图片 */
if (i == $('img').length) {
i = 0
}
/* 展示当前对应的图片其他图片淡出 */
$('img').eq(i).show().siblings().hide();
/* 继续开始自动播放 */
show();
})
/* 定时器 过2秒 显示一张图 显示最后一张图的时候
再跳到第一张 */
function show() {
timer = setInterval(function () {
i++
if (i == $('img').length) {
i = 0
}
/* fadeIn淡入 fadeOut淡出 */
$('img').eq(i).fadeIn().siblings().fadeOut();
}, 2000)
}
</script>
- 键盘事件
<script src="./jquery-1.12.4.js"></script>
<script>
/* 按下键盘时 */
// $('input[type=text]').keydown(function(){
// alert('我按下了')
// })
/* 释放按键时 */
// $('input[type=password]').keyup(function(){
// alert('鼠标抬起了')
// })
/* 产生可打印的字符时 连续敲击键盘的时候触发 */
// $('input[type=password]').keypress(function(){
// alert('连续敲击键盘')
// })
$(document).keyup(function(e){
/* 敲击回车的时候触发 */
if(e.keyCode==13){
alert('我提交了')
}
})
</script>
- jq的链式调用
<script src="./jquery-1.12.4.js"></script>
<script>
/* jq可以链式调用 */
// $('div').text('我是学生').css('color','red').attr({name:'zhangsan',age:30})
/* 链式调用的原理 jq里面的方法都会return this 把当前调用者return出去 实现链式调用 */
/* end()：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态 */
// $('ul li').eq(0).css('background','yellow').end().eq(1).css('background','red')
// console.log( $('ul').css('width') ) /* =>340px 字符串 */
// console.log( $('ul').css('height') ) /* =>120px 字符串 */
// console.log( $('ul').width() )/* =>340 数字 */
// console.log( $('ul').height() )/* =>120 数字 */
</script>
- width和heigh
<script src="./jquery-1.12.4.js"></script>
<script>
/* scrollLeft([position]) 参数可选。设置或返回匹配元素相对滚动条左侧的偏移 */
/* scrollTop([position]) 参数可选。设置或返回匹配元素相对滚动条顶部的偏移 */
/* 设置滚动条的距离 */
// $(window).scrollLeft(600)
/* 获取滚动条的距离 */
// console.log( $(window).scrollLeft() )
/* jq提供的监听滚动条事件 */
// $(document).scroll(function(){
// console.log( $(document).scrollTop() )
// })
/* 原生的方法 */
// document.onscroll = function(){
// console.log( document.documentElement.scrollLeft )
// }
/* position( ) 返回第一个匹配元素相对于父元素的位置 */
// console.log( $('div').position() )
/* offsetParent 返回最近的已定位祖先元素。
定位元素指的是元素的CSS
position值被设置为relative、absolute或fixed的元素 */
// console.log( $('.div2').offsetParent() )
/* width height获取的只是content里面的距离
不包括padding margin border */
// let w = $('div').width()
// let h = $('div').height()
// console.log(w);
// console.log(h);
/* 返回以像素为单位的top和left坐标。仅对可见元素有效 */
/* ★top 和 left值会包括自己的margin值和父元素的border值 */
// console.log( $('.div2').offset().top );
// console.log( $('.div2').offset() );
</script>
