JQuery攻略（四）事件

时间：2014-07-22 22:32:34 阅读：307 评论：0 收藏：0 [点我收藏+]

标签：返回顶部 style blog http java color

jQuery事件处理，鼠标的单击，双击，悬停，键盘按键，文本动画.....

此章节有

1.1被点击的按钮查找

一个页面上有很多按钮，对应不同的功能，一个按钮对应一个事件，说到底就是给每个按钮绑定一个事件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="css/css.css" rel="stylesheet" type="text/css" />
    <script src="script/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="script/js.js" type="text/javascript"></script>
</head>
<body>
    <span class="buttons bold">Bold</span> 
    <span class="buttons italic">Italic</span>
</body>
</html>

使用bind()方法为按钮添加单击事件

$(document).ready(function () {
    //bold click事件
    $(".bold").bind("click", function () {
        alert("You clicked the bold button!");
    });
    //bold click事件
    $(".italic").bind("click", function () {
        alert("You clicked the italic button!");
    });
});

现在要把单击事件添加到button，并不是单独为每一个按钮绑定添加点击事件

$(document).ready(function () {
    $(".buttons").bind("click", function () {
        alert("You clicked the " + $(this).text() + " button");
    });
});

不使用bind()方法也可以直接为指定的任何元素添加事件

$(document).ready(function () {
    //bold click事件
    $(".bold").click(function () {
        alert("You clicked the bold button!");
    });
    //bold click事件
    $(".italic").click(function () {
        alert("You clicked the italic button!");
    });
});

利用事件对象的目标属性

事件对象包含事件细节，JavaScript把事件对象自动发送到事件处理函数。事件对象的其中一个属性称为(target)目标，利用这个属性我们可以知道在哪个元素上发生了事件。

$(document).ready(function () {
    $(".buttons").click(function (event) { //event 事件对象
        var target = $(event.target); //event.target ==> span.buttons（classname）
        if (target.is(".bold")) { //是否有bold的class
            alert("You clicked the bold button.");
        }
        if (target.is(".italic")) {
            alert("You clicked the italic button.");
        }
    });
});

注：如果一个元素上有多个classname的话，event.target只取第一个

双击事件的绑定，和也上面一样，只是把click关键字换成dblclick

$(document).ready(function () {
    //bold dblclick事件
    $(".bold").bind("dblclick", function () {
        alert("You clicked the bold button!");
    });
    //bold dblclick事件
    $(".italic").bind("dblclick", function () {
        alert("You clicked the italic button!");
    });
});

在这一段，主要用到了

事件的绑定方法bind(eventType ， data ，hanlder) 将事件附加到指定的元素上

单击事件的绑定click(handler)

双击事件的绑定dblclick(handler)

1.2事件的自动触发

有的时候，事件的触发，需要自动式的，而不是手动点击或者其他操作触发，这个时候就要用到trigger()方法了。

$(document).ready(function () {
    $(".buttons").bind("click", function () {
        alert("You clicked the " + $(this).text() + " button");
    });

    $(".bold").trigger("click"); //触发
});

触发事件的方法trigger(eventType) eventType为字符串类型

1.3点击之后禁用按钮

有的时候，我们希望事件只触发一次，比如提交按钮被点击一次之后，我们想要禁用该按钮。

$(document).ready(function () {
    $(".buttons").bind("click", function () {
        alert("You clicked the " + $(this).text() + " button");
        $(this).unbind("click"); //删除click单击事件
    });
});

unbind()从指定的元素中删除先前绑定的事件处理函数

unbind()

unbind(eventType)

unbind(eventType,handler)

如果不传入任何参数，所有的事件将被删除

1.4鼠标事件

鼠标除了单击双击事件，还有悬浮

mouseup() 鼠标抬起时候触发，不分鼠标左右键，和click不同的是，click只能是左键点击触发

$(document).ready(function () {
    $(".buttons").bind("mouseup", function () {
        alert("You clicked the " + $(this).text() + " button");
    });
});

mousedown() 鼠标按下时候触发，不分鼠标左右键，和click不同的是，click只能是左键点击触发

$(document).ready(function () {
    $(".buttons").bind("mousedown", function () {
        alert("You clicked the " + $(this).text() + " button");
    });
});

mouseover() 鼠标指针进入特定区域，触发

$(document).ready(function () {
    $(".buttons").bind("mouseover", function () {
        alert("You get in the " + $(this).text() + " button  area.");
    });
});

mouseout() 鼠标指针离开特定区域，触发

$(document).ready(function () {
    $(".buttons").bind("mouseout", function () {
        alert("You get out the " + $(this).text() + " button  area.");
    });
});

判断左右鼠标键的点击

假如，一个页面上有一个按钮，鼠标左键右键分别做不同的事，如果判断鼠标的左右键呢。利用事件对象属性。

$(document).ready(function () {
    $(".buttons").mousedown(function (event) {
        var theKey = event.button;
        if (theKey == 0) {
            alert("左键")
        } else if (theKey == 1) {
            alert("滚轮点击");
        }
        else {
            alert("右键");
        }
    });
});

显示鼠标指针的屏幕坐标

$(document).ready(function () {
    $(".div").mousedown(function (event) {
        var xpoint = event.screenX; //横坐标
        var ypoint = event.screenY; //纵坐标
        $("p").html("X坐标：" + xpoint + "<br/>Y坐标：" + ypoint);
    });
});

文字显示动态突出

当鼠标在一行中的某个，某几个字体上滑过的时候，突出字突然加大，移走时候回复原来大小。

$(document).ready(function () {
    $("span").mouseover(function () { //到达匹配元素的上方，改变css样式
        $(this).css({
            ‘font-weight‘: ‘bold‘,
            ‘font-size‘: ‘large‘
        });
    });
    $("span").mouseout(function () { //鼠标离开，css样式还原
        $(this).css({
            ‘font-weight‘: ‘normal‘,
            ‘font-size‘: ‘inherit‘
        });
    });
});

主要方法是css() , 用于将css属性直接应用到HTML元素

css(property,value)

还有一个经常应用到图片上的效果，当鼠标放在图片上，图片加大，移出后还原

$(document).ready(function () {
    $(".img").mouseover(function () {
        $(this).css("height", function () { return $(this).height() + 50 });
        $(this).css("width", function () { return $(this).width() + 50 });
    });

    $(".img").mouseout(function () {
        $(this).css("height", function () { return $(this).height() - 50 });
        $(this).css("width", function () { return $(this).width() - 50 });
    });
});

或者可以换一个写法，使用hover、addClass、removeClass

hover(handler1,handler2) 把两个事件附加到指定元素，一个处理鼠标指针进入，一个处理鼠标指针离开元素时触发

$(document).ready(function () {
    $(".img").hover(mouseover, mouseout);

    function mouseover() {
        $(this).css("height", function () { return $(this).height() + 50 });
        $(this).css("width", function () { return $(this).width() + 50 });
    }

    function mouseout() {
        $(this).css("height", function () { return $(this).height() - 50 });
        $(this).css("width", function () { return $(this).width() - 50 });
    }
});

$(document).ready(function () {
    $(".img").hover(mouseover, mouseout);

    function mouseover() {
        $(this).addClass("imgAdd");
    }

    function mouseout() {
        $(this).removeClass("imgAdd");
    }
});

图片设置透明度

$(document).ready(function () {
    $(".img").css("opacity", 0.2); //设置透明度

    $(".img").mouseover(function () { //放大
        $(".img").css("opacity", 1.0); //清晰
        $(this).css("height", function () { return $(this).height() + 50 });
        $(this).css("width", function () { return $(this).width() + 50 });
    });

    $(".img").mouseout(function () { //还原
        $(".img").css("opacity", 0.2);
        $(this).css("height", function () { return $(this).height() - 50 });
        $(this).css("width", function () { return $(this).width() - 50 });
    });
});

1.5焦点事件

元素得到失去焦点的时候触发

$(document).ready(function () {
    $(".input").focus(function () { //得到焦点
        $("p").html("请填写。");
    });

    $(".input").blur(function () { //失去焦点
        $("p").html("");
    });
});

1.6CSS的操作

之前的 css(property,value)、addClass("className")、removeClass("className")都是对css的操作

还有一个toggleClass()方法，利用toggleClass()方法删除或应用一个css类，如果指定元素已经应用了这个css类，使用toggleClass()方法将会把它删除，如果没有应用，那么将为指定的元素应用css类

$(document).ready(function () {
    $("#click").click(function () {
        $("#set").toggleClass("red");
    });
});

html

<span id="click" class="buttons">Click</span> 
<span id="set" class="buttons">Set</span>

css

.buttons
{
    width: 100px;
    float: left;
    text-align: center;
    margin: 5px;
    border: 2px solid;
}
.red
{
    background-color: Red;
}

与之差不多的一个方法是toggle()此方法为指定的元素附加两个事件处理函数。第一个事件在事件偶数次发生时执行，而第二个事件处理函数在事件在奇数数次发生执行，从0开始计数。

toggle(handler1,handler2)

如此，上面切换样式的方法可改成

$(document).ready(function () {
    $("#set").toggle(function () {
        $("#set").addClass("red");
    },
    function () {
        $("#set").removeClass("red");
    });
});

样式的切换

    <span id="bold" class="buttons">bold</span> 
    <span id="italic" class="buttons">italic</span>
    <br /><br />
    <div> This is a test！
    </div>

$(document).ready(function () {
    //鼠标悬浮
    $(".buttons").hover(function () {
        $(this).addClass("sethover");
    }, function () {
        $(this).removeClass("sethover");
    });

    //bold
    $("#bold").click(function () {
        $("div").addClass("bold");
        $("div").removeClass("italic");
    });

    //italic
    $("#italic").click(function () {
        $("div").addClass("italic");
        $("div").removeClass("bold");
    });
});

样式切换，气泡对话框

css

.buttons
{
    width: 100px;
    float: left;
    text-align: center;
    margin: 5px;
    border: 2px solid;
}
.hover1
{
    width:200px;
    height:100px;
    color: Red;
    background-image: url(../image/3.png);
    background-repeat: no-repeat;
    background-position: bottom;
}

html

<body>
    <span id="bold" class="buttons">bold</span> 
    <span id="italic" class="buttons">italic</span>
    <span class="hover1"></span>
</body>

$(document).ready(function () {
    //鼠标悬浮
    $(".buttons").hover(function (event) {
        $(this).addClass("hover1");
        var txt = $(this).text();
        $("<span class=‘showtip‘><br/><br/>This is " + txt + " menu<span>").appendTo($(this));
    }, function () {
        $(this).removeClass("hover1");
        $(".showtip").remove();
    });
});

1.7元素创建

在一个元素前，或后插入另外的元素，可以用到after、before、append、appendTo、prepend、prependTo(更多方法与区别)，移除可以用remove()方法.

after、before 同等级插入，无嵌套关系
after例子：
$("p").after("<p> Hello world!</p> ");

<p>标杆</p>
<p> Hello world!</p>

before例子
<p> Hello world!</p>
<p>标杆</p>

append、appendTo 有嵌套 后面开始
$("p").append("<b>Hello world!</b>");向匹配p元素集合中的每个元素结尾插入由参数指定的内容,会嵌套在内部<p><b>Hello world!</b></p>
$("<b>Hello world!</b>").appendTo("p");向目标结尾插入匹配元素集合中的每个元素。会嵌套在内部,与append只是语法不一样。


prepend、prependTo 有嵌套 前面开始
$("p").prepend(‘<h2>插入元素h2</h2>‘);向匹配元素集合中的每个元素开头插入由参数指定的内容。插入的元素为<p>的下级
$(‘<h2>插入元素h2</h2>‘).prependTo("p");向目标开头插入匹配元素集合中的每个元素。插入的元素为<p>的下级

$(document).ready(function () {
    $("#add").click(function () {
        $("div").prepend("<p>this is a test p .</p>");
    });

    $("#remove").click(function () {
        $("p").remove();
    });
});

创建“返回顶部”连接

如果一篇文章很长，想回到顶部，总是要滑动鼠标滚轴，或按home键盘，太麻烦，我们需要页面上有一个图片或文字直接点击到头部。

html

<body>
    <p>
        是树的不挽留，还是叶的无情；是时间的摧残，还是风的诱惑。<br />
        <br />
        叶终归还是毅然绝然的离开了树的怀抱，投奔向了它早已心有所属的大自然，可等到它被自然摧残的面目全非再无昔日的生机时，是否会怀念曾经留在树怀抱时的美好。<br />
        --题。<br />
    </p>
    <p>
        尘世中，每一次的转身都可能是一辈子，每一次的别离都可能是永远，每一次的错过都可能是过去。<br />
        所以，我很珍惜每一次偶遇的美妙，每一次重逢的喜悦，每一次机会的把握。<br />
    </p>
    <p>
        爱，曾经欢喜地来到过我的世界，但最终却又无情的离我而去。<br />
        有人说过&ldquo;爱情里，伤的最深的永远是那个不愿放手的人&rdquo;。<br />
        确实，最初几年，以前的点滴依旧会清晰的出现在我的脑海。<br />
        在每次经过那相遇的地点时，在孤身一人漫步在夕阳下时，在每次从外回家时，都会想起那个曾经深爱过的你。<br />
    </p>
    <p>
        心，伤过一次，便害怕再次受伤，以至于时隔几年都不敢再去触碰爱的边缘，只想孤独的静待缘分的到来。<br />
    </p>
    <p>
        大学毕业，来了外地工作，曾有很多人都问我，你咋跑那么远的地方来上班。<br />
        我当时都笑着回答说：&ldquo;在家乡呆久了，出来逛逛，看看大海看看雪。<br />
        &rdquo;可有谁知道，在表面微笑的内在里，这其实是一个懦弱与逃避的谎言，逃避那个曾经的伤城，想离那个地方越远越好，不管去哪儿只要不在那个城，想靠时间和空间来淡化那段已逝去的初恋情怀。<br />
    </p>
    <p>
        张嘉佳说的好，初恋永远是一个人的兵荒马乱，总是承诺的很多，实现的却很少。<br />
        我们面对面越走越远，肩并肩悄然失散。<br />
        记得有段时间，每次接到你的电话，或是不小心听到关于你的消息，心都会荡起无声的涟漪，思绪总是会随着你那动人的声音回到过去，回到那个有你的年岁。<br />
    </p>
    <p>
        我仿佛又看到那头长发在风中微微荡起，那副红色镜框的眼镜依旧调皮的横躺在你微高的鼻梁上，那樱桃般的小嘴在你瓜子型的脸蛋上略微的鼓起，那会说话的大眼睛俏皮的盯着我&hellip;&hellip;</p>
    <p>
        可现实总是这么残酷，回忆的思绪也是那么的虚无缥缈，都顶不过电话那头你的声音。<br />
        你说有事，晚会儿再聊，于是通话很快便结束了。<br />
        我把平时设置成静音的手机又调成了很长一段时间都不曾听到的闹铃，可是第二天还是换成了静音&hellip;</p>
    <p>
        一生中，遇见的人很多，住在心里的却很少。<br />
        可总有那么少数的人，让你遇见，就得用一生的时间去忘记。<br />
        我想对大多数人来说，那个人应该就是初恋吧。<br />
    </p>
    <p>
        时间最是公正与无情，不过也是最有效的疗伤药，就算是那颗曾已千疮百孔的心，它都能治愈。<br />
        时至今日我终于不在像当初那般想起那个曾经的你就心痛，只是将它当成美好的回忆藏在心里最深处，让它与青春作伴。<br />
        或者说将有你的时光像酿酒一般封存，深埋地底，待多年以后再细细品尝。<br />
    </p>
    <p>
        我很感谢你曾经来到过我的世界，在我最青春年少时。<br />
        现在我已行走在青春的末端，正慢慢的变得成熟，稳重，再不像以前那般浮躁，心有不平便拔剑四起。<br />
        这样写，有点显老。<br />
        呵，不过成长的途中，老就老点吧。<br />
    </p>
    <p>
        一段情，一尘往事，渐行渐远；一个人，一段青春，且行且惜。<br />
    </p>
    <p>
        末了，祝你我各自的未来安好。<br />
        祝天下有情人总成眷属！</p>
    <p>
        谨以此文，献给自己快要走完的青春。<br />
    </p>
</body>

View Code

$(document).ready(function () {
    $("<a href=‘#topofpage‘>Return to top</a>").insertAfter(‘p‘);
    $("<a name=‘topofpage‘></a>").prependTo(‘body‘);
});

在这里主要是应用到了insertAfter()方法，把匹配的元素插入到另一个指定的元素集合的后面。与insertBefore()函数对应。同等级不包含

1.8动画隐藏和展示

“更多”连接的显示与隐藏

css

.sethover
{
    /*background-color: cyan;*/    
    cursor: pointer;
}

html

<body>
    <div>
        是树的不挽留.....<span class="readMore">ReadMore</span></div>
    <div class="divShow">
        <p>
            是树的不挽留，还是叶的无情；是时间的摧残，还是风的诱惑。<br />
            <br />
            叶终归还是毅然绝然的离开了树的怀抱，投奔向了它早已心有所属的大自然，可等到它被自然摧残的面目全非再无昔日的生机时，是否会怀念曾经留在树怀抱时的美好。<br />
            --题。<br />
        </p>
        <p>
            尘世中，每一次的转身都可能是一辈子，每一次的别离都可能是永远，每一次的错过都可能是过去。<br />
            所以，我很珍惜每一次偶遇的美妙，每一次重逢的喜悦，每一次机会的把握。<br />
        </p>
        <p>
            爱，曾经欢喜地来到过我的世界，但最终却又无情的离我而去。<br />
            有人说过&ldquo;爱情里，伤的最深的永远是那个不愿放手的人&rdquo;。<br />
            确实，最初几年，以前的点滴依旧会清晰的出现在我的脑海。<br />
            在每次经过那相遇的地点时，在孤身一人漫步在夕阳下时，在每次从外回家时，都会想起那个曾经深爱过的你。<br />
        </p>
        <p>
            心，伤过一次，便害怕再次受伤，以至于时隔几年都不敢再去触碰爱的边缘，只想孤独的静待缘分的到来。<br />
        </p>
        <p>
            大学毕业，来了外地工作，曾有很多人都问我，你咋跑那么远的地方来上班。<br />
            我当时都笑着回答说：&ldquo;在家乡呆久了，出来逛逛，看看大海看看雪。<br />
            &rdquo;可有谁知道，在表面微笑的内在里，这其实是一个懦弱与逃避的谎言，逃避那个曾经的伤城，想离那个地方越远越好，不管去哪儿只要不在那个城，想靠时间和空间来淡化那段已逝去的初恋情怀。<br />
        </p>
        <p>
            张嘉佳说的好，初恋永远是一个人的兵荒马乱，总是承诺的很多，实现的却很少。<br />
            我们面对面越走越远，肩并肩悄然失散。<br />
            记得有段时间，每次接到你的电话，或是不小心听到关于你的消息，心都会荡起无声的涟漪，思绪总是会随着你那动人的声音回到过去，回到那个有你的年岁。<br />
        </p>
        <p>
            我仿佛又看到那头长发在风中微微荡起，那副红色镜框的眼镜依旧调皮的横躺在你微高的鼻梁上，那樱桃般的小嘴在你瓜子型的脸蛋上略微的鼓起，那会说话的大眼睛俏皮的盯着我&hellip;&hellip;</p>
        <p>
            可现实总是这么残酷，回忆的思绪也是那么的虚无缥缈，都顶不过电话那头你的声音。<br />
            你说有事，晚会儿再聊，于是通话很快便结束了。<br />
            我把平时设置成静音的手机又调成了很长一段时间都不曾听到的闹铃，可是第二天还是换成了静音&hellip;</p>
        <p>
            一生中，遇见的人很多，住在心里的却很少。<br />
            可总有那么少数的人，让你遇见，就得用一生的时间去忘记。<br />
            我想对大多数人来说，那个人应该就是初恋吧。<br />
        </p>
        <p>
            时间最是公正与无情，不过也是最有效的疗伤药，就算是那颗曾已千疮百孔的心，它都能治愈。<br />
            时至今日我终于不在像当初那般想起那个曾经的你就心痛，只是将它当成美好的回忆藏在心里最深处，让它与青春作伴。<br />
            或者说将有你的时光像酿酒一般封存，深埋地底，待多年以后再细细品尝。<br />
        </p>
        <p>
            我很感谢你曾经来到过我的世界，在我最青春年少时。<br />
            现在我已行走在青春的末端，正慢慢的变得成熟，稳重，再不像以前那般浮躁，心有不平便拔剑四起。<br />
            这样写，有点显老。<br />
            呵，不过成长的途中，老就老点吧。<br />
        </p>
        <p>
            一段情，一尘往事，渐行渐远；一个人，一段青春，且行且惜。<br />
        </p>
        <p>
            末了，祝你我各自的未来安好。<br />
            祝天下有情人总成眷属！</p>
        <p>
            谨以此文，献给自己快要走完的青春。<br />
        </p>
    </div>

View Code

$(document).ready(function () {
    //悬浮
    $(".readMore").hover(
    function () {
        $(this).addClass("sethover");
    },
    function () {
        $(this).removeClass("sethover");
    }
    );

    //隐藏和显示
    $(".readMore").toggle(function () {
        $(".divShow").show("show");
    }, function () {
        $(".divShow").hide("show");
    });
    
});

这里主要是用到了show()和hide()方法,

show()使指定的隐藏元素可见 show(speed,callback),speed 以毫秒为单位，也可以使用指定的字符串 ‘slow‘=600ms , ‘normal‘ =400ms ,‘fast‘ =200ms,如果省略，默认的就是normal

callback 回调，当动画完成时调用的函数

hide(speed,callback)作用功能和show()相反.

还有两个渐显，渐隐的方法是 fadeIn(speed,callback) 和fadeOut(speed,callback),它们是改变字体透明度而实现的。

1.9效果

文本滑动效果

html

<body>
   <p id="message1">jQuery is an pen source project</p>
   <p id="message2">jQuery is an pen source project</p>
</body>

$(document).ready(function () {
    $("p#message1").css({ "border": "2px solid", "text-align": "center", "font-weight": "bold" }).hide().click(function () {
        $(this).slideUp("slow"); //消失
        $("p#message2").slideDown("slow"); //滑动显示
    });
    $("p#message2").css({ "backgroundColor": "#f00", "color": "#fff", "text-align": "center", "font-weight": "bold" }).click(function () {
        $(this).slideUp("slow"); //消失
        $("p#message1").slideDown("slow"); //滑动显示
    });
});

首先利用css()方法，给message1、message2添加了不同的样式，然后将其中一个隐藏，再为每个p标签添加点击事件，利用slideUp()、和slideDown()。

slideDown(speed，callback) 以滑动效果来逐渐显示选定元素。
speed 指定动画的持续时间，可以指定字符串fast、normal、slow或者毫秒，毫秒越大，动画持续越长。
callback是动画完成后调用的函数。

slideUp(speed，callback) 以活动效果逐渐使选定元素消失不可见。

图像滚动效果
首先，将img的position设置为relative

img
{
    position: relative;
}

然后利用animate()方法使它移动，移动到距左边距600px的地方

$(document).ready(function () {
    //点击图片，图片想右边移动600px距离
    $("img").click(function () {
        $(this).animate({ left: 600 }, "slow");
    });
});

animate() 根据指定的css属性和使用缓和参数来控制自定义动画

animate(properties,speed,easing,callback)

properties css 属性 {left:300}

speed 动画持续时间 slow、normal、fast 、xxms

easing （缓和）是一个函数（可选），控制动画随着时间如何进行。它需要一个插件。有两个缓和函数：linear（线性），swing（摆动）。默认swing。

callback 回调

点击横移，再回去

自动

$(document).ready(function () {
    //点击图片
    $("img").click(function () {
        $(this).animate({ left: 600 }, "slow", function () {
            $(this).animate({ left: 0 }, "slow");
        }); //图片向右边移动600px距离,之后回到原来位置      
    });
});

点击

$(document).ready(function () {
    //点击图片，图片向右边移动600px距离，再点击回到原位
    $("img").toggle(function () {
        $(this).animate({ left: 600 }, "fast");
    }, function () {
        $(this).animate({ left: 0 }, "slow");
    });
});

移动后隐藏

$(document).ready(function () {
    //点击图片，图片向右边移动600px距离
    $("img").click(function () {
        $(this).animate({ left: 600 }, "slow");
        $(this).slideUp("slow"); //移动后隐藏
    });
});

移动后淡出

$(document).ready(function () {
    //点击图片
    $("img").click(function () {
        $(this).animate({ left: 600 }, "slow"); //图片向右边移动600px距离
        $(this).fadeTo("slow", 0.2); //移动后降低透明度
        //$(this).fadeOut("slow"); //移动后谈出 等于 $(this).fadeTo("slow", 0);
    });
});

fadeTo() 和 fadeOut() 作用都是一样的，都是控制图片的谈出，不过fadeTo()比fadeOut的好处是，前者可以控制透明度，而后者直接将透明度设置了0

fadeTo(speed,opacity,callback) 调整选定元素的不透明度

speed 持续时间，时间越大持续越久
opacity 透明度数值介于 0 -1

使图像一边滚一边变大

$(document).ready(function () {
    //点击图片
    $("img").toggle(
    function () {
        $(this).animate({ left: 1100, height: $(this).height() * 2, width: $(this).width() * 2 }, "slow");
    },
    function () {
        $(this).animate({ left: 0, height: 100, width: 100 }, "slow");
    });
});

使图像滚动到右侧在向左滚动

$(document).ready(function () {
    //点击图片
    $("img").click(
    function () {
        $(this).animate({ left: 1200 }, "slow", function () { //向右边慢慢滑动1200px
            $(this).fadeTo("slow", 0); //淡出
            $(this).fadeTo("slow", 1); //淡入
            $(this).animate({ left: 0 }, "slow"); //回到起始位置
        });
    });
});

1.10 键盘输入控制

监控键盘事件 keypress()、keydown()、keyup()

html

<body>
    <input type="text" class="infobox" />
    <p></p>
</body>

$(document).ready(function () {
    $(".infobox").keypress(function (event) { //键盘按下事件
        $("p").text(String.fromCharCode(event.keyCode)); //字符 FF没反应...
        //$("p").text(event.charCode); //ASCII 
    });
});

keypress()和keydown()的区别：

如果用户反复按任意键，按下然后保持按下状态，keydown()事件只执行一次，而keypress()事件则是每插入一个字符就执行一次（keydown()的持续时间更长一些）

此外，修改Shift键、Ctrl键等为keydown()所识别，而这些修改键不会触发keypress()事件。

1.11防止事件冒泡

什么是事件冒泡？看代码。

html

<body>
    <div>
        Div Element
        <p>
            Paragraph Element <span>Span Element</span>
        </p>
    </div>
</body>

$(document).ready(function () {
    $("div").click(function () {
        alert("You click the div element");
    });
    $("p").click(function () {
        alert("You click the paragraph element");
    });
    $("span").click(function () {
        alert("You click the span element");
    });
});

三个元素嵌套 <div<p<span ,三个元素都附加了点击事件，

当点击span时，首先弹出警告框的是 “You click the span element ”、再“You click the paragraph element”然后“You click the div element”

当点击p标签元素时候，弹框的是“You click the paragraph element”然后“You click the div element”

当点击div元素时候，弹框的是“You click the div element”

当任何元素上发生事件时，事件处理机制首先检查该元素是否附加了事件方法（以及事件处理函数）。如果是，就执行（附加的事件方法的）事件处理函数的语句。在此之后，事件处理机制继续检查该元素的亲节点，看是否附加了事件方法，如果是，也会执行其事件处理函数，直到DOM根节点。

利用事件属性，稍作修改

$(document).ready(function () {
    $("div").click(function (event) {
        var target = $(event.target);
        if (target.is("div")) {
            alert("You click the div element");
        }
        else if (target.is("p")) {
            alert("You click the paragraph element");
        }
        else if (target.is("span")) {
            alert("You click the span element");
        }
    });

});

小结

此篇记录了各种不同鼠标事件和键盘事件（单击、双击、按键keypress等），几种文字图片效果（淡入，淡出，上滑、下滑等）最后总结一下所以用到的事件和方法。

1.bind() 绑定事件 --click、dblclick...

$(".bold").bind("click", function () {
        alert("You clicked the bold button!");
    });

2.event 事件对象 function (event){...}

3.trigger(eventType)方法触发事件

$(".bold").trigger("click"); //触发

4.unbind()方法从指定的元素中删除先前绑定的事件处理函数

$(this).unbind("click"); //删除click单击事件

CSS处理方法
5.css(property,value)方法将css属性直接应用到HTML元素

 $(this).css({
            ‘font-weight‘: ‘normal‘,
            ‘font-size‘: ‘inherit‘
        });

$(".img").css("opacity", 0.2); //设置透明度

6.addClass("className")

7.removeClass("className")

8.toggleClass()方法删除或应用一个css类

9.toggle()方法为指定的元素附加两个事件处理函数。

10.元素创建:after、before、append、appendTo、prepend、prependTo...

动画效果
show()和hide()显示与隐藏
fadeIn(speed,callback) 和fadeOut(speed,callback)渐隐和渐显
fadeTo(speed,opacity,callback) 调整选定元素的不透明度
slideDown(speed，callback) 以滑动效果来逐渐显示选定元素
slideUp(speed，callback) 以活动效果逐渐使选定元素消失不可见。
animate(properties,speed,easing,callback)根据指定的css属性和使用缓和参数来控制自定义动画

鼠标事件
mousedown() 鼠标按下时候触发，不分鼠标左右键，和click不同的是，click只能是左键点击触发
mouseover() 鼠标指针进入特定区域，触发
mouseout() 鼠标指针离开特定区域，触发
hover(handler1,handler2) 把两个事件附加到指定元素，一个处理鼠标指针进入，一个处理鼠标指针离开元素时触发

键盘事件
keypress()、keydown()、keyup()

焦点事件
focus()得到焦点事件
blur()失去焦点事件

事件冒泡

jQuery系列链接汇总

JQuery攻略（一）基础知识——选择器与 DOM

JQuery攻略（二） Jquery手册

JQuery攻略（三）数组与字符串

JQuery攻略（四）事件,布布扣,bubuko.com

JQuery攻略（四）事件

标签：返回顶部 style blog http java color

原文地址：http://www.cnblogs.com/Jolinson/p/3479079.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行