PHP----练习------球队列表

题目:页面上有一个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>

显示的结果::

时间: 2024-10-12 22:14:30

PHP----练习------球队列表的相关文章

序列之列表详解

列表是python中常用的重要数据结构,它与字符串,元组都属于序列,支持序列相关操作:本文主要内容如下:1>列表定义方式与基本用法:2>列表遍历:2>字符串,元组与列表区别:3>列表常用函数介绍. 1.列表定义方式: 列表在Python中表示方法:[val1, val2, val3],我们可以认为列表是一个大容器,里面可以放任意对象:1)直接定义列表: #数字列表,价格列表 price = [90, 89, 70,100] #字符串列表,球队列表 teams = ['恒大', '富

几个简单的jquery知识点练习

三.jquery对象和dom对象 <script type="text/javascript"> //页面的基本元素加载后 $(function () { var btnObjDom = document.getElementById('btn'); //dom对象变成jquery对象 alert($(btnObjDom).val());//如果val()该方法括号中什么都不写,表示的是获取值 //如果在括号中写内容了,表示的是设置该属性的值 //jquery对象变成dom

静态Web开发 DOM

四章 Dom 1节dom中的顶级对象 dom(文档对象模型)js最终是要操作html页面,让html变成DHtml,而操作Html页面就要用到DOMDOM可以吧Html页面模拟成一个对象,如果js只是执行一些计算.循环等操作,而不能操作Html也就失去了它存在的意义 window.onload=function(){ //1 window.fm.btn.onclick=function(){ //window.id 的方式获得元素(如果嵌套很多次,会非常麻烦) alert('大家好!'); }

JQuery 练习题解析

1.制作简单的留言显示 <title>无标题文档</title> <!--因为制作这个留言显示,我们是用JQuery代码, 因此,我们在这里引入JQuery包,这个JQuery包可以从网上下载--> <script src="../jquery-1.11.2.min.js"></script> </head> <body> <!--显示留言内容,在这里id的作用不是用来在CSS表中设置样式, 而是

JQuery小练习

1.加法计算器.两个文本框中输入数字,点击[=]按钮将相加的结果放到第三个文本框中. <script src="jquery-1.8.3.js"></script> <script type="text/javascript"> $(function () { $('#btn').click(function () { var first = parseInt($('#btnFirst').val()); var second =

Web静态开发 JQuery

伍章 JQuery 1节介绍JQuery和顶级对象 <<锋利的JQuery>>JQuery官网: http://jquery.com (下载jquery工具)JQuery在线API: http://api.jquery.com http://api.jquery.com/api(xml文件)JQuery UI: http://jqueryui.com 什么是JavaScript框架库?普通javascript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序

如鹏网 静态Web开发 第五章:JQuery

课前说明 参考书:<锋利的jQuery> jQuery官网:http://jquery.com jQuery在线API:http://api.jquery.com http://api.jquery.com/api/ (xml文件.) jQuery UI:http://jqueryui.com/ ------------------------------------------- 常见的JavaScript框架库 什么是JavaScript框架库? 普通JavaScript的缺点:每种控件的

python学习---三级菜单

开发环境: OS:64位Windows 7 IDE:pycharm4.0.4 python版本:2.7.10 程序简述: a.本程序实现的功能为球迷可以选出自己喜欢的球队与球员 b.程序共三级目录,第一级分东部与西部分区,第二级为各分区下的球队列表,第三级为球队列表下的球员列表,每个球员的基本信息为球员比赛角色 c.在每一级目录下,客户可以在当级目录下进行选择,序号对应选项,q对应退出整个程序,b代表回到上一级重新选择. 版权说明: 本多级菜单程序只做python学习使用,版权有作者所有,未经过

jQuery小例子

map遍历数组 //=========for循环遍历========== var arr[1,2,3,4,5]; for(var i=0;i<=arr.length;i++) { arr[i]=arr+1; } //对数组中的每个元素加1 var scores = [10, 20, 30, 40, 50]; var newScore = []; for (var i = 0; i < scores.length; i++) { newScore[newScore.length] = score