jquery 的dom操作将复杂的dom操作简单化,更注重业务逻辑的操作,有查找、删除、修改、插入、复制、替换操作;
获取dom节点,对dom进行操作;
原生流程,创建节点(元素,属性,文本),元素document.createElement 设置属性,setAttribute 添加文本innerHTML, 加入文档appendChild
dom节点的创建
jquery :$("html结构") 可以创建元素、文本、属性节点;
dom节点的插入
.append(content)向匹配的元素内部加入内容;.appendTo(content) 把所有匹配的元素增加到另一个、指定的元素集合中;两者内容和方法相反;
.preapend(content) .preappendTo(content) 向匹配的元素内部加入前置内容,作为第一个子元素;后者方法和内容相反;
.before(content) .after(content)在匹配的元素集合中的前面或者后面加入内容作为兄弟节点;
.insertBefore(content) .insertAfter()和上面的功能相同,主要区别是语法,内容和目标相反;
dom节点的删除;
.empty()删除子元素及子元素内的文本;.remove() 无参数删除元素自身及子元素的一切内容;内部会自动销毁事件的方法;有参数可以选择性的删除某节点.remove(":contains('3')") .detach()保留数据 的删除元素节点;绑定的事件和附加的数据会保存下来;.append()之后又会出现;
dom节点的拷贝;.clone(),无参数只克隆节点,有参数true克隆节点和事件;
dom节点的替换:.replaceWith(newContent) .repalceAll(target)替换指定的元素,两者目标和源的内容位置相反,功能一样;
dom节点的包裹:.wrap()给匹配的元素增加一个html结构或者一个回调函数返回一个html结构或者一个jquery对象;增加一个父元素 而unwrap()则是删除元素的父元素;
.wrapAll()给集合中的元素增加一个父元素包裹,如果是回调函数则是给集合中的每一个元素单独处理增加一个父元素包裹;‘’
.wrapInner(),给集合中匹配的每一个元素内部增加一个包裹的html结构;
遍历
.children(),快速查找合集里第一级子元素;仅仅父子辈分,祖孙不算;find()方法是后代关系;包含父子关系;.parent()查找合集里每一个元素的父元素;.parents()查找所有祖辈元素;.closest()与.parents()方法类似,有细微的区别是它可以接受匹配的元素的选择器字符串;.next()匹配合集中每一个元素的下一个兄弟元素,接受同一类型选择器表达式;pre()匹配合集中每一个元素的上一个兄弟元素..;siblings()兄弟元素;.add()方法 。。each()方法:for循环的包装迭代器,用回调方式处理,有index element两个实参,this指当前的dom元素;