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>