使用 jQuery对象设置页面中 ＜ul＞ 元素的标记类型，并使用 DOM 对象设置 ＜li＞ 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性

时间：2023-03-08 22:08:36

查看本章节

查看作业目录

需求说明：

使用 jQuery对象设置页面中 <ul> 元素的标记类型，并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性

使用 jQuery对象设置页面中 ＜ul＞ 元素的标记类型，并使用 DOM 对象设置 ＜li＞ 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性

实现思路：

  1. 在页面中添加 <ul> 标签，用来显示无序列表
  2. 在 <ul> 标签下加入 4 个 <li> 标签，每个 <li> 标签中加入一个超链接，超链接显示的文本标签分别为首页、新闻、消息和关于
  3. 在页面中引入 jQuery 文件
  4. 在页面框架下载完成后，使用 jQuery 中的选择器获取页面的 <ul> 元素和所有的 <li> 元素，使用 jQuery对象的 css() 方法设置 <ul> 元素的标记类型，使用 jQuery 对象中的 get() 方法将 <li> 元素的 jQuery 对象转换成 DOM 对象，遍历 DOM 对象，使用 DOM 对象中的 style 样式设置 <li> 元素的浮动和右边距

实现代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

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

		<script type="text/javascript">

			$(function(){

				$("ul").css("list-style-type","none");

				var lis = $("li").get();

				for(var i=0;i<lis.length;i++) {

					lis[i].style.float ="left";

					lis[i].style.marginLeft="10px";

				}

			});

		</script>

	</head>

	<body>

		<ul>

			<li><a href="#">首页</a></li>

			<li><a href="#">新闻</a></li>

			<li><a href="#">消息</a></li>

			<li><a href="#">关于</a></li>

		</ul>

	</body>

</html>