Jquery小功能实例
下拉框内容选中左右移动
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Select.aspx.cs" Inherits="Select" %> <!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 runat="server">
<title></title>
<script type = "text/javascript" src = "JS\jquery-1.4.1.js"></script>
<script type = "text/javascript">
$(document).ready(function () {
$("#btnLeft").click(function () {
//alert($("#Select1").val());
//alert($("select option:selected").html());
if ($("#Select1 option:selected").html() == null) {
alert("未选中！");
} else {
//向Select2中添加Select1中选定的值
$("#Select2").append($("#Select1 option:selected"));
}
});
$("#btnRight").click(function () {
//alert($("#Select2 option:selected").html());
if ($("#Select2 option:selected").html() == null) {
alert("未选中！");
} else {
$("#Select1").append($("#Select2 option:selected"));
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="Select1" multiple = "multiple">
<option>江苏</option>
<option>海南</option>
<option>大连</option>
<option>陕西</option>
<option>山东</option>
</select>
<input id="btnLeft" type="button" value=">>>" />
<input id="btnRight" type="button" value="<<<" />
<select id="Select2" multiple = "multiple">
</select>
</div>
</form>
</body>
</html>
购物车简单功能【数量加减，金额计算】
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Shopping-1.aspx.cs" Inherits="Shopping_1" %> <!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 runat="server">
<title></title>
<style type ="text/css">
.dv1{ padding-left:50px; padding-top:100px;}
#Ware1Mines{ width:20px;height:20px; border: solid #ccc; position:relative;right:20px; top:20px; cursor:pointer;}
#Ware1Add{ width:20px;height:20px; border: solid #ccc; position:relative;left:60px; bottom:20px; cursor:pointer;}
#Ware2Mines{ width:20px;height:20px; border: solid #ccc; position:relative;right:20px; top:20px; cursor:pointer;}
#Ware2Add{ width:20px;height:20px; border: solid #ccc; position:relative;left:60px; bottom:20px; cursor:pointer;}
.dv_Go{background:red; width:100px;height:40px; text-align:center; font-size:27px; color:White; cursor:pointer;}
#Text2
{
width: 32px;
}
#Text3
{
width: 32px;
}
#sum
{
width: 66px;height:26px;color:Red; font-size:25px;
}
</style>
<script type ="text/javascript" src ="jquery-1.7.2.min.js"></script>
<script type ="text/javascript">
// function selectAll(checkbox) {
// $('input[type = checkbox]').prop('checked', $(checkbox).prop('checked')); //$(checkbox).prop('checked')判断id为all的复选框是否为选中状态，若为true则所有checkbox的值为true，否则为false
// if ($(checkbox).prop('checked')) {
// var sum1 = $('#Text2').val();
// var sum2 = $('#Text3').val();
// $('#sum').attr('value', parseFloat(sum1) + parseFloat(sum2));
// }
// else {
// $('#sum').attr('value', '0.00');
// }
// }
$(function () {
$('#all').click(function () {
$('input[type = checkbox]').prop('checked', $('#all').prop('checked'));
if ($('#all').prop('checked')) {
var sum1 = $('#Text2').val();
var sum2 = $('#Text3').val();
$('#zong1').html((Number(sum1) + Number(sum2)).toFixed());
}
else {
$('#zong1').html('0.00');
}
GetCount();
});
//计算选中的复选框的金额
$('input[name = item]').click(function () {
GetCount();
});
//复选框选中时方法
function GetCount() {
var sum = ;
$('input[name = item]').each(function () {
$('#Ware1').attr('value', $('#Text2').val());
$('#Ware2').attr('value', $('#Text3').val());
for (var i = ; i < $(this).length; i++) {
if ($(this).attr('checked')) {
sum += parseFloat($(this).val());
//alert(sum);
}
}
$('#zong1').html((sum).toFixed());
$('#Go').css('display', 'inherit');
$('#div').attr('class', 'dv_Go');
});
}
//}); //$(function () {
$('#Ware1Add').click(function () {
//$(this).prev() //当前元素的前一个元素，即Text2
$(this).prev().val(parseFloat($(this).prev().val()) + );
$('#Text2').attr('value', 42.00 * $('#Ware1Num').val());
GetCount();
});
$('#Ware1Mines').click(function () {
if (parseFloat($(this).next().val()) <= ) {
$('#Ware1Num').attr('value', );
}
else {
//$(this).next() //当前元素的后一个元素，即Text2
$(this).next().val(parseFloat($(this).next().val()) - );
$('#Text2').attr('value', 42.00 * $('#Ware1Num').val());
GetCount();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<%--大容器--%>
<div class = "dv1">
<%--购物车字体--%>
<div style = " font-family:@华文楷体; font-size:20px;">
<strong>我的购物车</strong>
<%--购物车字体结束--%>
</div>
<%--商品内容块--%>
<div>
<%--商品内容导航栏--%>
<div>
<div><input id="all" type="checkbox"; />全选</div>
<div style = " position:relative;left:160px; bottom:20px;">商品</div>
<div style = " position:relative;left:370px; bottom:40px;">价格</div>
<div style = " position:relative;left:550px; bottom:60px;">数量</div>
<div style = " position:relative;left:740px; bottom:80px;">操作</div>
</div>
<%--具体商品内容1--%>
<div>
<div id = "fu"><input id="Ware1" type="checkbox" name = "item" /></div>
<div style="position: relative; left: 160px; bottom: 20px;">
<img src="Images/1.jpg" /></div>
<div id = "Ware1Money" style = " position:relative;left:370px; bottom:40px;">
￥<input id="Text2" type="text" value = "42.00"
readonly="readonly" /></div>
<div style="position: relative; left: 550px; bottom: 80px;">
<div id = "Ware1Mines">-</div>
<input id="Ware1Num" type="text" maxlength="" style="width: 40px; height: 13px;
text-align: center;" value="" readonly="readonly" />
<div id = "Ware1Add">+</div>
</div>
<div style = " position:relative;left:740px; bottom:120px;">删除</div>
</div>
<%--具体商品内容2--%>
<div>
<div><input id="Ware2" type="checkbox" name = "item" /></div>
<div style="position: relative; left: 160px; bottom: 20px;">
<img src="Images/2.jpg" /></div>
<div style = " position:relative;left:370px; bottom:40px;">￥<input id="Text3" type="text" value = "39.90"
readonly="readonly" /></div>
<div style="position: relative; left: 550px; bottom: 80px;">
<div id = "Ware2Mines">-</div>
<input id="Text1" type="text" maxlength="" style="width: 40px; height: 13px;
text-align: center;" value="" readonly="readonly" />
<div id = "Ware2Add">+</div>
</div>
<div style = " position:relative;left:740px; bottom:120px;">删除</div>
</div>
<%--商品结算字体--%>
<div style = " position:relative;left:600px;">
<div>
总计(不含运费): <strong>￥</strong><label id="zong1" style="color:#ff5500;font-size:34px; font-weight:bold;"></label><%--<input id="sum" type="text" value = "0.00"
readonly="readonly" />--%>
</div>
<div id = "div">
<span id = "Go" style = " display:none"><a href = "http://www.baidu.com">去结算</a></span>
</div>
</div>
<%--商品内容块结束--%>
</div>
<%--大容器结束--%>
</div>
</form>
</body>
</html>
鼠标移入 同级元素变暗
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="fadeTo.aspx.cs" Inherits="fadeTo" %> <!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 runat="server">
<title></title>
<style type="text/css">
body
{
background: #;
}
*
{
padding: ;
margin: ;
list-style: none;
border: ;
}
.all
{
width: 630px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
padding: 10px 10px;
}
li
{
width: 200px;
height: 186px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
$('li').mouseover(function () {
$(this).siblings().stop().fadeTo(, 0.3);
});
$('li').mouseout(function () {
$(this).siblings().stop().fadeTo(, );
});
$('#Button1').click(function () {
$('ul').fadeOut('slow');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="all" id="box">
<ul>
<li>
<img src="Images/1%20(1).jpg" /></li>
<li>
<img src="Images/1%20(2).jpg" /></li>
<li>
<img src="Images/1%20(3).jpg" /></li>
<li>
<img src="Images/1%20(4).jpg" /></li>
<li>
<img src="Images/1%20(5).jpg" /></li>
<li>
<img src="Images/1%20(6).jpg" /></li>
</ul>
</div>
<input id="Button1" type="button" value="button" />
</form>
</body>
</html>
图片左右滚动
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImageToggle.aspx.cs" Inherits="ImageToggle" %> <!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 runat="server">
<title></title>
<style type="text/css">
*{ padding:; margin:; list-style:none; border:;}
.all{ position:relative; width:650px; height:250px; overflow:hidden; margin:50px auto; background:gold;}
.all ul{ position:relative; z-index:;}
.all ul li{ position: absolute; left:; top:;}
.all ol { position:absolute; right:10px; bottom:10px; z-index:;}
.all ol li{ width:20px; height:20px; border:1px solid #; color:#; line-height:20px; text-align:center; float:left; margin-left:5px; background:#; font-weight:bold; font-size:16px; cursor:pointer; font-family:'黑体'; margin-top:10px;}
.all .current{ height:30px; width:30px; border-color:#f60; color:#f60; font-size:20px; line-height:30px; margin-top:;}
</style>
<script type ="text/javascript" src ="jquery-1.7.2.min.js"></script>
<script type ="text/javascript">
$(function () {
var num1 = ;
$('ol li').mouseover(function () {
$(this).attr('class', 'current');
$(this).siblings().attr('class', ''); var num = $(this).index();
$('ul li').eq(num).css('left', '650px');
num1++;
$('ul li').eq(num).css('z-index',num1);
$('ul li').eq(num).animate({ left: '' }, );
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class = "all">
<ul>
<li><img src="Images/01.jpg" width = "650px" height = "" /></li>
<li><img src="Images/02.jpg" width = "650px" height = "" /></li>
<li><img src="Images/03.jpg" width = "650px" height = "" /></li>
<li><img src="Images/04.jpg" width = "650px" height = "" /></li>
<li><img src="Images/05.jpg" width = "650px" height = "" /></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li class = "current"></li>
</ol>
</div>
</form>
</body>
</html>
Jquery小功能实例的更多相关文章
- Jquery—Jquery异步功能实例
Jquery确实是一个非常好的JavaScript框架,今天利用闲暇时间给大家一个借助Jquery异步实现校验username的唯一性的样例: 代码1--index.jsp文件: <%@ pag ...
- jQuery关于复选框的基本小功能
这里是我初步学习jquery后中巨做的一个关于复选框的小功能: 点击右边选项如果勾上,对应的左边三个小项全部选中,反之全不选, 左边只要有一个没选中,右边大项就取消选中,反之左边全部选中的话,左边大项 ...
- 【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享（单文件版本）
整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...
- SpringMVC+Ajax实现文件批量上传和下载功能实例代码
需求: 文件批量上传,支持断点续传. 文件批量下载,支持断点续传. 使用JS能够实现批量下载,能够提供接口从指定url中下载文件并保存在本地指定路径中. 服务器不需要打包. 支持大文件断点下载.比如下 ...
- JavaWeb实现文件上传下载功能实例解析
转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...
- jQuery 小知识点（插件）
1.jQuery插件小知识点: 估计很多人都没弄明白下面的东西,特从网络上搜索了下面的知识,自己以后用起来也比较方便: $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例 ...
- 程序员都会的 35 个 jQuery 小技巧
收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("cont ...
- 几个 jQuery 小提示和技巧
几个 jQuery 小提示和技巧 今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人员.jQuery 是最好的 JavaScript 库之一,用于简化动画,事件处理,支持 Ajax 和 H ...
- 微信小程序实例教程（一）
序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序 ...
随机推荐
- archlinux下安装acroread打开pdf
虽说acroread是个好东西,但是在打开pdf几秒后总是自动退出呢 在其aur网页下找到了这么一解决办法: 打开终端输入 sudo unshare -n sudo -u ${USER} ACRO_A ...
- linux 的基础命令
date 查看时间 cal 查看日历 cal 2009 cal 10 2019 ls 查看目录下的内容 ls -alh tree 以树的形式查看目录内容 bc 计算器 M ...
- 学习STM32单片机，从菜鸟到牛人就是这样简单（配视频资料）
我想说,为了学习单片机而去学习单片机的思路不对. 你问,如何系统地入门学习stm32? 本身就是一个错误的问题.假如你会使用8051 , 会写C语言,那么STM32本身并不需要刻意的学习. 你要考虑的 ...
- NetBeans配置subli
NetBeans主题设置: ①.去https://netbeansthemes.com/rank/网址下载喜欢的主题 ②.然后打开NetBeans-->工具->选项->外观-> ...
- 洛谷P4051 字符加密 [JSOI2007] SA
正解:SA 解题报告: 传送门! 和工艺那题有点儿像鸭,,,反正肯定就都想到倍长然后SA拍个序嘛先 然后就做完了,,,我发现SA的题刷起来特别susi,,,基本上紫题级别的都just一个模板就欧克了最 ...
- [PCL]模型拟合方法——随机采样一致性
SACSegmentation封装了多种Ransac方法,包括: RandomSampleConsensus, LeastMedianSquares, MEstimatorSampleConsensu ...
- 10个Python基础练习项目，你可能不会想到练手教程还这么有趣
美国20世纪最重要的实用主义哲学家约翰·杜威提出一个学习方法,叫做:Learning By Doing,在实践中精进.胡适.陶行知.张伯苓.蒋梦麟等都曾是他的学生,杜威的哲学也影响了蔡元培.晏阳初等人 ...
- windows slaver 脚本执行xcopy 报错无效驱动器规格
jenkins上配置的windows slaver机器如下: 我用这台windows 机器作为slaver机器来编译pc的exe包,但是在最后归档包倒ftp上时报错,如下: 但是我直接在windows ...
- webclient 操作超时
Client.Headers.Add("user-agent", "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/ ...
- 接口自动化框架(java)--4.接口Token传递
这套框架的报告是自己封装的 一般token会在登录接口返回结果中呈现,从代码层面获取token的方式有很多种,我是使用jsonpath这个json路径语言去匹配token所在路径的key值 packa ...