查看本章节

查看作业目录


需求说明:

使用 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>

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

  1. jQuery常用方法一览及JQuery选择器获取表格中按钮所在行的其他列值

    Attribute: $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式$(”img”).attr({src:”test.jpg”,alt:”test Image”}); ...

  2. Web前端开发最佳实践(4):在页面中添加必要的meta信息

    meta标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,例如,简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. ...

  3. 对象在hibernate中的状态

    首先hibernate中对象的状态有三种:瞬态.游离态和持久态,三种状态转化的方法都是通过session来调用,瞬态到持久态的方法有save().saveOrUpdate().get().load() ...

  4. js引入php 用来加载静态页面 输出到页面中

    HTML页面中加入代码 <script type="text/javascript" src="http://www.域名.com/js.php?id=tjyd&q ...

  5. 【转载】Visual Studio2017中如何设置解决方案中的某个项目为启动项目

    在C#的应用程序开发过程中,一个完成的解决方案可能包含多个子项目,有时候需要设置某一个子项目为启动项目,在Visual Studio 2017集成开发工具中,设置解决方案中的某个项目为启动项目的操作方 ...

  6. 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Jquery如何获得<iframe>嵌套页面中的元素

    DOM方法:父窗口操作IFRAME:window.frames["iframeSon"].documentIFRAME操作父窗口: window.parent.documentjq ...

  8. 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  9. jQuery基础学习5——JavaScript方法获取页面中的元素

    给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

随机推荐

  1. zabbix之二进制安装

    #:参考官方网站 https://www.zabbix.com/documentation/4.0/manual/installation/install_from_packages/debian_u ...

  2. swagger文档

    关键配置文件 spring boot demo pom.xml <?xml version="1.0" encoding="UTF-8"?> < ...

  3. 使用NSURLSessionDownloadTask实现大文件下载-监听下载进度

    - 5.1 涉及知识点(1)创建NSURLSession并设置代理,通过NSURLSessionDownloadTask并以代理的方式来完成大文件的下载 //1.创建NSURLSession,设置代理 ...

  4. 【编程思想】【设计模式】【结构模式Structural】front_controller

    Python版 https://github.com/faif/python-patterns/blob/master/structural/front_controller.py #!/usr/bi ...

  5. Redis,Memcache,MongoDb的特点与区别

    Redis Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支 ...

  6. jQuery对象进行方法扩展

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>01 ...

  7. 利用模块加载回调函数修改PE导入表实现注入

    最近整理PE文件相关代码的时候,想到如果能在PE刚刚读进内存的时候再去修改内存PE镜像,那不是比直接对PE文件进行操作隐秘多了么? PE文件在运行时会根据导入表来进行dll库的"动态链接&q ...

  8. Spring事务什么时候会失效?

    面试官:Spring事务什么时候会失效? 应聘者: 访问权限问题 方法用final修饰 未被Spring管理 错误的传播特性 自己吞了异常 手动抛了别的异常 自定义了回滚异常 方法内部调用 1.访问权 ...

  9. 对QuerySet的理解

    1. 如何通过Django的Model操作数据库? 在Django的Model中,QuerySet是一个很重要的概念.因为我们同数据库的所有查询以及更新交互都是通过它来完成的. 2. Django的M ...

  10. TensorFlow.NET机器学习入门【0】前言与目录

    曾经学习过一段时间ML.NET的知识,ML.NET是微软提供的一套机器学习框架,相对于其他的一些机器学习框架,ML.NET侧重于消费现有的网络模型,不太好自定义自己的网络模型,底层实现也做了高度封装. ...