一段jquery代码,保存
@CHARSET "UTF-8";
#table_id tbody tr.odd td:hover{
background-color:#93CFE5;
} #table_id tbody .even td:hover{
background-color:#93CFE5;
} ----------------------------------------
意思就是鼠标指针变成 手 的形状,和放到链接上面的鼠标指针一样。
style="cursor:pointer;
---------------------------------------------------------
找到每个段落紧邻的前一个同辈元素。 HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>jQuery 代码:
$("p").prev()结果:
[ <div><span>Hello Again</span></div> ]
---------------------------------------------------------------------------------------------------------------------------------------------------
<table id="data-table"
class="table table-bordered nowrap" width="100%">
<thead>
<tr> <th style="display:none;">编号</th>
<th><input type="checkbox" id="selectall"/></th>
<th>型号</th>
<th>航班号</th>
<th>F价格</th>
<th>B价格</th>
<th>E价格</th>
<th>C价格</th>
<th>F数量</th>
<th>B数量</th>
<th>E数量</th>
<th>C数量</th>
<th style="display:none;">图片地址</th>
<th style="display:none;">状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<s:iterator value="planelist" var="plane">
<tr>
<td style="display:none;"><s:property value="#plane.id" /></td>
<td><input type="checkbox" name="pid" value="<s:property value="#plane.id" />"/></td>
<td class="ptype" style="cursor:pointer;"><s:property value="#plane.planetype" /></td>
<td><s:property value="#plane.lname" /></td>
<td><s:property value="#plane.tdcprice" /></td>
<td><s:property value="#plane.swcprice" /></td>
<td><s:property value="#plane.jjcprice" /></td>
<td><s:property value="#plane.thcprice" /></td>
<td><s:property value="#plane.tdcnum" /></td>
<td><s:property value="#plane.swcnum" /></td>
<td><s:property value="#plane.jjcnum" /></td>
<td><s:property value="#plane.thcnum" /></td>
<td style="display:none;"><s:property value="#plane.imgurl" /></td>
<td class="pstatus" style="display:none;"><s:property value="#plane.status" /></td>
<td>
<button class="btn btn-primary edit-btn" data-toggle="modal"
data-target="#myModal">修改</button>
</td>
</tr>
</s:iterator>
</tbody>
</table>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
<script>
$(function(){
$('#data-table tbody tr td.ptype').click( function () {
var pid=$(this).prev("td").prev("td").eq(0).text()
$.ajax({
type:"post",
url:'plane!planeinfo.action?plane.id='+pid,
dataType:"json",
data:{
},
success:function(data,textStatus){
var h=$("#morris-donut-chart").parent().parent().parent().offset().top;
$("#morris-donut-chart").prev("h4").text(data.planetype+"的座位数量");
$(document).scrollTop(h);
$("#morris-donut-chart").html("");
var blue = "#348fe2",
blueLight = "#5da5e8", blueDark = "#1993E4", aqua = "#49b6d6",
aquaLight = "#6dc5de", aquaDark = "#3a92ab", green = "#00acac",
greenLight = "#33bdbd", greenDark = "#008a8a", orange = "#f59c1a",
orangeLight = "#f7b048", orangeDark = "#c47d15", dark = "#2d353c",
grey = "#b6c2c9", purple = "#727cb6", purpleLight = "#8e96c5", purpleDark = "#5b6392",
red = "#ff5b57";
var Path=getRootPath();
$("#planeimg").attr("src",Path+data.imgurl);
$("#planeimg").parent().prev("h4").text(data.planetype+'的舱位分布图');
Morris.Donut({
element: 'morris-donut-chart',
data: [
{value: data.tdcnum, label: '头等舱'},
{value: data.swcnum, label: '商务舱'},
{value: data.jjcnum, label: '经济舱'},
{value: data.thcnum, label: '特惠舱'}
],
colors: ['#E75045', '#5FBBEC', '#69C7A3', grey],
resize: true,
formatter: function (x) { return x + "个"}
}).on('click', function(i, row){
console.log(i, row);
});
},
error:function(){
alert("错误!");
}
})
})
}) function getRootPath(){
//获取当前网址,如: http://localhost:8083/uimcardprj/share/meun.jsp
var curWwwPath=window.document.location.href;
//获取主机地址之后的目录,如: uimcardprj/share/meun.jsp
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
//获取主机地址,如: http://localhost:8083
var localhostPaht=curWwwPath.substring(0,pos);
//获取带"/"的项目名,如:/uimcardprj
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
return(localhostPaht+projectName);
} </script>
---------------------------------------------------------------------------------------
参数index描述:
获取匹配的第二个元素 HTML 代码:
<p> This is just a test.</p> <p> So is this</p>jQuery 代码:
$("p").eq(1)结果:
[ <p> So is this</p> ]
------------------------------
prev([expr])
概述
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。 可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。
----------------------------------------------------------------------------------------
offset([coordinates])
概述
获取匹配元素在当前视口的相对偏移。 返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。 -----------------------------------------------------------------------------
示例
描述:
查找每个段落的父元素 HTML 代码:
<div><p>Hello</p><p>Hello</p></div>jQuery 代码:
$("p").parent()结果:
[ <div><p>Hello</p><p>Hello</p></div>]
---------------------------------------------------------------------------
一段jquery代码,保存的更多相关文章
- 我的第一段jQuery代码
说起 jQuery,很多人可能觉得,不算什么,就是个js类库.而,对于我,下面这几行代码,是一个新的开始. 多年来,我一直在使用MooTools ,他面向对象,写起来结构清晰分明,都是在原生js的基础 ...
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- 10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...
- 十五个常用的jquery代码段【转】
好的文章顶一个 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top 2 $('a.t ...
- 十五个常用的jquery代码段
十五个常用的jquery代码段 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top ...
- 50个必备的实用jQuery代码段
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...
- 50个实用的jQuery代码段让你成为更好的Web前端工程师
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...
- 50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段
50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段 本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从j ...
- 【摘】50个jQuery代码段帮助你成为一个更好的JavaScript开发者
今 天的帖子会给你们展示50个jQuery代码片段,这些代码能够给你的JavaScript项目提供帮助.其中的一些代码段是从jQuery1.4.2才 开始支持的做法,另一些则是真正有用的函数或方法,他 ...
随机推荐
- Hibernate 事物隔离级别 深入探究
目录 一.数据库事务的定义 二.数据库事务并发可能带来的问题 三.数据库事务隔离级别 四.使用Hibernate设置数据库隔离级别 五.使用悲观锁解决事务并发问题 六.使用乐观锁解决事务并发问题 Hi ...
- Yii widget使用
关于widgets,他们在yii中的关系如下 system.web.widgets 系统自带最基本的widget zii.widgets 是基本扩展 zii.widgets.grid 是基本扩展的重要 ...
- phpMyAdmin 完整路径泄露漏洞
漏洞名称: phpMyAdmin 完整路径泄露漏洞 CNNVD编号: CNNVD-201307-650 发布时间: 2013-08-09 更新时间: 2013-08-09 危害等级: 中危 漏洞类 ...
- 「Poetize9」升降梯口
3056: 升降梯口 Time Limit: 2 Sec Memory Limit: 128 MBSubmit: 43 Solved: 42[Submit][Status] Description ...
- -_-#【CSS3】CSS3 gradient transition with background-position
CSS3 gradient transition with background-position <!DOCTYPE html> <html> <head> &l ...
- POJ 3189 Steady Cow Assignment
题意:每个奶牛对所有的牛棚有个排名(根据喜欢程度排的),每个牛棚能够入住的牛的数量有个上限,重新给牛分配牛棚,使牛棚在牛心中的排名差(所有牛中最大排名和最小排名之差)最小. 题目输入: 首先是两个 ...
- 使用eclipse搭建嵌入式开发环境
下载jdk http://download.oracle.com/otn-pub/java/jdk/7u4-b20/jdk-7u4-linux-i586.tar.gz 下载eclipse-cpp-ga ...
- [操作系统] OS X Yosemite U盘制作
话不多说,DiskMakerX,大小6.3M,下载地址:http://www.liondiskmaker.com/,然后准备好U盘和从官网下的Yosemite系统就可以开始了. DiskMaker X ...
- 谈JSON在Ajax中的使用
JSON是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.AJAX是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术.之前也曾介绍过在PHP语言中使用JSON的文章, ...
- Java对XML文档的增删改查
JAVA增删改查XML文件 最近总是需要进行xml的相关操作. 不免的要进行xml的读取修改等,于是上网搜索,加上自己的小改动,整合了下xml的常用操作. 读取XML配置文件 首先我们需要通过Do ...