需求说明:
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
实现思路:
在页面中添加 <ul> 标签,用来显示无序列表
在 <ul> 标签下加入 4 个 <li> 标签,每个 <li> 标签中加入一个超链接,超链接显示的文本标签分别为首页、新闻、消息和关于
在页面中引入 jQuery 文件
在页面框架下载完成后,使用 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>