题目：页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红，当点击某个li的时候，让该li之前的所有li背景色变黄，之后的所有li背景色变蓝。自己不变色。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<!--页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红，当点击某个li的时候，让该li之前的所有li背景色变黄，之后的所有li背景色变蓝。自己不变色。-->

<script src="jquery-1.11.2.min.js"></script>

<style type="text/css">

.aaa{

    border:2px solid #30F;

    width:200px;

     margin:0 auto;

    }

</style>

</head>

<body>

<div style=" width:400px; text-align:center; float:left;">

<ul class="aaa" id="a">

<center><h2>ul1</h2></center>

    <li>球队1</li>

    <li>球队2</li>

    <li>球队3</li>

    <li>球队4</li>

    <li>球队5</li>

</ul>

</div>

<div style=" width:400px; text-align:center; float:left;">

<ul class="aaa" id="b">

    <center><h2>ul2</h2></center>

    </ul>

    </div>

</body>

</html>

<script type="text/javascript">

$(document).ready(function(e) {

    $("#a li").click(function(e){

        var li ="<li>"+$(this).text()+"</li>";

        $("#b").append(li);

    });

});

</script>

显示的结果：：

PHP----练习------球队列表的更多相关文章

  1. JQuery基础一

    1.在浏览器点击F12,调出源码设置端点F11进行调试 2.要操作DOM对象,首先要把DOM对象封装成juery对象: jQuery(document).ready(function () { ale ...

  2. jQuery小例子

    map遍历数组 //=========for循环遍历========== var arr[1,2,3,4,5]; for(var i=0;i<=arr.length;i++) { arr[i]= ...

  3. jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器）

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  4. 静态Web开发 JQuery

    伍章 JQuery 1节介绍JQuery和顶级对象 <<锋利的JQuery>>JQuery官网: http://jquery.com (下载jquery工具)JQuery在线A ...

  5. 静态Web开发 DOM

    四章 Dom 1节dom中的顶级对象 dom(文档对象模型)js最终是要操作html页面,让html变成DHtml,而操作Html页面就要用到DOMDOM可以吧Html页面模拟成一个对象,如果js只是 ...

  6. 一周一话题之四（JavaScript、Dom、jQuery全面复习总结<jQuery篇>）

    -->目录导航 一. 初探Jquery 1. 介绍 2. 基础 二. Jquery操作 1. jQuery页面加载 2. 选择器 3. 操作Dom 三. Jquery进阶 1. 隐式迭代与链式编 ...

  7. jQuery链式编程

    链式编程 多行代码合并成一行代码,前提要认清此行代码返回的是不是对象.是对象才能进行链式编程 .html(‘val’).text(‘val’).css()链式编程,隐式迭代 链式编程注意:$(‘div ...

  8. 《JavaWeb程序开发入门》课后题

    第一章 1.请编写一个格式良好的XML文档,要求包含足球队一支,队名为Madrid,球员5人:Ronaldo.Casillas.Ramos.Modric.Benzema:篮球队一支,队名为Lakers ...

  9. 体育类App原型制作分享-Onefootball

    Onefootball 是一款适合于足球迷的应用,提供全球 100 多项赛事的新闻.数据.比分和直播.原型中选择“喜欢的球队”这个界面中,用到了悬浮按钮,采用的是滚动区来放置需要滚动的球队列表,然后将 ...

随机推荐

  1. Laravel 使用Voyager导致多个数据库连接总是返回默认连接？

    问题与分析 最近的项目碰到一个奇怪的问题,在Laravel(5.3)中想建立多个数据库连接连到MySQL的不同数据库(另一个连接名为conn2),执行如下语句得到却发现得到的仍然是默认连接: $con ...

  2. SpringBoot和SpringCloud区别

    SpringBoot专注于快速方便的开发单个个体微服务.    SpringCloud是关注全局的微服务协调整理治理框架,它将SpringBoot开发的一个个单体微服务整合并管理起来,    为各个服 ...

  3. npm proxy报错处理

    npm经常抽风,动不动安装一个模块就这样了: 提示是否设置了正确的代理地址,解决方法网上有很多,有说取消代理.重新设置代理等等,最简单粗暴解决: 删除nodejs安装路径下面的npmrc文件,再使用淘 ...

  4. 导出maven项目依赖的jar包

    注意使用mvn命令是需要配置好maven的环境变量 一.导出到自定义目录中 在maven项目下创建lib文件夹,输入以下命令: mvn dependency:copy-dependencies -Do ...

  5. 基于easyUI实现系统日志管理

    此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. log.jsp:系统日志管理界面 <!DOCTYPE html PUBLIC "-//W ...

  6. 深入理解jQuery插件开发总结（三）

    容器:一个即时执行函数 根本上来说,每个插件的代码是被包含在一个即时执行的函数当中,如下: (function(arg1, arg2) { // 代码 })(arg1, arg2); 即时执行函数,顾 ...

  7. cookie初探——封装和使用cookie（内含彩蛋）

    一.什么是cookie? 页面用来保存信息,如:自动登录.记住用户名 二.cookie的特性1.同一个网站中所有页面共享一套cookie2.数量.大小有限3.有过期时间 三.js中使用cookie d ...

  8. laravel验证规则

    就拿laravel的登入验证来举例: 1.进入login控制器, use AuthenticatesUsers;从这里点进去找到验证规则 //验证protected function validate ...

  9. python对excel文件的读写操作

    import xlrd,xlwt data = xlrd.open_workbook('a.xlsx') #读 table = data.sheets()[0] data_list = [] data ...

  10. Python-常用模块2

    今天我们继续来看模块的那些事儿 一.os模块 所有和操作系统相关内容都在os模块 os.makedirs('dirname1/dirname2') 可生成多层递归目录 os.removedirs('d ...