查看本章节

查看作业目录

需求说明：

使用 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. Oracle中的索引

    1.Oracle 索引简介      在Oracle数据库中,存储的每一行数据都有一个rowID来标识.当Oracle中存储着大量的数据时,意味着有大量的rowID,此时想要快速定位指定的rowID, ...

  2. @Data 注解引出的 lombok

    今天在看代码的时候, 看到了这个注解, 之前都没有见过, 所以就查了下, 发现还是个不错的注解, 可以让代码更加简洁. 这个注解来自于 lombok,lombok 能够减少大量的模板代码,减少了在使用 ...

  3. CentOS 7.3安装完整开发环境

    系统版本CentOS 7.3(1611) 安装开发环境1) 通过group安装 yum groups mark install "Development Tools" yum gr ...

  4. Spring 与 SpringBoot 的区别

    概述 Spring 与 SpringBoot 有什么区别???梳理一下 Spring 和 SpringBoot 到底有什么区别,从 Spring 和 SpringBoot 两方面入手. Spring ...

  5. 对于HTML和XML的理解

    1.什么是HTML??? HTML就是 超文本标记语言(超文本含义:超过文本 --图片 .视频.音频. 超链接) 2.HTML作用 把网页的信息格式化的展现,对网页信息进行规范化展示 连接(https ...

  6. AOP中环绕通知的写法

    package com.hope.utils;import org.aspectj.lang.ProceedingJoinPoint;/** * @author newcityman * @date ...

  7. scrapy爬取招聘网站，items转换成dict遇到的问题

    pipelines代码 1 import json 2 3 class TencentJsonPipeline(object): 4 def __init__(self): 5 self.file = ...

  8. Java动态脚本Groovy读取配置文件

    前言:请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 核心涉及: @Value:作用是通过注解将常量.配置文件中的值.其他bean的属性值注入到变量中,作为变量的初始值. @Configur ...

  9. setsockopt()用法及参数详解

    setsockopt()用法(参数详细说明) int setsockopt(SOCKET s,int level,int optname,const char* optval,int optlen); ...

  10. 人工水母搜索算法--JS

    1. 人工水母算法原理背景 水母生活在世界上不同深度和温度的水中.它们酷似钟状,一些水母的直径小于1cm,然有些水母直径则非常大.它们有各种各样的颜色.大小和形状.大多数水母偏好海洋环境.它们进食的方 ...