您的位置：首页 > Web前端 > JQuery

jQuery基础事件

2016-04-11 10:07 621 查看

jQuery事件方法：

bind()--为被选元素添加一个或者多个事件处理程序，并规定事件发生时运行的函数，$(selector).bind(event,data,function)--data为可选
focus()--获得焦点事件

blur()--当输入域失去焦点改变输入框颜色

<span style="color:#CC33CC;"><body>
<p id="p1">jQuery基础事件</p></br>
<input type="text" id="text1"/>
<input type="button" value="test" id="button1"/>
<script type="text/javascript">
<!--
// 为被选元素添加事件处理程序
$(document).ready(function(){
$("#button1").bind("click",function(){
return $('#p1').slideToggle();
});
});

// 当输入框失去焦点时改变其颜色
$(document).ready(function(){
$('#text1').focus(function(){
return $(this).css("background-color","yellow");
});
$('#text1').blur(function(){
return $(this).css("background-color","black");
});
});
//-->
</script>
</body></span>

click()--点击元素时触发该事件
dbclick()--双击元素时触发该事件
delegate()--为被选元素添加一个或多个事件处理程序，适用于当前或未来的元素，只有div里面的p会受影响

<span style="color:#CC33CC;"><body>
    <div>
    <p id="p1">jQuery基础事件</p></br>
    <input type="text" id="text1"/>
    <input type="button" value="test" id="button1"/>
    </div>
    <script type="text/javascript">
    <!--
        $(document).ready(function(){
            $('div').delegate("p","click",function(){
                $(this).slideToggle();
            });
            $('#button1').click(function(){
                $("<p>new content</p>").insertAfter("#button1");
            });
        });
    //-->
    </script>
</body></span>

live()--为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

die()--移除通过live()添加的事件
event.pageX--显示鼠标相对于文档的左边缘

<span style="color:#CC33CC;"><body>
<div>
<p id="p1">jQuery基础事件</p></br>
<input type="text" id="text1"/>
<input type="button" value="test" id="button1"/>
</div>
<p>鼠标指针显示在：<span></span></p>
<script type="text/javascript">
<!--

// 显示鼠标的位置
$(document).ready(function(){
$(document).mousemove(function(e){
$('span').text("X:"+e.pageX+"Y:"+e.pageY);
});
});
//-->
</script>
</body></span>

event.target--触发该事件的DOM元素
keydown()
keyup()

<span style="background-color: rgb(204, 51, 204);"><span style="background-color: rgb(204, 204, 204);"><body>
<div>
<p id="p1">jQuery基础事件</p></br>
<input type="text" id="text1"/>
<input type="button" value="test" id="button1"/>
</div>
<p>鼠标指针显示在：<span></span></p>
<script type="text/javascript">
<!--
//触发键盘事件
$(document).ready(function(){
$('#text1').keydown(function(){
$(this).css("background-color","red");
});
$('#text1').keyup(function(){
$(this).css("background-color","black");
});
});
//-->
</script></span>
<span style="background-color: rgb(204, 204, 204);"></body></span></span>

keypress()--通过回车键响应按键次数
unbind()--移除一个被添加的事件处理器

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航