使用 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>
相关文章
|
15天前
|
JavaScript 索引
|
5天前
|
机器学习/深度学习 数据采集 存储
深度学习在DOM解析中的应用:自动识别页面关键内容区块
本文探讨了如何通过深度学习模型优化东方财富吧财经新闻爬虫的性能。针对网络请求、DOM解析与模型推理等瓶颈,采用代理复用、批量推理、多线程并发及模型量化等策略,将单页耗时从5秒优化至2秒,提升60%以上。代码示例涵盖代理配置、TFLite模型加载、批量预测及多线程抓取,确保高效稳定运行,为大规模数据采集提供参考。
|
6月前
|
JavaScript 前端开发 开发者
深入了解jQuery:轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery:轻松实现高效的DOM操作
116 0
|
6月前
|
JavaScript
在Vue中获取DOM元素的实际宽高
【10月更文挑战第2天】
787 76
|
7月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
7月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
5月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
5月前
|
JavaScript 前端开发
|
7月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
6月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
174 4