事件
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的事件委托)
