题目：页面上有一个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. Spring 跨域请求

    1.Jsp的跨域请求 后台jsp代码: <%@ page language="java" contentType="text/html; charset=UTF-8 ...

  2. PHP学习8——图像处理

    主要内容: 加载GD库 创建图像 绘制点,线,矩形,多边形,椭圆,弧线 绘制文字 通过GD库生成验证码 其实吧,学习图像方法的最大作用,好像就是为了制作验证码. 所以此专题,不如叫做制作验证码. 1. ...

  3. Exists 和 Not Exists

    只注重子查询是否有返回行,如有返回结果为真,否则为假,并不适用子查询的结果,仅用于测试子查询是否有返回结果. 语法: if exists (子查询) begin 语句块 end 例子: if exis ...

  4. Struts2 知识点梳理

    一.Struts2简介 1.概念:轻量级的MVC框架,主要解决了请求分发的问题,重心在控制层和表现层.低侵入性,与业务代码的耦合度很低.Struts2实现了MVC,并提供了一系列API,采用模式化方式 ...

  5. mysql client does not support authentication

    打开mysql 命令行 mysql> alter user 'root'@'localhost' identified with mysql_native_password by '123456 ...

  6. my docker note

    环境: docker1.10.3 #hello docker docker run --name myhello docker.io/centos:67591570dd29 /bin/echo 'he ...

  7. Heka 的编译

    Heka是Mozilla开源的,基于Go语言实现的,插件式log收集和分析系统. 已经编译好的 release 版本可以在下面地址下载: https://github.com/mozilla-serv ...

  8. hdu 4055 Number String(递推DP)

    给一个只含‘I','D','?'三种字符的字符串,I表示当前数字大于前面的数字,D表示当前的数字小于前面一位的数字,?表示当前位既可以小于又可以大于. 问1~n的排列中有多少个满足该字符串. http ...

  9. 原生JS的轮播图

    学习前端也有一小段时间了,当初在学习javascript的时候,练手的一个轮播图实例,轮播图也是挺常见的了. 着是通过获取图片偏移量实现的.也实现了无缝切换.还有一点问题就是没有加上图片切换的时候的延 ...

  10. SVN认证失败的错误分析

    作者:朱金灿 来源:http://blog.csdn.net/clever101 时常碰见SVN认证失败的问题,经过一番思考,可以总结出错误根源是:在SVN的数据库目录下有一个svnserve.con ...