查看本章节

查看作业目录

需求说明：

使用 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. [php安全]原生类的利用

    php原生类的利用 查看原生类中具有魔法函数的类 $classes = get_declared_classes(); foreach ($classes as $class) { $methods ...

  2. 【编程思想】【设计模式】【行为模式Behavioral】访问者模式Visitor

    Python版 https://github.com/faif/python-patterns/blob/master/behavioral/visitor.py #!/usr/bin/env pyt ...

  3. 【编程思想】【设计模式】【行为模式Behavioral】中介者模式Mediator

    Python版 https://github.com/faif/python-patterns/blob/master/behavioral/mediator.py #!/usr/bin/env py ...

  4. 【编程思想】【设计模式】【创建模式creational】Pool

    Python版 https://github.com/faif/python-patterns/blob/master/creational/pool.py #!/usr/bin/env python ...

  5. 【Java 设计】如何优雅避免空指针调用

    空指针引入 为了避免空指针调用,我们经常会看到这样的语句 if (someobject != null) { someobject.doCalc();} 最终,项目中会存在大量判空代码,多么丑陋繁冗! ...

  6. 看看线程特有对象ThreadLocal

    作用:设计线程安全的一种技术. 在使用多线程的时候,如果多个线程要共享一个非线程安全的对象,常用的手段是借助锁来实现线程的安全.线程安全隐患的前提是多线程共享一个不安全的对象 ,那么有没有办法让线程之 ...

  7. Mybatis-Plus默认主键策略导致自动生成19位长度主键id的坑

    原创/朱季谦 某天检查一位离职同事写的代码,发现其对应表虽然设置了AUTO_INCREMENT自增,但页面新增功能生成的数据主键id很诡异,长度达到了19位,且不是从1开始递增的-- 我检查了一下,发 ...

  8. 赋能开发：捷码携手达内教育打造IT职业教育新生态

    近日,达内教育与远眺科技签约联合培养的第一批低代码开发方向的高职学生,在杭州未来科技城捷码总部顺利毕业,首期合格学员总数超过30名.随着这些接受了"捷码"低代码平台全程" ...

  9. [BUUCTF]REVERSE——[SUCTF2019]SignIn

    [SUCTF2019]SignIn 附件 步骤: 无壳,64位ida载入 程序调用了 __gmpz_init_set_str 函数,这是一个 GNU 高精度算法库,在RSA加密中见过几次,加上6553 ...

  10. 2、动态规划接替套路框架——Go语言版

    前情提示:Go语言学习者.本文参考https://labuladong.gitee.io/algo,代码自己参考抒写,若有不妥之处,感谢指正 关于golang算法文章,为了便于下载和整理,都已开源放在 ...