JQuery球队选择实例

本文实例讲述了JQuery球队选择。分享给大家供大家参考。具体如下：

<!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>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
 $("#tableToSelect tr").css("cursor", "pointer").mouseover(function(){
  $(this).css("backgroundColor", "gold");
  $(this).siblings().css("backgroundColor", "white");
 })
 .click(function () {
  $(this).appendTo($("#tableSelected"));
 });
});
</script>
</head>
<body>
待选择球队：
<table id="tableToSelect">
<tr><td>火箭</td><td>100分</td></tr>
<tr><td>奇才</td><td>99分</td></tr>
<tr><td>小牛</td><td>98分</td></tr>
</table>
<hr />
<hr />
选中的球队：
<table id="tableSelected"></table>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 基于jQuery实现仿淘宝套餐选择插件

    基于jQuery实现仿淘宝套餐选择插件

    首先是页面HTML代码 复制代码 代码如下: <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript&qu

  • JQuery实现带排序功能的权限选择实例

    本文实例讲述了JQuery实现带排序功能的权限选择.分享给大家供大家参考.具体实现方法如下: <!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">

  • jquery实现鼠标拖拽滑动效果来选择数字的方法

    本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • jQuery实现在下拉列表选择时获取json数据的方法

    本文实例讲述了jQuery实现在下拉列表选择时获取json数据的方法.分享给大家供大家参考.具体如下: function populateDropDown() { $.getJSON('/getData.aspx',{Name:$('#parm').val()},function(data){ var select = $('#DDLControl'); var options = select.attr('options'); $('option', select).remove(); $.e

  • jQuery选择器之基本选择器与层次选择器

    基本选择器 基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class和标签名等来查找DOM元素.在网页中,每个id名称只能使用一次,class允许重复使用.        选择器       描述 返回                示例 #id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素 .class 根据给定的类名匹配元素 集合元素 $(".test")选取所有class为test的元素 e

  • jQuery选择id属性带有点符号元素的方法

    本文实例讲述了jQuery选择id属性带有点符号元素的方法.分享给大家供大家参考.具体分析如下: 如果jquery要选择的元素id中带有点符号,在选择时需要在点前面加上两个反斜杠,如: $("#address\\.street").text("Enter this field"); 具体代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-typ

  • JQuery球队选择实例

    本文实例讲述了JQuery球队选择.分享给大家供大家参考.具体如下: <!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>

  • Jquery日期选择datepicker插件用法实例分析

    本文实例讲述了Jquery日期选择datepicker插件用法.分享给大家供大家参考.具体如下: 1.首先将Jquery中的datepicker插件中的相关属性值改成中文的: $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已选日期', closeText: '关闭', closeStatus: '不改变当前选择', prevText: '<上月', prevStatus: '显示上月', prevBigTe

  • jQuery基本选择器(实例及表单域value的获取方法)

    jQuery基本选择器(实例及表单域value的获取方法)

    jQuery基本选择器包括 CSS选择器.层级选择器和.表单域选择器. 1.CSS选择器 (1)标签选择器 $("div")  $("p")  $("table") 等一系列 HTML 标签 (2)ID选择器 <input id="user" type="text"> 获取该标记的值:$("#user").val(); (3)类选择器 <input type="

  • jquery序列化方法实例分析

    本文实例讲述了jquery序列化方法.分享给大家供大家参考.具体分析如下: 做ajax的时候,经常需要序列化, serialize()只能序列化表单 .(注 : 表单里的内容 只能用 name ) 现在有一个对象: 复制代码 代码如下: var obj={a:1,b:2,c:3}; 怎么让它序列化呢? 用prototype 可以用$H(obj).toQueryString() 搞定?jqueyr有什么方法吗? 答案是肯定的, jquery提供了 $.param(). var obj={a:1,b

  • jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

    jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

    简单的两个步骤即可实现分页功能 <script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></script> <script src="<%=basePath%>/resources/js/jquery.loehpagerv1.0.js"></script> <script type="text/JavaScript

  • jQuery siblings()用法实例详解

    jQuery siblings()用法实例详解

    siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的. jQuery 的遍历方法siblings() $("给定元素").siblings(".selected") 其作用是筛选给定的同胞同类元素(不包括给定元素本身) 例子:网页选项栏 当点击任意一个选项卡是,其他2个选项卡就会改变样式,其内容也会隐藏. 下面是html代码. <body> <ul id="menu"> <li class=

  • jQuery fadeOut 异步实例代码详解

    定义和用法 fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果). 注释:隐藏的元素不会被完全显示(不再影响页面的布局). 提示:该方法通常与 fadeIn() 方法一起使用. 语法 $(selector).fadeOut(speed,easing,callback) 1. 概述 jquery实现动画效果的函数使用起来很方便,不过动画执行是异步的,所以要把自定义的操作放在回调函数里. 2. example <html> <body> <table id

  • jquery tmpl模板(实例讲解)

    jquery tmpl模板(实例讲解)

    之前用模板渲染都是用angular,无意间发现了jquery tmpl这种轻量级,其文档在这里 官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途很明显:用于render的数据,可以是任意js类型,包括数组和对象.options一般情况下都是选项了,官方指出,此处的options是一个用户自定义的键值对的map,继承自tmplItem数据结构,适用于模板render动作期间. 在这里可以下

  • Python中Selenium模拟JQuery滑动解锁实例

    Python中Selenium模拟JQuery滑动解锁实例

    本文介绍了Python中Selenium模拟JQuery滑动解锁实例,分享给大家,也给自己留个笔记 滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路. 首先先看个例子. 当我手动点击滑块时,改变的只是样式: 1.slide-to-unlock-handle 表示滑块,滑块的左边距在变大(因为它在向右移动嘛!) 2.Slide-tounlock-progress 表示滑过之后的背景黄色,黄色的宽度在增加,因为滑动经过的地方都变黄了. 除些

  • .net采用ajax实现邮箱注册和地区选择实例

    本文实例讲述了.net采用ajax实现邮箱注册和地区选择的方法.分享给大家供大家参考.具体实现方法如下: 首先要知道Ajax是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. ajax就是在浏览器上同服务器实现异步交互.在XMLhttpRequest被广泛使用之前,用户停留在页面上没有办法实现局部更新的功能,只能通过刷新整个页面来获取最新的数据,而由此代码的代价是需要传输大量的数据,而且有可能临时的一些用户信息也会丢失,而ajax的使用实现了局部更

随机推荐