JavaScript交互式网页设计——jQuery操作DOM

讨厌睡不着

于 2022-01-04 17:24:36 发布

阅读量592

点赞数

分类专栏： JavaScript 文章标签： jquery

本文链接：https://blog.csdn.net/qq_62296995/article/details/122257840

版权

<一>.DOM对象和jQuery对象

<1>.DOM对象: 使用JavaScript中四种获取页面元素的方法生成DOM对象（如getElementById()）,之后将生成的DOM对象存储在obj变量中，生成的DOM对象拥有很多属性和方法，可以操作指向的页面元素

<body>
		<p id="thep"></p>
		<script>
			var obj = document.getElementById("thep");
			obj.innerHTML = "我是段落标签";
		</script>
	</body>

<2>.jQuery对象：在"$()"的"()"中使用选择器选取页面元素生成jQuery对象，然后就刻意使用jQuery的方法

<body>
		<script type="text/javascript" src="../js/jquery.min.js" ></script>
		<p id="thep"></p>
		<script>
			var obj = $("#thep");
			obj.html("我是段落标签");
		</script>
	</body>

<3>.jQuery对象转化为DOM对象:使用jQuery中的get()方法，语法结构为get(index)，jQuery对象是一个可以匹配多个元素的集合，如果get()没有参数，则返回所有匹配的元素，如果有参数，则返回指定索引位置的元素

<body>
		<ul>
			<li>百度</li>
			<li>网易</li>
			<li>腾讯</li>
		</ul>
		<script type="text/javascript" src="../js/jquery.min.js" ></script>
		<script>
			var arr = $("li").get();
			for (var i = 0; i < arr.length; i++) {
				document.write(arr[i].innerHTML+"<br />")
			}
		</script>
	</body>

<4>.DOM对象转化为jQuery对象：对于一个DOM对象，只需用$()将它包起来就可以获得对应的jQuery对象，语法结构为$(DOM对象)

	<body>
		<script type="text/javascript" src="../js/jquery.min.js" ></script>
			<ul>
			<li>百度</li>
			<li>网易</li>
			<li>腾讯</li>
		   </ul>
		<script>
			//jQuery对象的变量名之前要加上$
			  var $test = $(document.getElementsByTagName("li"));
		  alert($test.eq(0).html());
		  alert($test.eq(1).html());
		</script>
	</body>

<二>.jQue