查看本章节

查看作业目录

需求说明：

使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。

要求如下：

  • 点击页面的“更改样式”按钮后，使用 jQuery 设置标题“Web 前端技术”的字体颜色为红色
  • 第一层的无序列表 <ul> 即“使用 DIV+CSS 设计前端页面”“使用 JavaScript+jQuery 制作页面特效”，列表符号是正方形
  • 第二层无序列表是说明具体章节内容的，其列表符号是三角形

实现思路：

  1. 在 HTML 页面中导入 jQuery 框架
  2. 在页面加载完毕事件中，获取标题对象，调用 css() 方法，设置字体颜色是红色
  3. 在页面加载完毕事件中，获取第一层的无序列表对象，调用 css() 方法，设置列表符号是
  4. 在页面加载完毕事件中，获取第二层的无序列表对象，调用 css() 方法，设置列表符号是

实现代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			$(function(){

				$(":input").click(function(){

					$(":header").css("color","red");

					$(":header+ul").css("list-style-type","upper-roman");

					$(":header+ul>li>ul").css("list-style-type","lower-alpha");

				})

			})

		</script>

	</head>

	<body>

		<h2>Web前端技术</h2>

		<ul>

			<li>使用DIV+CSS设计前端网页</li>

			<ul>

				<li>页面布局</li>

				<li>美化页面</li>

				<li>页面特效</li>

			</ul>

			<li>使用JavaScript+Jquery制作页面特效</li>

			<ul>

				<li>JavaScript基础</li>

				<li>Jquery选择器</li>

				<li>Jquery操作DOM</li>

			</ul>

		</ul>

		<input type="button" value="更改样式" />

	</body>

</html>

使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。的更多相关文章

  1. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  2. 使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式

    查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...

  3. JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  4. 转：Jquery如何获取某个元素前(后)的文本内容？

    原文:[解决]Jquery如何获取某个元素前(后)的文本内容? <span> text here... <a id="target_element">百万创 ...

  5. jquery选择器:获取父级元素、同级元素、子元素

    jQuery的出现给广大开发者提供了不少的方便.从要自己一个一个敲代码,到直接调用方法,无疑大大地提高了网站开发的效率.而在jQuery中有一些方法非常的实用.下面就给大家介绍下jquery选择器:获 ...

  6. js获取页面元素距离浏览器工作区顶端的距离

    先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome)  网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)       ...

  7. [jQuery]无法获取隐藏元素（display:none）宽度(width)和高度(height)的新解决方案

    在做茶城网改版工作的时候,又遇到一个新问题,我需要用jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢 ...

  8. webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

  9. jquery 选择器(name,属性,元素)大全

    jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...

随机推荐

  1. Oracle—表、约束、索引、表空间、分区、序列、统计信息

    表.约束.索引.表空间.分区.序列.统计信息 一.表及其操作 1.创建表 create table 表名 ( 字段名1 字段类型 默认值 是否为空 , 字段名2 字段类型 默认值 是否为空, 字段名3 ...

  2. 二叉树——Java实现

    1 package struct; 2 3 interface Tree{ 4 //插入元素 5 void insert(int value); 6 //中序遍历 7 void inOrder(); ...

  3. Controller返回类的自动识别，WEB-INF,jsp位置

    Controller: @Controller@RequestMapping("/params")public class ParamsController { @RequestM ...

  4. Nginx安全检查

    1.检查是否配置Nginx账号锁定策略 描述 1.执行系统命令passwd -S nginx来查看锁定状态 出现Password locked证明锁定成功 如:nginx LK ..... (Pass ...

  5. tableau绘制热力地图

    一.右键国家地区和城市字段分别设置为地理角色-国家地区和城市 二.双击国家地区和城市添加到工作表 三.把订单id拖拽至标记卡的详细信息,标记改为密度显示,颜色设置为温度发散 四.最终整理结果如下图所示

  6. vue插槽理解

    1.插槽作用:父向子传递一段Html代码块 2.分类: (1)默认插槽:规则:父给子传,用父,不传,用子. (2)具名插槽:适用于一个页面有多个插槽时,需要做区分,使用name属性.给插槽取个名字 ( ...

  7. WHUCTF PWN题目

    花了大概两天时间来做WHUCTF的题目,第一次排名这么靠前.首先感谢武汉大学举办这次萌新赛,也感谢fmyy的师傅的耐心指导,让我第一次做出堆的题目来. pwnpwnpwn 这是一道栈题目,32位程序, ...

  8. [BUUCTF]PWN——[ZJCTF 2019]Login

    [ZJCTF 2019]Login 附件 步骤: 例行检查,64位程序,开启了canary和nx保护 2. 试运行一下程序 3. 64位ida载入,检索字符串,在程序里找到了用户名admin和密码2j ...

  9. 小迪安全 Web安全 基础入门 - 第四天 - 30余种加密编码进制&Web&数据库&系统&代码&参数值

    一.密码存储加密 1.MD5值是32或16位由数字"0-9"和字母"a-f"所组成的字符串 2.SHA1加密的密文特征与MD5类似,但位数是40位 3.NTLM ...

  10. libevent源码学习（10）：min_heap数据结构解析

    min_heap类型定义min_heap函数构造/析构函数及初始化判断event是否在堆顶判断两个event之间超时结构体的大小关系判断堆是否为空及堆大小返回堆顶event分配堆空间堆元素的上浮堆元素 ...