查看本章节

查看作业目录

需求说明：

使用 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. Gradle安装与配置

    一.Gradle安装 1.Gradle安装 (1)先安装JDK/JRE (2)Gradle下载官网 Gradle官网 (3)解压安装包到想安装到的目录.如D:\java\gradle-5.2.1 (4 ...

  2. Android实现网络监听

    一.Android Wifi常用广播 网络开发中主体会使用到的action: ConnectivityManager.CONNECTIVITY_ACTION WifiManager.WIFI_STAT ...

  3. 11-如何通过newman生成不同类型的测试报告

    postman生成测试报告需要一个插件:newman ,并且这个插件需要先安装 . 安装步骤: 安装nodejs: newman是由nodejs开发,所以要先安装它的运行环境,下载地址:http:// ...

  4. spring jdbc 配置数据源连接数据库

    概述 在XML配置数据源,并将数据源注册到JDBC模板 JDBC模板关联业务增删改查 在XML配置数据源 <?xml version="1.0" encoding=" ...

  5. maven常用Java配置

    maven国内镜像 ------------------------------------------------------------------------------------------ ...

  6. Dubbo多注册中心

    一.创建提供者08-provider-registers (1) 创建工程 直接复制05-provider-group工程,并命名为08-provider-registers (2) 修改配置文件 二 ...

  7. 【Java 8】Predicate详解

    一.java.util.function.Predicate 这里类是java自带主要广泛用在支持lambda表达式的API中. 1.接口源码 @FunctionalInterface public ...

  8. Vector Bin Packing 华为讲座笔记

    Vector bin packing:first fit / best fit / grasp 成本:性价比 (先验) 设计评价函数: evaluation function:cosine simil ...

  9. Redis学习推荐资料合集

    目录 一.官方 二.书籍 三.推荐博客 一.官方 redis官网 redis中文网 redis中文命令网 redis模块 redis-github源码 redis报告 二.书籍 <Redis开发 ...

  10. Mybatis环境搭建及测试

    1.新建java project,导入相应jar包 本次使用到的mybatis-3.2.7版本 mybatis需要jar包:mybatis-3.2.7.jar.lib文件下的依赖jar mysql驱动 ...