JQuery事件
- window事件
- 鼠标事件
- 键盘事件
- 表单事件
- 事件注册语法
- $(对象).type(fn)
- type是事件名
- fn是事件处理函数
-
bind()方法和on()方法类绑定单个事件
image.png
- $(对象).type(fn)
bind,on方法同时为多个事件绑定方法
$("input[name = event_1]").on({
mouseover.function(){
$("ul").css("display", "none");
},
mouseout.function(){
$("ul").css("display","block");
}
})
bind ,和on的区别
bind方法与on方法都是事件绑定，但是两者却又有着一个大区别：事件委托
当我们想要使用事件委托的时候，我们想到的肯定是on方法。而不是bind方法，因为相比bind方法，on方法多了一个selector方法，也就是子类选择器
移除事件使用unbind()方法和off()方法：
$(对象).off([type],[fn]) 当不带参数时表示移除所绑定的全部事件。
delegate（）方法用于委托事件的注册。
定义和用法:
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
trigger()用于主动触发事件处理程序
$("button").click(function(){
$("input").trigger("select");
});
事件参数
- 事件参数可以提供事件处理函数需要的数据
- 键盘事件提供当前按键编码参数
- 鼠标事件提供鼠标当前坐标参数
- 普通事件提供数据对象作为参数，事件处理函数通过data属性获取
DOM
内容及value属性值的操作
节点操作
- 查找节点（利用选择器）
-
创建节点
$(html)：使用HTML字符串创建jQuery节点
$(selector)：通过选择器获取节点ff
$(element)：把DOM节点转化成jQuery节点
image.png
-
插入节点
image.png
image.png 删除节点
remove()：删除整个节点(节点.remove())
detach()：删除整个节点，保留元素的绑定事件、附加的数据
empty()：清空节点内容替换节点
replaceWith()和replaceAll()用于替换某个节点-
复制节点
clone()用于复制某个节点-
可以使用clone()实现输出DOM元素本身的HTML
clone()用于复制某个节点
image.png
-
节点属性操作
attr()用来获取与设置元素属性
image.png
removeAttr()用来删除元素的属性
image.png
除css()外，还有获取和设置元素高度、宽度、相对位置等的样式操作方法
image.png
节点遍历
children()方法可以用来获取元素的所有子元素
image.png
jQuery中可以遍历前辈元素，方法如下：
parent()：获取元素的父级元素
parents()：元素元素的祖先元素
JQuery动画
image.png
image.png
fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
image.png
slideDown() 可以使元素逐步延伸显示，slideUp()则使元素逐步缩短直至隐藏
image.png
JQuery-Ajax
使用$.ajax() 实现异步交互
image.png
