EasyClick Html UI 第二十一节 jQuery 事件处理
常用事件
click()
鼠标单击blur()
元素失去焦点focus()
元素获得焦点mouseover()
鼠标进入(进入子元素也触发)mouseout()
鼠标离开(离开子元素也触发)ready()
DOM加载完成
示例
<script>
$(function(){
var $li = $('.list li');
var $button = $('#button1')
var $text = $("#text1");
var $div = $("#div1")
// 鼠标点击
$li.click(function(){
// this指的是当前发生事件的对象,但是它是一个原生js对象
// this.style.background = 'red';
// $(this) 指的是当前发生事件的jquery对象
$(this).css({'background':'gold'});
// 获取jquery对象的索引值,通过index() 方法
alert($(this).index());
});
// 一般和按钮配合使用
$button.click(function(){
alert($text.val());
});
// 获取焦点
$text.focus(function(){
$(this).css({'background':'red'});
});
// 失去焦点
$text.blur(function(){
$(this).css({'background':'white'});
});
// 鼠标进入
$div.mouseover(function(){
$(this).css({'background':'gold'});
});
// 鼠标离开
$div.mouseout(function() {
$(this).css({'background':'white'});
});
});
</script>
<div id="div1">
<ul class="list">
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
<input type="text" id="text1">
<input type="button" id="button1" value="点击">
</div>
说明:
this
指的是当前发生事件的对象,但是它是一个原生js对象$(this)
指的是当前发生事件的jquery对象
总结
jQuery常用事件:
- click() 鼠标单击
- blur() 元素失去焦点
- focus() 元素获得焦点
- mouseover() 鼠标进入(进入子元素也触发)
- mouseout() 鼠标离开(离开子元素也触发)
- ready() DOM加载完成
交流QQ群:620028786,647082990,772810035
————————————————— 版权声明—————————————-————
版权所有~Mr-老鬼 ~转载请注明原文地址
免责声明:本文所有的教程仅限交流学习使用不得用于违法用途,造成的法律后果本人不承担责任。