jQuery链式调用、鼠标移入移出、轮播、键盘事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery链式调用、鼠标移入移出、轮播、键盘事件相关的知识，希望对你有一定的参考价值。
参考技术A <style>*
margin: 0%;
padding: 0%;
.box
width: 340px;
border: 1px solid blue;
margin: 10px auto;
.box h1
height: 40px;
color: #fff;
padding-left: 15px;
background-color: blue;
font-size: 25px;
ul li
padding-left: 15px;
list-style-type: none;
line-height: 45px;
border-bottom: 1px dashed #ccc;
ul li:last-child
border-bottom: none;
</style>
</head>
<body>
<div class="box">
<h1>
祝福冬奥
</h1>
<ul>
<li>贝克汉姆</li>
<li >姚明</li>
<li>张宏</li>
<li>肖恩怀特</li>
</ul>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
/* jQuery的链式调用 */
/* $('div').$('div').text('我是学生').css('color','red').attr(name:'zhangsan',age:30) */
/* 链式调用的原理jq里面的方法都会return this 把当前调用者return出去实现链式调用 */
/* $('ul li').first().css('background','yellow').end().eq(1).css('background','red') */
/* 获取的只是content里面的距离,不包括padding margin border里面的距离 */
/* 返回以像素为单位的top和left的坐标,仅对可见元素有效 */
/* top和left值都会包括自己的margin和父元素border的值 */
console.log($('div2').offset().top);
console.log($('ul').width());
console.log($('ul').height());
/* offsetParent 返回最近的自己定位的祖先元素 */
console.log($('div2').offsetParent());
/* position() 返回第一个匹配元素相对于父元素的位置 */
console.log($('div').position());
/* scrollLeft([position]) 参数可选,设置返回匹配元素相对滚动条左侧的偏移*/
/* 设置滚动条的距离 */
$(window).scrollLeft(100)
/* 获取滚动条的距离 */
$(window).scroll(function()
console.log($(document).scrollLeft());
)
</script>
<style>
.div1
width: 300px;
height: 300px;
border: 1px solid red;
.div2
width: 200px;
height: 200px;
background-color: red;;
</style>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
/* mouseenter mouseleave 在进入子元素区域时不会触发
mouseover 和mouseout 会触发 */
/* $('.div1').mouseenter(function()
$(this).css('background','green')
)
$('.div1').mouseleave(function()
$(this).css('background','yellow')
) */
/* 由mouseenter 和mouseleave组成 */
$('.div1').hover(function()
$(this).css('background','yellow')
console.log(1);
)
</script>
<style>
*
margin: 0%;
padding: 0%;
.box
width: 340px;
border: 1px solid blue;
margin: 10px auto;
.box h1
height: 40px;
color: #fff;
padding-left: 15px;
background-color: blue;
font-size: 25px;
ul li
padding-left: 15px;
list-style-type: none;
line-height: 45px;
border-bottom: 1px dashed #ccc;
ul li:last-child
border-bottom: none;
</style>
</head>
<body>
<div class="box">
<h1>
祝福冬奥
</h1>
<ul>
<li>贝克汉姆</li>
<li >姚明</li>
<li>张宏</li>
<li>肖恩怀特</li>
</ul>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
/* $('li:eq(0)').mouseenter(function()
$(this).css('background','red')
)
$('li:eq(0)').mouseout(function()
$(this).css('background','')
) */
$('li').hover(function()
/* css('background','')不会改变元素原来bgc样式 */
$('li').first().css('background','red').siblings().css('background','')
)
$('li:eq(1)').mouseenter(function()
$(this).css('background','yellow')
)
$('li:eq(1)').mouseout(function()
$(this).css('background','')
)
</script>
<style>
.box
margin: 30px auto;
width: 500px;
height: 300px;
border: 1px solid cyan;
position: relative;
.img-list img
width: 500px;
height: 300px;
display: block;
position: absolute;
left: 0;
top: 0;
</style>
</head>
<body>
<div class="box">
<div class="img-list">
<img src="./imgs/1.jpg" alt="">
<img src="./imgs/2.jpg" alt="">
<img src="./imgs/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
</div>
</div>
<button style="margin-left: 450px;" class="left">后退</button>
<button class="right">前进</button>
<script src="./jquery-1.12.4.js"></script>
<script>
/* 定时器 过2s 显示一张图 显示最后一张图的时候再跳回第一张 */
/* let i = 0
$('img').eq(0).show().siblings().hide();
setInterval(function()
i++;
if(i==$('img').length)
i=0
*/
/* 淡入淡出 */
/* $('img').eq(i).fadeIn('slow').siblings().fadeOut('slow')
,2000) */
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()
/* 定时器 过两秒 显示一张图 显示最后一张图的时候
再跳到第一张 */
)
function show()
timer = setInterval(function ()
i++;
if(i == $('img').length)
i = 0
/* fadeIn 淡入 fadeOut淡出 */
$('img').eq(i).fadeIn().siblings().fadeOut();
,2000)
</script>
<body>
用户名:<input type="text"><br>
密码: <input type="password">
<script src="./jquery-1.12.4.js"></script>
<script>
/* 按下键盘 */
/* $('input[type=text]').keydown(function()
alert('我按下了')
) */
/* 抬起键盘 */
/* $('input[type=password]').keyup(function()
alert('我抬起了')
) */
/* keypress 连续敲击键盘 */
/* $('input[type=text]').keypress(function()
alert('连续打字')
) */
$(window).keyup(function(e)
if(e.keyCode==13)
alert('已提交')
)
</script>
</body>
以上是关于jQuery链式调用、鼠标移入移出、轮播、键盘事件的主要内容，如果未能解决你的问题，请参考以下文章
vue 中 鼠标移入停止轮播 移出开始轮播 （swiper5）