JavaQuery操作对象

1、jQuery操作的分类

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Dom的分类</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>
	<head lang="en">
	<meta charset="UTF-8">
	<title>节点的操作</title>
	</head>
	<body>

	<ul>
	<li>大家辛苦了</li>
	<li>不交作业了</li>
	<li>就是不交</li>
	<li>气死你</li>
	<li>伤害了谁？</li>
	</ul>

	<button type="button" id="addLi">新增子节点</button>
	<button type="button" id="addUl">新增同辈节点</button>
	<button type="button" id="updateLi">替换下标为2节点</button>


	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">

	$(function(){
	$("#addLi").click(function(){
	//创建一个节点li
	var $newLi=$("<li>新增的作业</li>");
	//把新增的节点放置到 ul的最后 $("ul").append($newLi); $newLi.appendTo($("ul"));
	//把新增的节点放置到 ul的最前面
	$("ul").prepend($newLi); //等同于 $newLi.prependTo($("ul"));
	})

	$("#addUl").click(function(){
	//创建一个节点ul
	var $newUl=$("<ul><li>新增1</li><li>新增2</li></ul>")
	//把新增的ul放置在我们ul之后 $("ul").after($newUl); $newUl.insertAfter($("ul"));
	//把新增的ul放置在我们ul之前 $("ul").before($newUl);
	$newUl.insertBefore($("ul"));
	})
	/**
	* 获取li下标值是2的元素替换
	* $(节点1).replaceWith($(替换节点))
	* 等同于
	* $(替换节点).replaceAll($(节点1))
	*/

	$("#updateLi").click(function(){
	//创建替换的节点
	var $updateLi=$("<li style='color: red'>我是替换节点</li>");
	//获取下标是2的元素$("li:eq(2)").replaceWith($updateLi);
	//替换所有元素
	$("li:eq(0)").replaceAll($("li:eq(4)"));
	})

	//验证 clone
	$("li:eq(2)").mouseover(function(){
	$(this).css({"background":"red"});
	})

	//向ul中clone 节点3
	$("li:eq(2)").clone().appendTo("ul");
	// $("li:eq(2)").clone(true).appendTo("ul"); 会绑定事件，样式



	})



	</script>

	</body>
	</html>

3、删除节点

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>删除节点</title>
	<!--
	empty(), remove(), detach()三者的区别

	empty():只能清空节点的内容和子元素！节点本身不会被删除！
	remove():
	01.删除整个节点，包含自身和子元素！
	02.删除了节点所对应的事件
	detach():
	01.删除整个节点，包含自身和子元素！
	02.不会删除节点所对应的事件
	-->

	</head>
	<body>
	<div id="main">
	main
	<div id="first">first
	<div>里面的子元素</div>
	</div>
	</div>


	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">

	$(function(){
	var $first=$("#first");

	$first.click(function(){
	alert("first");
	})
	// $first.empty();
	// $first.remove();
	$first.detach();
	$first.prependTo("body");

	})


	</script>
	</body>
	</html>

4、attr属性

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>attr属性</title>
	<!--
	attr():
	01.如果只有一个参数，就是获取对应属性的值
	02.如果有两个参数，就是设置对应属性的值
	-->
	</head>
	<body>
	<img src="../images/cat.jpg">


	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">

	$(function(){
	$("img").click(function(){
	//获取元素指定的属性值
	var $src= $(this).attr("src");
	alert($src);
	//增加鼠标悬停时的提示文字
	$(this).attr({"title":"这是一只可爱的小猫咪","width":"200px"});
	//清除对应的属性值
	$(this).removeAttr("src");
	})

	})


	</script>
	</body>
	</html>

5、获取同辈和父辈元素

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>获取同辈和父辈元素</title>
	</head>
	<body>
	body
	<div id="main">
	main
	<div id="first1">
	first1
	<div id="second1">
	second1
	<div id="third1">
	third1
	</div>
	</div>
	</div>
	<div id="first2">
	first2
	<div id="second2">
	second2
	</div>
	</div>
	<div id="first3">
	first3
	<div id="second3">
	second3
	</div>
	</div>
	</div>

	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">

	$(function(){
	//获取main的子元素个数
	alert("main的子元素个数"+$("#main").children().length);

	//设置first1之后的兄弟节点的样式
	// $("#first1").next().css({"color":"red"});
	//设置first2之前的兄弟节点的样式
	//$("#first2").prev().css({"color":"red"});
	//所有同辈元素之前和之后
	//$("#first2").siblings().css({"color":"red"});

	//设置first1的父级元素
	// $("#first1").parent().parent().css({"color":"red"});
	//设置third1的祖先元素
	$("#third1").parents().css({"color":"pink"});
	})
	</script>
	</body>
	</html>

巴特西

JavaQuery操作对象

1、jQuery操作的分类

2、节点的操作

3、删除节点

4、attr属性

5、获取同辈和父辈元素

最新文章

热门文章