jQueryHTML与插件

一、jQuery 事件机制

(1) 、注册事件

bind() 、on(‘事件类型’,‘事件处理程序’) 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

bind() /on()({
事件类型：function(){}
事件类型：function(){}
……
})

 $("#header1").bind({
    mouseover() {
      $(this).css("background-color", "blue");
    },
    mouseout() {
      $(this).css("background-color", "black");
    }
  })

(2)、委托事件

(3)、事件对象event

(4)、each()方法

(5)、jQuery.each()/$.each(‘对象/数组’,‘function(’ key/index ‘,’ value/iteam ‘)’) 函数用于遍历指定的对象和数组。

二、jQuery 对HTML的设置与捕获

(1)、html() - 设置或返回所选元素的内容（包括 HTML 标记）innerHTML

(2)、text() - 设置或返回所选元素的文本内容 innerText

(3)、val() - 设置或返回表单字段的值

(4)、attr() 、prop()方法用于获取和返回属性值

区别：

1、 attr()：可以获取和设置本身和自定义属性

prop()：只能设置获取自身有的属性

2、对于表单元素 disabled checked selected 要用prop()

三、jQuery 对HTML的页面尺寸操作

(1)、width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。//width

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。//height

(2)、innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。//clientWidth

innerHeight() 方法返回元素的高度（包括内边距）。//clientHeight

(3)、outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。//offsetWidth

outerHeight() 方法返回元素的高（包括内边距和边框）。//offsetHeight

(4) 、scrollTop() 和 scrollLeft() 方法

scrollTop() 方法设置或者返回滚动条被卷去的元素的高度

scrollLeft() 方法设置或者返回滚动条被卷去的元素的宽度

四、jQuery添加元素和删除元素

(1) 、append()方法

append() 方法在被选元素的结尾插入内容（仍然在该元素的内部） 

$(“ol”).append(“

• 追加列表项
• ”);

  (2) 、prepend() 方法

  prepend() 方法在被选元素的开头插入内容。
  

  $(“ol”).prepend(“

• 追加列表项
• ”);

  (3) 、after() 和 before() 方法

  jQuery after() 方法在被选元素之后插入内容。
  
  jQuery before() 方法在被选元素之前插入内容。
  
  $("img").before("<b>之前</b>");
  
  $("img").after("<i>之后</i>");
  

  (4) 、删除元素/内容

  remove() - 删除被选元素（及其子元素）
  
  empty() - 从被选元素中删除子元素
  
  empty()把子元素删除掉了。本身没有删除掉。所以本身占位置
  
  remove()把自己和子元素都删除掉了。本身已删除掉。所以不占位置