04 DOM与jQ节点操作

1.1 常用方法

html()： 原理就是为元素设置innerHTML属性

addClass() 添加类

removeClass() 删除类

hasClass() 判断类

toggleClass() 切换类

attr(key, value )： 设置元素的原有属性; 传一个参数，读取元素的原有属性值

1. 不论是html，还是css，还是attr方法，修改的时候，可以修改所有获取的元素，获取的时候，只能获取第一个元素的数据

1.2 节点操作

$(this)：在事件回调函数中，获取当前元素对应的jq对象。

parent()：父节点（元素的父亲节点，不能选中爷爷）

children()：子节点（不包含后代）。小括号中可以书写参数，表示指定的某个儿子。

siblings()：亲兄弟。

next: 选中下一个兄弟节点

nextAll: 会选中后面所有的兄弟节点

prev: 选中上一个兄弟节点

prevAll: 会选中前面所有的兄弟节点

parents: 会选中祖先节点

find： 会选中后代节点

连续打点：节点操作可以连续打点。

注：end方法可以中断查找，返回上一个jq对象。

1.3 序号问题

eq()：表示在选中的元素队列的排名

index()：表示选中元素在亲兄弟的排名

each()：用于遍历、循环所匹配到的每一个元素，参数是函数，函数中也有this，表示遍历到的该对象

$(selector).each(function(index,element))

• index - 选择器的 index 位置
• element - 当前的元素（也可使用 "this" 选择器）

1.4 动画

animate(json, time, callBack)    执行 CSS 属性集的自定义动画。( json： 样式对象   time:：完成动画的时间ms    callBack：回调函数)

1.5 延迟与终止

delay：表示延迟，只能够书写在动画之前，参数就是要延迟的时间

stop：该方法用于让运动的元素立即停止动画，接收两个参数，都是布尔值，默认是false

第一个参数表示是否清空当前动画队列

第二个参数表示是否立即完成当前动画

stop(false, false)： 等价于stop() 立即进入下一个动画，立即停止当前执行动画

stop(false,true)：立即进入下一个动画，立即停止并完成当前动画

stop(true, true)： 清空当前动画队列， 立即停止并完成当前动画

stop(ture, false)：等价于stop(true) 清空当前动画队列，立即停止当前动画

$(selector).is(‘:animated’) 表示正在执行动画

animate()	对被选元素应用“自定义”的动画
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
hide()	隐藏被选的元素
show()	显示被选的元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	对被选元素进行滑动隐藏和滑动显示的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止在被选元素上运行动画
toggle()	对被选元素进行隐藏和显示的切换

2.1 节点类型 DOM

	nodeType	nodeName	nodeValue
元素类型	1	DIV 大写标签名
属性类型	2	id    小写属性名	demo  属性值
文本类型	3	#text	文本内容
注释类型	8	#comment	注释里面写的文字
文档类型	9	#document	null

2.1 节点关系 DOM

father.childNodes // 获取所有的子节点

father.firstChild // 获取到第一个子节点

father.lastChild // 获取到最后一个子节点 

child.parentNode // 获取到父节点

node.nextSibling // 获取到下一个兄弟节点

node.previousSibing // 获取到上一个兄弟节点

2.2 节点操作  DOM

创建元素：使用方式：document.createElment(type)  type: 创建的类型 是一个字符串

创建文本：document.createTextNode(content)   content：表示文档内容

节点上树 ： father.appendChild(child)

节点下树 ： father.removeChild(child)

节点插入 father.insertBefore(newChild, oldChild)

节点替换 ：father.replaceChild(newChild, oldChild)

节点克隆：node.cloneNode(bool)   bool： 是一个布尔值，默认false , 只复制自身，如果传递是true表示连同子节点一起复制

3.3 jQuery 操作

$(father).append(child)：在father的后面追加child元素

$(father).prepend(child): 在father的前面追加child元素

$(child).appendTo(father): 将child追加到father的最后去

$(child).prependTo(father): 将child追加到father的前面去

$(dom).after(element): 在dom的后面追加element元素

$(dom).before(element)： 在dom的前面追加elment元素

$(dom).insertBefore(element): 在element的前面追加dom元素

$(dom).insertAfter(element): 在element的后面追加dom元素

节点外部包装：wrap 与 wrapAll，

去掉外层节点：unwrap

元素替换：replaceWith与replaceAll

清空后代：empty

删除元素：remove

克隆元素：clone(bool)是一个布尔值，默认是false, 连同子节点一起复制，如果传递true, 连同子元素及其事件一起复制