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

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

需求说明:


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


65.png


实现思路:


在页面中添加 <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>
相关文章
|
1月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
1月前
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
12 0
|
5月前
|
JavaScript 前端开发
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
50 0
N..
|
1月前
|
JavaScript 前端开发 容器
jQuery中的DOM操作
jQuery中的DOM操作
N..
14 1
|
1月前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
9 0
|
1月前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
10 0
|
1月前
|
JavaScript
jquery给轮播图的第一张设置class样式
jquery给轮播图的第一张设置class样式
9 0
|
3月前
|
JavaScript
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
25 0
|
3月前
|
JavaScript
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
27 0
|
3月前
|
JavaScript 索引
jquery操作select(取值,设置选中)
jquery操作select(取值,设置选中)

相关课程

更多