题目：页面上有一个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. svn在commit后报错：is scheduled for addition, but is missing

    今天通过svn 的cr(code review)代码审核后,我欲执行svn ci -m"xxxxxxx(提交注释) ISSUE=3380305",但是没有提交成功,SVN报错啦! ...

  2. poi-word导出，导出多图片到word

    一.添加依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-scratc ...

  3. C为什么不能跨平台

    如果大家能对我的文章推荐一下,关注一下本人博客,那就更开心了,我今后也会更多的写一些计算机系统/原理类的文章,以飨各位读者.再次谢谢.前段时间看了 周志明的那本 <深入理解java虚拟机> ...

  4. freemarker生成word，表格分页

    在做项目的过程中,使用到了freemarker生成word.又有一个需求,明细的要确定有多少页,这就用到了换页的xml标签了,找了我好久 <w:p ><w:r><w:br ...

  5. 使用SSH连接LINUX的命令

    查看端口号是否被占用 netstat -tunlp|grep 端口号 杀掉 kill-9 pid 后台运行 nohup 应用程序名 & disown -a && exit 屏幕 ...

  6. 利用setTimeoutc处理javascript ajax请求超时

    用过jquery的人都知道里面的$.ajax能设置超时处理及各种错误的抛出,确实好用.原生的js没有对应的方法,还得写各种兼容.在实际运用中,不管请求是否成功都应该做容错处理, 不然用户不知道到底发生 ...

  7. Java中避免空指针的几个方法

    equals Object类中的equals 方法在非空对象引用上实现相等关系,具有对称性 x.equals(y) 和 y.equals(x) 结果是一样的,但当x == null时会抛出空指针异常 ...

  8. 二维码Zxing&Zbar

    二维码Zxing&Zbar 前言:该项目主要介绍了二维码扫描.闪光灯开启.本地二维码图片识别.二维码生成.分别是zxing和zbar(网格二维码)分别实现,具体效果运行项目apk... 开发环 ...

  9. intellij-maven-imports-have-broken-classpath

    公司自己搭得maven私服,然后使用git下载 公司mvn的依赖包时候,报错: 之后再idea里面发现依赖的jar包 有红色的错误信息,提示 maven imports have broken cla ...

  10. SMBus Host Controller not enabled!

    今天去官网下载最新的ubuntu  ubuntukylin-16.10-desktop-amd64.iso,下载后vm 运行,安装后结果报了这个问题 之后google搜索得到答案: 1.复制   cp ...