题目：页面上有一个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. 开发常用的 JavaScript 知识点总结

    No1.语法和类型 1.声明定义 变量类型:var,定义变量:let,定义块域(scope)本地变量:const,定义只读常量.变量格式:以字母.下划线“_”或者$符号开头,大小写敏感.变量赋值:声明 ...

  2. 互联网轻量级框架SSM-查缺补漏第二天

    简言:第一天没咋看,因为看的时候已经是下午了.今天上午也因为工作上的事没咋看,本来想按照天去写的,但是内容会太散吧.我决定把整块的内容放在一起写了.天数啥的,就那样把. 还有,我只是言简意赅的去总结一 ...

  3. Spring课程 Spring入门篇 5-7 advisors

    1 简析 1.1 advisor简析(这个不太明白,后续再看吧) 2 代码演练 2.1 环绕通知的综合应用(代码和视频对不上,慕课网讲的本身有问题)       1 简析 1.1 advisor简析( ...

  4. MySQL行(记录)详细操作

    一 介绍 MySQL数据操作: DML ======================================================== 在MySQL管理软件中,可以通过SQL语句中的 ...

  5. html高度塌陷问题解决

    高度塌陷的问题: 当开启元素的BFC以后,元素将会有如下的特性 1 父元素的垂直外边距不会和子元素重叠    开启BFC的元素不会被浮动元素所覆盖    开启BFC的元素可以包含浮动的子元素 如何开启 ...

  6. endwith与startwith字符串方法匹配重写

    endwith与startwith字符串方法匹配重写 在js读取文件信息并判断文件的格式类型时出现问题,并找到解决方案,写下来与大家分享,共勉. ---DanlV 描述 本人在上传MP3格式文件时,需 ...

  7. easyui grid 增加合计行

    一.首先,easyui  grid 的 showfooter 属性设置为 true $aplgrid.datagrid({ data: globalExpenseClaimForm.ExpenseCl ...

  8. ArcGIS DataStore手册——管理篇

    第二章:ArcGIS DataStore管理维护 1.备份管理 备份的目的在于发生原始数据损坏或其他突发情况时,可避免数据丢失,并可快速的使用备份数据来恢复,以保证服务仍可使用. 单机模式下,可使用D ...

  9. 09_Redis持久化——AOF方式

    [AOF简述] AOF(Append-only) Redis每次接受到一条改变数据的命令时,它会把该命令写到一个AOF文件中(只记录写操作,不记录读操作),当Redis启动时,它通过执行AOF文件中的 ...

  10. OpenfileDialog选择照片的简单应用

    OpenFileDialog openFileDlg = new OpenFileDialog(); openFileDlg.Title = "选择文件"; openFileDlg ...