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:1 solid #ccc; position:relative;right:20px; top:20px; cursor:pointer;}
        #Ware1Add{ width:20px;height:20px; border:1 solid #ccc; position:relative;left:60px; bottom:20px; cursor:pointer;}
        #Ware2Mines{ width:20px;height:20px; border:1 solid #ccc; position:relative;right:20px; top:20px; cursor:pointer;}
        #Ware2Add{ width:20px;height:20px; border:1 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(2));
                }
                else {
                    $(‘#zong1‘).html(‘0.00‘);
                }
                GetCount();
            });
            //计算选中的复选框的金额
            $(‘input[name = item]‘).click(function () {
                GetCount();
            });
            //复选框选中时方法
            function GetCount() {
                var sum = 0;
                $(‘input[name = item]‘).each(function () {
                    $(‘#Ware1‘).attr(‘value‘, $(‘#Text2‘).val());
                    $(‘#Ware2‘).attr(‘value‘, $(‘#Text3‘).val());
                    for (var i = 0; i < $(this).length; i++) {
                        if ($(this).attr(‘checked‘)) {
                            sum += parseFloat($(this).val());
                            //alert(sum);
                        }
                    }
                    $(‘#zong1‘).html((sum).toFixed(2));
                    $(‘#Go‘).css(‘display‘, ‘inherit‘);
                    $(‘#div‘).attr(‘class‘, ‘dv_Go‘);
                });
            }
            //});

            //$(function () {
            $(‘#Ware1Add‘).click(function () {
                //$(this).prev() //当前元素的前一个元素，即Text2
                $(this).prev().val(parseFloat($(this).prev().val()) + 1);
                $(‘#Text2‘).attr(‘value‘, 42.00 * $(‘#Ware1Num‘).val());
                GetCount();
            });
            $(‘#Ware1Mines‘).click(function () {
                if (parseFloat($(this).next().val()) <= 0) {
                    $(‘#Ware1Num‘).attr(‘value‘, 0);
                }
                else {
                    //$(this).next() //当前元素的后一个元素，即Text2
                    $(this).next().val(parseFloat($(this).next().val()) - 1);
                    $(‘#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="1" style="width: 40px; height: 13px;
                        text-align: center;" value="1" 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="1" style="width: 40px; height: 13px;
                        text-align: center;" value="1" 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: #000;
        }
        *
        {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }
        .all
        {
            width: 630px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
            padding: 10px 0 0 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(500, 0.3);
            });
            $(‘li‘).mouseout(function () {
                $(this).siblings().stop().fadeTo(500, 1);
            });
            $(‘#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:0; margin:0; list-style:none; border:0;}
.all{ position:relative; width:650px; height:250px; overflow:hidden; margin:50px auto; background:gold;}
.all ul{ position:relative; z-index:1;}
.all ul li{ position: absolute; left:0; top:0;}
 .all ol { position:absolute; right:10px; bottom:10px; z-index:2;}
.all ol li{ width:20px; height:20px; border:1px solid #999; color:#999; line-height:20px; text-align:center; float:left; margin-left:5px; background:#333; 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:0;}
</style>
<script type ="text/javascript" src ="jquery-1.7.2.min.js"></script>
<script type  ="text/javascript">
    $(function () {
        var num1 = 6;
        $(‘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: ‘0‘ }, 500);
        });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div class = "all">
    <ul>
        <li><img src="Images/01.jpg" width = "650px" height = "250" /></li>
        <li><img src="Images/02.jpg" width = "650px" height = "250" /></li>
        <li><img src="Images/03.jpg" width = "650px" height = "250" /></li>
        <li><img src="Images/04.jpg" width = "650px" height = "250" /></li>
        <li><img src="Images/05.jpg" width = "650px" height = "250" /></li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li class = "current">5</li>
    </ol>
    </div>
    </form>
</body>
</html>

时间： 2024-10-24 06:24:24

Jquery小功能实例的相关文章

Jquery异步功能实例

Jquery确实是一个很好的JavaScript框架,今天利用闲暇时间给大家一个借助Jquery异步实现校验用户名的唯一性的例子: 代码1--index.jsp文件: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String basePath = request.getScheme()+&quo

微信小程序实例教程（一）

序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志. 1. 获取微信小程序的 AppID 首先,我们需要拥有一个帐号,如果你能看到该文档,我们应当已经邀请并为你创建好一个帐号.注意不可直接使用服务号或订阅号的 AppID. 利用提供的帐号,登录https

用angular方法简单实现了吃了么搜索小功能，还不太完善，后续会继续添加新内容。

最近接触了Angular框架,今天用里面的http请求方法做了一个小的案例,是一个查询地名获取附近美食的小案例.还不太完善,后面面有时间会继续添加新的内容.这个小案例没有用到任何的jQuery与原生js方法. 先上HTML结构代码与HTML结构中的angular指令. <body ng-app="app"> <div ng-controller="con" id="con"> <h1>吃了么</h1>

程序员都会的 35 个 jQuery 小技巧

收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 1 $(document).ready(function(){ 2 $(document).bind("contextmenu",function(e){ 3 return false; 4 }); 5 }); 2. 隐藏搜索文本框文字 1 Hide when clicked in the search field, the value.(example can be found below in t

必须学会使用的35个Jquery小技巧

query 与JS相比较,方便了许多,语法上也简便了不少,下面是Jquery常用的技巧,下面Jquery使用的方法在各个网站中都会使用到. 收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 1 2 3 4 5 $(document).ready(function(){     $(document).bind("contextmenu",function(e){         return false;     }); }); 2. 隐藏搜索文本框

【小功能2】android获取手机信息（号码，内存，CPU，分辨率，MAC，IP，SD卡，IMEI,经纬度，信号强度等等）

为了实现一个功能,需要搜集手机信息,自己先在网上找了相关信息进行了汇总,主要是汇集手机的信息,一般想要的信息在手机设置->关于手机->状态消息里面包含了手机的各种信息,下面的代码中也主要显示了那些信息,但是源码的方法我还没有看,先把总结的贴出来.先上图(太多就截取几个).  上代码啦,太多了,就写主要代码了. // 获取Android手机中SD卡存储信息 获取剩余空间 public void getSDCardInfo() { // 在manifest.xml文件中要添加 /* * <u

python2安装httplib2及其小爬虫实例

本篇文章将教大家如何在python2中安装httplib2库,并且会通过一个小爬虫实例展示一下其功能. 首先大家可以从"https://code.google.com/p/httplib2/" 下载一款适合你的压缩包 (也可以从本篇文章的附件中直接下载lib2安装包) 解压你的压缩包到任意目录中(推荐是python的安装目录里) 3. 设置环境变量,这样就不用在命令行下给出python.exe的具体位置,具体说如下: 假设你的python安装在D:\Python目录下,设置环境变量方法

微信小程序实例源码大全

怎么本地测试微信小程序实例源码 1.下载源码 2.打开微信开发者工具 3.添加项目->选择本项目目录->编译执行 微信小程序实例源码大全 微信小程序游戏类demo:识色:从相似颜色中挑选不同的一个 源码链接:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1105 微信小程序精品demo:仿网易云音乐:歌单,FM,播放,评论 源码链接:http://www.wxapp-union.com/forum.php?mod=vie

每个程序员都会的 35 个 jQuery 小技巧

1 收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 2 1. 禁止右键点击 3 $(document).ready(function(){ 4 $(document).bind("contextmenu",function(e){ 5 return false; 6 }); 7 }); 8 2. 隐藏搜索文本框文字 9 Hide when clicked in the search field, the value.(example can be found belo