题目：页面上有一个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. jsp、servlet笔记

    1.init    初始化Jsp&Servlet方法   destroy 销毁Jsp&Servlet之前的方法   service 对用户请求生成响应的方法2.Jsp文件必须在jsp服 ...

  2. CXF生成客户端遇到的问题

    一.CXF环境配置路径错误 1.错误现象 在命令行中输入 wsdl2java -v 检查CXF安装是否正确. 出现错误=> ERROR: Unable to find cxf-manifest. ...

  3. 在grid结果集中实现全选或全不选某些特定的行

    在script的中的代码如下: function check(){ var id = gridgetselectvalue("require_id"); if(id.length& ...

  4. 3、springboot之热部署

    我用的是idea 一.开启idea自动make功能 1.CTRL + SHIFT + A --> 查找make project automatically --> 选中 2.CTRL + ...

  5. Iphone各个型号机型的详细参数，尺寸和dpr以及像素

    1.iPhone尺寸规格 2.单位inch(英吋) 1 inch = 2.54cm = 25.4mm 3.iPhone手机宽高 上表中的宽高(width/height)为手机的物理尺寸,包括显示屏和边 ...

  6. Python-常用模块1

    今天我们来看一看python中的常用的模块,内容有点多,我会分两天来更新这些知识 一.什么是模块 模块就是我们把装有特定功能的代码就行归类的结果,从代码编写的单位来看我们的程序,从小到大的顺序:一条代 ...

  7. 移动端meta标签的使用和设置

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale= ...

  8. 教你小三角，适用移动端等，解决移动端a标签的默认样式

    1.小三角,通过给一个div设置足够大的边框,让它的上边框,右边框,左边框,的背景颜色设置成透明的,来实现,如下: <!DOCTYPE html> <html> <hea ...

  9. Java Struts2 （一）

    一.Struts2简介 1.Struts2概述 Struts2是Apache发行的MVC开源框架.注意:它只是表现层(MVC)框架. 2.Struts2的来历 Struts1:也是apache开发的一 ...

  10. git使用笔记 bitbucket基本操作

    实现目标: 1.将本地已经存在的项目文件保存到 bitbucket.org 2.从 bitbucket.org 检出代码库到本地 操作笔记: 1.首先在bitbucket.org创建一个代码库,并得到 ...