题目：页面上有一个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. IT自由职业者的第一个月（下）——为什么放弃5年嵌入式驱动开发转到WEB开发？

        如果单从兴趣来看,其实我对Linux内核,Android中间件的兴趣要高于WEB,何况还有这么多年的经验积累,何必从头探索一个新的技术方向呢?     这里面原因是很多的,最核心的大概是以下4 ...

  2. 跨文件代码跳转插件：Ctags

    1.通过package control搜索Ctags 2.Enter安装,等待其安装完成 3.下载ctags可执行程序,链接:https://pan.baidu.com/s/1jIINAxo 密码:4 ...

  3. Window 10 安装 MySQL

    1.下载 点击官网下载路径下载压缩包 点击第一个按钮后出现如下界面 下载后解压缩,我这里是放在C:\web\目录下 2.创建配置文件 注意:my.ini文件是自己创建的配置文件 文件内容如下: [my ...

  4. 梯度寻优与logistic算法

    一.一些基本概念 最优化:在给定约束之下如何寻求某些因素(的量),以使某一(或某些)指标达到最优.高中学过的线性规划就是一类典型的最优化问题. 凸集:在集合空间中,凸集就是一个向四周凸起的图形.用数学 ...

  5. Intellij IDEA 各种乱码解决方案 posted @ 2017-06-23 15:31:06

    一次解决所有问题,只需做配置文件的修改即可 解决方案:       在      IntelliJ IDEA 2016.1\bin\idea64.exe.vmoptions        Intell ...

  6. Effective C++ .14 智能指针的拷贝与deleter函数

    #include <iostream> #include <cstdlib> #include <memory> using namespace std; clas ...

  7. jquery获取下拉框中的循环值

    <select class="test" id="projectno" name="projectno"> <option ...

  8. mybatis整合spring的时候配置数据库信息文件properties注意事项

    信息后面不能有空格 ,格式要xxx.driver xxx.url 这样

  9. webapi下载文件

    [HttpGet] public IHttpActionResult ExportData() { ... var dt = ExcelHelper.ListToDataTable(list); va ...

  10. HTML+CSS+jQuery 纵向导航 && 横向导航 && 消除IE6 BUG && 感悟怎样学习

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...