1、jQuery操作的分类
| <!DOCTYPE html> | |
| html> | |
| title> | |
| <!-- | |
| xml dom :针对于 xml文件的操作 | |
| html dom :处理html页面 document.forms[0] | |
| css dom :操作css element.style.属性名 | |
| dom core:核心！只要是支持dom编程语言都可以使用！ | |
| javaSc对ript（jQuery）对上面的dom操作都提供了支持！ | |
| jQueryjavaScript中的dom操作 进行了封装！ | |
| --> | |
| head> | |
| body> | |
| body> | |
| html> |
2、节点的操作
| <!DOCTYPE html> | |
| html> | |
| title> | |
| head> | |
| body> | |
| ul> | |
| li> | |
| li> | |
| li> | |
| li> | |
| li> | |
| ul> | |
| button> | |
| button> | |
| button> | |
| script> | |
| function(){ | |
| function(){ | |
| //创建一个节点li | |
| //把新增的节点放置到 ul的最前面 | |
| }) | |
| function(){ | |
| //创建一个节点ul | |
| }) | |
| /** | |
| * 获取li下标值是2的元素 替换 | |
| * $(节点1).replaceWith($(替换节点)) | |
| * 等同于 | |
| * $(替换节点).replaceAll($(节点1)) | |
| */ | |
| function(){ | |
| //创建替换的节点 | |
| //替换所有元素 | |
| }) | |
| //验证 clone | |
| function(){ | |
| }) | |
| //向ul中clone 节点3 | |
| }) | |
| script> | |
| body> | |
| html> |
3、删除节点
| <!DOCTYPE html> | |
| html> | |
| title> | |
| <!-- | |
| empty(), remove(), detach()三者的区别 | |
| empty():只能清空节点的内容和子元素！节点本身不会被删除！ | |
| remove(): | |
| 01.删除整个节点，包含自身和子元素！ | |
| 02.删除了节点所对应的事件 | |
| detach(): | |
| 01.删除整个节点，包含自身和子元素！ | |
| 02.不会删除节点所对应的事件 | |
| --> | |
| head> | |
| body> | |
| main | |
| div> | |
| div> | |
| div> | |
| script> | |
| function(){ | |
| function(){ | |
| }) | |
| // $first.empty(); | |
| // $first.remove(); | |
| detach(); | |
| }) | |
| script> | |
| body> | |
| html> |
4、attr属性
| <!DOCTYPE html> | |
| html> | |
| title> | |
| <!-- | |
| attr(): | |
| 01.如果只有一个参数 ，就是获取对应属性的值 | |
| 02.如果有两个参数 ，就是设置对应属性的值 | |
| --> | |
| head> | |
| body> | |
| script> | |
| function(){ | |
| function(){ | |
| //获取元素指定的属性值 | |
| alert($src); | |
| //增加鼠标悬停时的提示文字 | |
| //清除对应的属性值 | |
| }) | |
| }) | |
| script> | |
| body> | |
| html> |
5、获取同辈和父辈元素
| <!DOCTYPE html> | |
| html> | |
| title> | |
| head> | |
| body> | |
| body | |
| main | |
| first1 | |
| second1 | |
| third1 | |
| div> | |
| div> | |
| div> | |
| first2 | |
| second2 | |
| div> | |
| div> | |
| first3 | |
| second3 | |
| div> | |
| div> | |
| div> | |
| script> | |
| function(){ | |
| //获取main的子元素个数 | |
| length); | |
| //设置first1之后的兄弟节点的样式 | |
| //设置first2之前的兄弟节点的样式 | |
| //所有同辈元素 之前和之后 | |
| //设置first1的父级元素 | |
| //设置third1的祖先元素 | |
| }) | |
| script> | |
| body> | |
| html> |