2018-09-10JQuery高级应用

JQuery事件

• window事件
• 鼠标事件
• 键盘事件
• 表单事件
• 事件注册语法
  • $(对象).type(fn)
    • type是事件名
    • fn是事件处理函数

  • bind()方法和on()方法类绑定单个事件

    
    
    

    image.png

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属性值的操作

节点操作

• 查找节点（利用选择器）

• 创建节点
  $(selector)：通过选择器获取节点ff
  $(element)：把DOM节点转化成jQuery节点
  

  $(html)：使用HTML字符串创建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