使用 jQuery对象设置页面中 ＜ul＞ 元素的标记类型，并使用 DOM 对象设置 ＜li＞ 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
查看本章节
查看作业目录
需求说明：
使用 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>
使用 jQuery对象设置页面中 ＜ul＞ 元素的标记类型，并使用 DOM 对象设置 ＜li＞ 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性的更多相关文章
- jQuery常用方法一览及JQuery选择器获取表格中按钮所在行的其他列值
Attribute: $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式$(”img”).attr({src:”test.jpg”,alt:”test Image”}); ...
- Web前端开发最佳实践（4）：在页面中添加必要的meta信息
meta标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,例如,简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. ...
- 对象在hibernate中的状态
首先hibernate中对象的状态有三种:瞬态.游离态和持久态,三种状态转化的方法都是通过session来调用,瞬态到持久态的方法有save().saveOrUpdate().get().load() ...
- js引入php 用来加载静态页面 输出到页面中
HTML页面中加入代码 <script type="text/javascript" src="http://www.域名.com/js.php?id=tjyd&q ...
- 【转载】Visual Studio2017中如何设置解决方案中的某个项目为启动项目
在C#的应用程序开发过程中,一个完成的解决方案可能包含多个子项目,有时候需要设置某一个子项目为启动项目,在Visual Studio 2017集成开发工具中,设置解决方案中的某个项目为启动项目的操作方 ...
- 使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery如何获得<iframe>嵌套页面中的元素
DOM方法:父窗口操作IFRAME:window.frames["iframeSon"].documentIFRAME操作父窗口: window.parent.documentjq ...
- 使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...
- jQuery基础学习5——JavaScript方法获取页面中的元素
给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
随机推荐
- Linux信号1
信号(signal)是一种软中断,他提供了一种处理异步事件的方法,也是进程间唯一的异步通信方式.在Linux系统中,根据POSIX标准扩展以后的信号机制,不仅可以用来通知某进程发生了什么事件,还可以给 ...
- 深入 char
深入 char * ,char ** ,char a[ ] ,char *a[] 内核分类: c语言 2013-02-23 15:34 15176人阅读 评论(8) 收藏 举报Charcharchar ...
- entfrm开发平台，一个免费开源可视化的无代码开发平台
简介 entfrm开发平台,是一个以模块化为核心的无代码开发平台,是一个集PC和APP快速开发.系统管理.运维监控.开发工具.OAuth2授权.可视化数据源管理与数据构建.API动态生成与统计.工作流 ...
- Service Worker的应用
Service Worker的应用 Service worker本质上充当Web应用程序.浏览器与网络(可用时)之间的代理服务器,这个API旨在创建有效的离线体验,它会拦截网络请求并根据网络是否可用来 ...
- Solon 1.6.6 发布，细节打磨
Solon 已有120个生态扩展插件,此次更新主要为细节打磨: 增加 @Inject("ds1") BeanWrap bw 模式注入 @Configuration public c ...
- Kubernetes-存储(二)
前言 本篇是Kubernetes第十三篇,大家一定要把环境搭建起来,看是解决不了问题的,必须实战. Kubernetes系列文章: Kubernetes介绍 Kubernetes环境搭建 Kubern ...
- netty系列之:一个价值上亿的网站速度优化方案
目录 简介 本文的目标 支持多个图片服务 http2处理器 处理页面和图像 价值上亿的速度优化方案 总结 简介 其实软件界最赚钱的不是写代码的,写代码的只能叫马龙,高级点的叫做程序员,都是苦力活.那么 ...
- inndy_rop
又学习到了一个新知识 拿到题目例行检查,发现是32位的程序,放入ida中 进入main看到了一个overflow函数进入查看 存在明显的栈溢出,看到题目知道要用rop来做,但是完全没有思路, 后来发现 ...
- [BUUCTF]PWN5——ciscn_2019_n_1
[BUUCTF]PWN5--ciscn_2019_n_1 题目网址:https://buuoj.cn/challenges#ciscn_2019_n_1 步骤: 例行检查,64位,开启了nx保护 nc ...
- 多个工作簿拆分（Excel代码集团）
一个文件夹里有N个工作簿,每个工作簿中包括N个工作表,将各个工作表拆分成工作簿,命名为每个工作簿里第一个工作表的A列和B列. 工作簿.工作表数量不定,表内内容不限,拆分后保存于当前文件夹下的" ...