事件
CSS基本样式代码
#box{
width:200px;
height:200px;
background: pink;
}
li:nth-child(even){
background: green;/*even表示奇数*/
}
li:nth-child(odd){/*odd表示偶数*/
background: blue;
}
HTML布局基本代码
<div id="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
on
用jQuery里面的on
函数绑定事件
$(document).ready(function(){//设置jQuery的入口代码
$('li').on('click',function(){//通过on函数给li绑定click事件
console.log('点击');
console.log(this);
})
//选中li元素,在通过on这个函数就可以给li元素设置点击事件了
})
on()
和元素js中的addEventListener
方法一样的都是设置事件字符串,事件处理函数:有一点不同的是jQuery里面的on
设置事件是不能设置冒泡阶段和捕获阶段
那么在jQuery里用on
函数里面绑定的事件this
执行是谁
在jQuery中用on
函数里面绑定的点击事件:this
指向是你给那个元素绑定了点击事件那么这个this
就执行那个被绑定的元素
在jQuery中用
on
函数绑定事件this
是原生DOM对象
我们在写jQuery代码的时候尽量都有jQuery代码,尽量不要用原生js代码
原生DOM不可以和jQuery方法在一起使用否则就会报错
jQuery中绑定事件的方法
方法一:通过on(事件名,回调函数)
给元素绑定对应的事件
原生DOM上面不可以有jQuery DOM的方法的我们需要把一个原生DOM转换成jQuery DOM来使用
那如何把元素DOM转换成jQueryDOM呢??
把原始DOM当中参数放置在
$
函数里面执行,返回的结果就是一个jQuery DOM
$
里面放置字符串表示把这个字符串当做选择器,然后$
函数执行返回一个jQuery DOM集合(找到指定的DOM)
$
里面也可以放置一个原生DOM,这个$
函数的返回结果是一个jQuery DOM
// 点击元素打印对应的文本内容
$(document).ready(function(){//设置jQuery的入口代码
$('li').on('click',function(){
console.log($(this).text())
})
})
方法二:通过on
传递一个对象可以给元素绑定多个事件(但是这种方法一般没人用)
// 点击元素打印对应的文本内容
$(document).ready(function(){//设置jQuery入口
$('li').on({
click:function(){//click当鼠标点击时触发该事件
console.log('click')
},
mouseenter:function(){//mouseenter当鼠标移动该元素时触发该事件
console.log('mouseenter')
}
})
// 这种方法是通过on给li绑定多个不同事件(但是这种方法一般没人用)
})
方法三:链式操作(常用)
用on
函数给元素绑定事件,太麻烦了,那我们可以通过事件函数来绑定事件这样就就简单了许多
click
事件函数的返回结果是一个jQuery dom(非破坏性操作)那么我们可以,用做链式操作
// 点击元素打印对应的文本内容
$(document).ready(function(){//设置jQuery入口代码
$('li').click(function(){
console.log('click')
}).mouseenter(function(){
console.log('mouseenter')
}).mouseleave(function(){
console.log('mouseleave')
})
//每一次事件返回结果都是jQuery dom都是一样的就可以实现链式操作
})
$函数的参数 $(参数)
1.选择器
2.原生dom 返回一个jq dom
事件处理函数中的事件对象
jQuery里面的事件对象,他是jQuery内部封装了的事件对象(jQuery.Event{}
)
当然一些jQuery里面一些属性和方法和原始js的属性方法差不多该怎么用还是怎么用
$(document).ready(function(){//数组jQuery的入口代码
$('li').click(function(e){//e表示事件对象
console.log(e.clientX,e.clientY)
})
})
off
// 解除jQuery中的事件处理函数
$(document).ready(function(){//设置jQuery的入口代码
$('li').mousemove(function(){
console.log('mousemove')
})
$('li').off('mousemove');
//通过off去处掉mousemove的事件处理函数(匿名,具名)在jQuery中都能干掉
})
off
表示清除事件处理函数:off('事件名')
jQuery这种方法很方便:off('事件名')
他可以去除具名,匿名的事件处理函数都能干掉,完美!!
焦点事件
基本CSS样式代码
*{
margin:0;
padding: 0;
}
#box{
position:absolute;
left:0;
top:0;
padding:20px 50px;
border:solid;
}
基本HTML布局代码
<div id="box">
输入用户名:<input type="text" id="text">
</div>
focus事件&&blur事件
获取焦点和失去焦点 focus
和blur
事件
jQuery,focus
获取到焦点
$(document).ready(function(){
// console.log($(':text'))//用:text选择器可以选择到type类型是text的input标签
//当type类型是text的input框获取到了焦点走一下代码
$(':text').focus(function(){
//用focus函数一旦获取到了焦点就会触发事件处理函数
console.log('focus获取到了焦点')
})
})
原生JS用onfocus
获取到焦点
// 一旦input框获取到了焦点就触发事件处理函数
document.getElementById('text').onfocus = function(){
console.log('获取到焦点')
}
jQuery,blur
失去焦点
$(document).ready(function(){
// 一点type类型是text的input标签失去了焦点就会触发blur事件函数
$(':text').blur(function(){
console.log('失去焦点')
})
})
原生JS用blur
失去焦点
// 当type类型是text的input失去了焦点就会触发onblur事件处理函数
document.getElementById('text').onblur = function(){
console.log('失去焦点')
}
focusin事件&&focusout事件
当type
类型是text
的input
标签获取到焦点,触发focusin
事件函数改变oBox
的背景颜色,并且失去焦点的时候触发focusout
事件函数改变让oBox
的背景图色为透明
$(document).ready(function(){
$('#box').focusin(function(){//获取到焦点
console.log(this)//this指向oBox(在事件中给随绑定的事件this就执行谁)
$(this).css({
backgroundColor:'pink',
})
}).focusout(function(){//失去掉焦点
$(this).css({
backgroundColor:'transparent',
})
})
})
focus
:input获取焦点时触发blur
:input失去焦点时触发focusin
绑定给可以获取焦点的父元素 当获取焦点时触发focusout
绑定给可以获取焦点的父元素 当失去焦点时触发
键盘事件
keydown
:当键盘任意键按下的时候触发keydown
事件函数
$(document).ready(function(){//设置jQuery入口代码
$(document).keydown(function(){
console.log('keydown')
})
})
keypress
:当键盘按下非功能键时触发keypress
事件函数
$(document).ready(function(){//设置jQuery入口代码
$(document).keypress(function(){
console.log('keypress')
})
//which:存储了键盘键值表的编码
})
which存储按住某个键的编码(一下是常用的)
w 119 上
s 115 下
a 97 左
d 100 右
keyup
:当键盘的任意键抬起时触发对应的事件函数
$(document).ready(function(){//设置jQuery的入口代码
$(document).keyup(function(){
console.log('keyup')
})
})
keydown
当键盘(任意键)按下时触发对应的事件函数keypress
当键盘(非功能键)按下时触发对应的事件函数keyup
当键盘(任意键)抬起时触发对应的事件函数
按住键盘(WSAD)键让小圆球移动
$(document).ready(function(){//设置jQuery的入口代码
//keypress当键盘按下非功能键时触发事件函数
$(document).keypress(function(e){
// w 119 , s 115 , a 97 , d 100
var which = e.which;//记录键盘按下时的值
var top = $('#box').position().top;
var left = $('#box').position().left;
switch(which){
case 119:
$('#box').css({top: top - 10,})
break;
case 115:
$('#box').css({top: top + 10,});
break;
case 97:
$('#box').css({left : left - 10});
break;
case 100:
$('#box').css({left : left + 10});
break;
}
})
})
hover事件
hover
事件函数就相当于原生JS的,mouseenter
鼠标进去元素时触发和mouseleave
鼠标离开元素时触发这两个事件的结合体
$(document).ready(function(){
$('#box').hover(function(){//hover第一个回调函数就相当于mouseenter
console.log('鼠标进去了')
},function(){//hover第二个回调函数就相当于mouseleave
console.log('鼠标离开了')
})
})
用on
函数进行事件委派
相当于事件委托 把li的click事件委托给ul
$(document).ready(function(){
$('ul').on('click','li',function(){
console.log($(this))
})
})
这表示的是你要把使用的li的点击事件都委派给ul,委托给父级或者是祖先元素(相当于原生JS的事件委托)