题目：页面上有一个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. centos下不重装php——给PHP添加新扩展库

    装完php.发现需要一些新扩展库比如常见的mysqli之类的.在不重装php安装新扩展,以一个不常用的库xsl为例. 环境:centos6.8,php5.3.29 ,osx10.11.6 我的php相 ...

  2. Swift构造器链

    IDE:Xcode Version7.3.1 指定构造器: 1>名字为init的方法前没有前缀(子类重写时有override除外), 2>一个类中至少有一个指定构造器,其必须初始化类中的所 ...

  3. CSS代码优化（转载）

    要点1:css代码优化作用与意义 1.减少占用网页字节.在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度:2.便于维护.简化和标准化css代码让css代码减少,便于日后维护:3.让自己 ...

  4. php array 数组及数组索引

    array (PHP 4, PHP 5, PHP 7) array — 新建一个数组 说明 array array ([ mixed $... ] ) 创建一个数组.关于数组是什么的信息请阅读数组一节 ...

  5. 1、springboot之HelloWorld

    最基本的,官网copy 创建maven项目 maven中添加 <parent> <groupId>org.springframework.boot</groupId> ...

  6. MyBaits_查询缓存02_Ehcache二级缓存

    一.Ehcache二级缓存的开启 导入jar(https://github.com/mybatis/ehcache-cache/releases) <cache type="org.m ...

  7. unable to retrieve metadata

    在使用Scaffolding模板生成的时候,抛出了这个一个错误unable to retrieve metadata找了一下bug,居然是因为自己的数据库连接字符串,把它注释后,就可以运行了,我推测, ...

  8. Maven pom.xml 常用打包配置

    <build> <!-- 指定JAVA源文件目录 --> <sourceDirectory>src</sourceDirectory> <!-- ...

  9. VMWARE错误-"VirtualInfrastructure.Utils.ClientsXml"的类型初始值设定项引发异常

    异常信息:"VirtualInfrastructure.Utils.ClientsXml"的类型初始值设定项引发异常. 解决方案:以管理员的身份运行客户程序

  10. Aysnc-callback with future in distributed system

    Aysnc-callback with future in distributed system