jQuery-操作DOM
使用jQuery操作DOM
dom : 文档对象模型 就是HTML元素
$() 函数的2个用法:
用法1:放入一个字符串(选择器)表示获取元素 例如
$("p") $("#abc") $(".del") 用法2:放入一个函数，表示文档就绪函数 例如
$(function(){代码...})用法3:如下所示
jquery创建节点的方法如下：
1.创建节点 语法如下:
$("xxxxx");xxx表示你要创建的dom元素 例如 $("<p>我是p标签<p>");
此时仅仅是创建了节点.理解为是孤儿节点. 需要将其插入到某个节点中.
在任意位置创建新的节点
插入方法1:
append() 表示插入到指定元素内部的尾端.
语法:
$("aa").append("bb") 表示将bb插入到aa内部的尾端
插入方法2:prepend() 表示插入到指定元素内部的首端.
语法:
$("aa").prepend("bb") 表示将bb插入到aa内部的首端
插入方法3:after() 表示插入到指定元素的后面. 兄弟关系
语法:
$("aa").after("bb") 表示将bb插入到aa的后面
插入方法4:before() 表示插入到指定元素的前面. 兄弟关系
语法:
$("aa").before("bb")表示将bb插入到aa的前面
删除任意位置的节点
方法1: remove()
语法如下:
$("xx").remove();将xx元素彻底删除 不仅删除了值 而且删除了标签
//方法2: empty() 清空
语法如下:
$("xx").empty(); 将xx元素删除值 但是不删除标签
克隆节点
语法:
$("xxx").clone(); 将xxx元素复制一份
注意事项:上一步仅仅只是复制 此时理解为孤儿节点. 任然需要通过append prepend after before进行粘贴
一些方法
隐藏XX元素
$("xx").hide();显示XX元素
$("xx").show();来回切换：显示或隐藏XX元素
$("xx").toggle();给元素添加类名为a
$("xx").addClass("a");给元素移除类名为a
$("xx").removeClass("aa);返回当前元素在兄弟中下标
$("xx").index();获取当前的元素
$(this);jquery对象的特点:
调用任意方法的返回值 依然是它本身
$("p").addClass("a").addClass("b").addClass("c").click(function(){alert(123);}).mouseover(function(){alert(567)}).removeClass("c");each方法的语法:
$("xx").each( function(){ 代码体 } );作用：遍历xx元素.每遍历一次 就执行一次代码体.
客串知识点
parent()方法的作用：
<div><p><font>aaa</font></p>
</div><script src="js/jquery.js"></script><script>//需求:删除font标签的父亲$("p").parent().remove();</script>