Day049--jQuery的文档操作和事件介绍

今日内容

DOM操作(CRUD)

js中DOM

document.createElement('p')
appendChild()
insertBefore()
removeChild()

创建元素

$('span')

后置插入操作

//如果是jQuery对象,相当于移动操作  string是使用最多
父.append(子);// 子元素既可以是jquery对象,js对象,string

子.appendTo(父);

前置插入

父.prepend(子)

子.prepenTo(父)

兄弟插入(后)

目标兄弟.after(要插入的兄弟)
要插入的兄弟.inertAfter(目标兄弟)

兄弟插入(前)

目标兄弟.before(要插入的兄弟)
要插入的兄弟.inertBefore(目标兄弟)

删除和清空

//删除
$(seletor).remove();//删除整个标签 事件也删除
$(seletor).detach()//删除整个标签 事件保留

//清空
$(seletor).empty();
$(seletor).html('');
$(seletor).text('');

替换

replaceWith();
replaceAll();

事件

onclick

ondblclick

onmouseover

onmouseout

onmouseenter

onmouseleave

onload

onresize

onscroll

onfocus

onblur

oninput

事件监听

DOM的2级事件

• 事件捕获

• 处于目标阶段

• 事件冒泡阶段

  oDiv.onclick = function(){};
  
  等价于
  
  //false 表示没有捕获阶段 处于目标 冒泡
  
  oDiv.addEventListener('click',function(){},false);

数据驱动视图(双向的数据绑定)

事件对象(event)

每个事件都会默认有个event对象

e.target 事件目标对象
e.keycode 键码
e.stopPropagation();//阻止默认事件

jquery的事件

• click 单击事件(常用)
• dblclick 双击事件 (系统默认两次单机鼠标时间间隔500ms)
• mouseover 鼠标移入事件(鼠标穿过被选元素或被选元素的子元素会触发)
• mouseout
• mouseenter(常用)进入事件(鼠标只穿过被选元素会触发事件)
• mouseleave
• mousedown 鼠标按下
• mouseup 鼠标弹起