jQuery链式调用、鼠标移入移出、轮播、键盘事件

style

成都创新互联-专业网站定制、快速模板网站建设、高性价比临夏网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式临夏网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖临夏地区。费用合理售后完善，十余年实体公司更值得信赖。

    *{

        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键盘事件中event.keyCode==13相当于按下了那个键

当用户按下enter键时触发from提交，而不只是点击提交按钮才提交！这样更友好。 13表示enter按键的keyCode编码

jquery的键盘事件分为keypress、keydown和keyup事件

一、键盘事件

1、keypress()事件

keypress当按钮被按下时，会发生该事件，我们可以理解为按下并抬起同一个按键。

2、keydown()事件

当按钮被按下时，发生 keydown 事件（多用于游戏开发，比如一直按空格键进行攻击）。

3、keyup事件

keyup 事件会在按键释放时触发，也就是你按下键盘起来后的事件

二、通过键盘事件可以进行相应操作

$(document).ready(function() {

//释放按键时

$(document).keyup(function(event){

if(event.keyCode=="13"){ //13表示回车键的代码

alert("释放按键");

}

})

//按下按键时

$(document).keydown(function(event){

if(event.keyCode=="13"){

alert("按下按键");

}

})

//输入字符时

$(document).keypress(function(event){

if(event.keyCode=="13"){

alert("输入字符");

}

})

//获取键盘的 键码值 方法（如果不知道某个键对应的 键码值，可用这个方法，在键盘上按该键，就会弹出对应的值 ）

$(document).keyup(function(event){

alert(event.keyCode);

})

});

jquery 模拟键盘按下

function AHrefClick (){

var e = jQuery.Event("keydown");//模拟一个键盘事件

e.keyCode = 13;//keyCode=13是回车

$("#id").trigger(e);//模拟按下回车

}

要模拟键盘事件，首先要在需要模拟的元素上绑定事件才能模拟。比如先：

$(".div").on("keydown","input",function(){

alert("ABC");

});

然后再执行：

var e = jQuery.Event("keydown");//模拟一个键盘事件

e.keyCode = 13;//keyCode=13是回车

$(".div input").trigger(e);//模拟按下回车

如何用js或jquery实现点击事件触发键盘

当按钮被按下时，发生 keydown 事件。

keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。

语法

$(selector).keydown(function)

例如：

$(document).keydown(function(event){

alert(event.keyCode);//弹出按键的对应值 

});

jquery中怎么添加键盘事件？

!-- 把下边所有代码放到 .html 文件中，打开看效果就知道啦 --

html

headtitle/title/head

body

按一下键盘试试

/body

/html

script src="" type="text/javascript"/script

script type="text/javascript"

// 当页面执行 onkeydown 事件（键盘点击事件）的时候，执行方法 function(e){}

$(document).keydown(function(e){

// 这个判断是为了兼容所有浏览器，使 e 能被所有浏览器所解析

if(!e) var e = window.event;  

// 这里就是要执行的方法体，其中 e 就是键盘对象

// 其中 e.keyCode（Code中C一定要大写） 就是按下的键的键值 

alert("键盘按键的 keycode 是 " + e.keyCode);

})

/script

jquery 敲击键盘事件

最快捷的修改办法：

$(document).ready(function(){

var p = $("#p").click(function(){

$(this).hide();

});

});

//此处是需要绑定esc事件的代码，当esc按下时触发hide方法

$(document).bind('keydown', 'esc',function (evt){

//关闭层代码

$(this).hide();

return false;

});

网站名称：jquery键盘事件,jquery键盘事件显示隐藏盒子
标题来源：http://kswjz.com/article/dssoohg.html