Jquery经典案例总结

最新推荐文章于 2024-05-08 02:39:14 发布
最新推荐文章于 2024-05-08 02:39:14 发布
阅读量2k 收藏 9
点赞数
分类专栏： 经验总结和实例练习 文章标签： class jquery 
================================================================================================================================================================
//评分控件，心得体会：1.text() 和val()的区别  2.addClass()  和 .css()  两个用法的比较    3.学会使用标识 
================================================================================================================================================================
<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.7.1/jquery-1.7.1.js"></script>
    <style>
        #dv span
        {
            font-size: 50px;
            width: 260px;
            background-color: #cccccc;
            color: Yellow;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var isChecked;
            $("#dv>span").mousemove(function () {
                if (!isChecked) {
                    $(this).text("★").prevAll().text("★").end().nextAll().text("☆");
                }

            }).mouseout(function () {
                if (!isChecked) {
                    $("#dv>span").text("☆");
                }

            }).click(function () {
                isChecked = this;
            })
        })
        //心得体会
    </script>
</head>
<body>
    <div id="dv">
        <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
    </div>
</body>
</html>
================================================================================================================================================================
//在布局的时候遇到了问题，float:left;要让两个都在同一排，必须同时float:XXX；
================================================================================================================================================================
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .power 
        {
            width:150px;
            height:100px;
        }
        .f {float:left;}
        #ctrl input {width:50px;}
        #ctrl {margin-left:20px;margin-right:20px;}
    </style>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        // 子.appendTo(父)
        $(function () {
            $("#btn1").click(function () {
                $("#from :selected[jk!=has]").attr("jk", "has").clone().appendTo("#to");
            });
        })
    </script>
</head>
<body>
    <form method="post">
    <select id="from" size="8" multiple="multiple" class="power f">
        <option value="admin">管理员</option>
        <option value="teacher">教师</option>
        <option value="student">学员</option>
        <option value="other">游客</option>
        <option value="others">其他...</option>
    </select>
    <div id="ctrl" class="f">
        <input type="button" name="name" value=">" id="btn1" /><br />
        <input type="button" name="name" value="<" id="btn2" /><br />
        <input type="button" name="name" value=">>" id="btn3" /><br />
        <input type="button" name="name" value="<<" id="btn4" />
    </div>
    <select id="to" size="8" multiple="multiple" class="power f">
    </select>
    </form>
</body>
</html>
================================================================================================================================================================
//1.美女图片切换，使用了animate（），注意他的用法，//2.产生动画的图片，position：relative  必须设置成相对定位才出现效果  //3.选择器和过滤器的用法，注意区分
================================================================================================================================================================
<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/jquery-1.7.1.js"></script>
    <style>
        #show
        {
            width: 448px;
            height: 280px;
            overflow: hidden;
        }

        img
        {
            position: relative;
        }

        #sel li
        {
            list-style-type: none;
            border: 1px solid green;
            width: 180px;
            margin-bottom:5px;
            padding-left: 100px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("ul li").mouseover(function () {
                //停止上一次的操作
              $("#show :animated").stop();
                //$("#div :animated").stop();
                var $i = $(this).attr("title");
                $("#show img").animate({ left: -(parseInt($i) - 1) * 448 + "px" }, 200);
               // $("#show img").animate({ left: -($(this).text() - 1) * 448 + "px"}, 200);
            })
        })
    </script>
</head>
<body>
    <div id="sel">
        <ul>
            <li title="1">图片1</li>
            <li title="2">图片2</li>
            <li title="3">图片3</li>
            <li title="4">图片4</li>
            <li title="5">图片5</li>
 <!--       <li title="1">1</li>
            <li title="2">2</li>
            <li title="3">3</li>
            <li title="4">4</li>
            <li title="5">5</li>-->
        </ul>
    </div>
    <div id="show">
        <img src="images/animation.gif" />
    </div>
</body>
</html>
================================================================================================================================================================
//播放器第一个版本  布局问题  选择器标签的用法
================================================================================================================================================================
<!DOCTYPE html>
<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/jquery-1.7.1.js"></script>
    <style type="text/css">
        #btns input
        {
            float: left;
            margin-left: 8px;
            margin-top: 15px;
        }

        #options
        {
            background-color: pink;
        }

            #options li
            {
                list-style-type: none;
                cursor: pointer;
                border: 1px solid green;
            }

        #list ul
        {
            display: none;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //显示和隐藏功能模块
            $("#list>*:even").toggle(function () {
                $(this).next().slideDown("normal");
                $(this).attr("tagopen", "open");
            }, function () {
                $(this).next().slideUp("normal");
                $(this).removeAttr("tagopen");
            })
            //全选
            $("#selectAll").click(function () {
                
                $("#list>li[tagopen='open']+ul input").removeAttr("tag").attr("checked", "checked")
            
            });
            //全不选
            $("#selectNon").click(function () {
                if (true) {
                    $("#list>li[tagopen='open']+ul input").removeAttr("checked").removeAttr("tag");
                }
            });
            //反选

            $("#selectRe").toggle(function () {
                //先标记区分一下，在全选和反选里面去掉标记
                $("#list input:[checked='checked']").attr("tag", "remove").removeAttr("checked");
                //没有被选择
                $("#list input:not[:checked]:[tag!=remove]").attr("checked", "checked");
            },function () {
                $("#list input:[checked='checked']:[tag!=remove]").removeAttr("checked");
                //没有被选择
                $("#list input:not[:checked]:[tag=remove]").attr("checked", "checked");
            }
            );
        })
    </script>
</head>
<body>
    <div id="main" style="margin-left: 100px; border: 1px solid green; width: 200px">
        <div id="btns">
            <input type="button" value="全选" id="selectAll" /> 
        <input type="button" value="反选" id="selectRe" /> 
        <input type="button" value="全不选" id="selectNon" /> 
        </div>
        <hr style="border: 4px groove green; clear: both" />
        <div id="options">
            <ul id="list">
                <li id="group1">经典歌曲</li>
                <ul>
                    <li>
                        <input type="checkbox" value="天使的翅膀"  />天使的翅膀<br />
                    </li>
                    <li>
                        <input type="checkbox" value="寂寞沙洲" />寂寞沙洲<br />
                    </li>
                    <li>
                        <input type="checkbox" value="花香" />花香<br />
                    </li>
                    <li>
                        <input type="checkbox" value="男人海洋" />男人海洋<br />
                    </li>
                    <li>
                        <input type="checkbox" value="爱情呼叫转移" />爱情呼叫转移<br />
                    </li>
                    <li>
                        <input type="checkbox" value="大约在冬季" />大约在冬季<br />
                    </li>
                    <li>
                        <input type="checkbox" value="王妃" />王妃<br />
                    </li>
                    <li>
                        <input type="checkbox" value="突然的自我" />突然的自我<br />
                    </li>
                </ul>
                <li id="group2">最经播放</li>
                <ul>
                    <li>
                        <input type="checkbox" value="天使的翅膀" />天使的翅膀<br />
                    </li>
                    <li>
                        <input type="checkbox" value="寂寞沙洲" />寂寞沙洲<br />
                    </li>
                    <li>
                        <input type="checkbox" value="花香" />花香<br />
                    </li>
                    <li>
                        <input type="checkbox" value="男人海洋" />男人海洋<br />
                    </li>
                    <li>
                        <input type="checkbox" value="爱情呼叫转移" />爱情呼叫转移<br />
                    </li>
                    <li>
                        <input type="checkbox" value="大约在冬季" />大约在冬季<br />
                    </li>
                    <li>
                        <input type="checkbox" value="王妃" />王妃<br />
                    </li>
                    <li>
                        <input type="checkbox" value="突然的自我" />突然的自我<br />
                    </li>
                </ul>
                <li id="group3">所有好歌</li>
                <ul>
                    <li>
                        <input type="checkbox" value="天使的翅膀" />天使的翅膀<br />
                    </li>
                    <li>
                        <input type="checkbox" value="寂寞沙洲" />寂寞沙洲<br />
                    </li>
                    <li>
                        <input type="checkbox" value="花香" />花香<br />
                    </li>
                    <li>
                        <input type="checkbox" value="男人海洋" />男人海洋<br />
                    </li>
                    <li>
                        <input type="checkbox" value="爱情呼叫转移" />爱情呼叫转移<br />
                    </li>
                    <li>
                        <input type="checkbox" value="大约在冬季" />大约在冬季<br />
                    </li>
                    <li>
                        <input type="checkbox" value="王妃" />王妃<br />
                    </li>
                    <li>
                        <input type="checkbox" value="突然的自我" />突然的自我<br />
                    </li>
                </ul>
                <li id="group4">港台金曲</li>
                <ul>
                    <li>
                        <input type="checkbox" value="天使的翅膀" />天使的翅膀<br />
                    </li>
                    <li>
                        <input type="checkbox" value="寂寞沙洲" />寂寞沙洲<br />
                    </li>
                    <li>
                        <input type="checkbox" value="花香" />花香<br />
                    </li>
                    <li>
                        <input type="checkbox" value="男人海洋" />男人海洋<br />
                    </li>
                    <li>
                        <input type="checkbox" value="爱情呼叫转移" />爱情呼叫转移<br />
                    </li>
                    <li>
                        <input type="checkbox" value="大约在冬季" />大约在冬季<br />
                    </li>
                    <li>
                        <input type="checkbox" value="王妃" />王妃<br />
                    </li>
                    <li>
                        <input type="checkbox" value="突然的自我" />突然的自我<br />
                    </li>
                </ul>
            </ul>
        </div>
    </div>
</body>
</html>



=============================================================================================================================================================
//计算器Jquery错误的做法,为什么num1和num2监视的结果是Nan
<!DOCTYPE html>
<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/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var num1 = parseInt($("#num1").val());
            var num2 = parseInt($("#num2").val())

            var result;
            $("#btn").click(function () {
                var $oper = $("#operation>option:selected").text();
                switch ($oper) {
                    case "请选择": alert("请选择运算方式"); break;
                    case "+": result = num1 + num2; break;
                    case "-": result = num1 - num2; break;
                    case "*": result = num1 * num2; break;
                    case "/": result = num1 / num2; break;
                }
                $("#result").val(result);
            })
        })
</script>
</head>
<body>
    <input type="text" value="" id="num1" />
    <select id="operation">
        <option value="0" selected="selected">请选择</option>
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" value="" id="num2" />
    <input type="button" value="=" id="btn" />
    <input type="text" id="result" />
</body>
</html>
======================================================================================================================================================
//计算器正确的做法
=====================================================================================================================================================
<!DOCTYPE html>
<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/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //var num1 =parseInt($("#num1").val());
            //var num2 = parseInt($("#num2").val())

            var result;
            $("#btn").click(function () {
                var $oper = $("#operation>option:selected").text();
                switch ($oper) {
                    case "请选择": alert("请选择运算方式"); break;
                    case "+": result = parseInt($("#num1").val()) + parseInt($("#num2").val()); break;
                    case "-": result = parseInt($("#num2").val()) - parseInt($("#num2").val()); break;
                    case "*": result = parseInt($("#num2").val()) * parseInt($("#num2").val()); break;
                    case "/": result = parseInt($("#num2").val()) / parseInt($("#num2").val()); break;
                }
                $("#result").val(result);
            })
        })
    </script>
</head>
<body>
    <input type="text" value="" id="num1" />
    <select id="operation">
        <option value="0" selected="selected">请选择</option>
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" value="" id="num2" />
    <input type="button" value="=" id="btn" />
    <input type="text" id="result" />
</body>
</html>
================================================================================================================================================================
//无刷新品论Jquery版本，里面用到了appendTo()方法
================================================================================================================================================================


<!DOCTYPE html>
<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/jquery-1.7.1.js"></script>
    <style type="text/css">
        #main
        {
            background-color: coral;
            margin: 0px auto;
            width: 500px;
        }

        #dv
        {
            /*position:relative;*/
            margin-left: 48px;
        }

        #btndv
        {
            margin-left: 422px;
        }

        .pContent
        {
            width: 422px;
            margin-left: 78px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                //得到用户输入的昵称和内容
                var $nickname = $("#nickname").val();
                var $content = $("#content").val();
                if ($nickname.length == 0) {

                        $nickname = "路人甲";

                }
                if ($nickname.length != 0 && $content != 0) {
                    $("<p id='pName'></p>").text($nickname +" "+ new Date().toLocaleTimeString()).appendTo($("#main"));

                    $("<p class='pContent'></p>").text($content).appendTo($("#main"));

                    //发表完毕之后，清空文本框中的内容
                    $("#nickname").val("");
                    $("#content").val("");
                }
                else {
                    alert("昵称和内容不能为空");
                }

            })
        })
    </script>
</head>
<body>
    <div id="main">
        <label for="nickname">昵称：</label><input type="text" name="nickname" id="nickname" />
        <div id="dv">
            <textarea id="content" cols="50" rows="10" maxlength="500"></textarea>
        </div>
        <div id="btndv">
            <input type="checkbox" value="匿名" id="ni" />匿名
            <input id="btn" type="button" value="发表" />
        </div>
        <hr style="border: 2px solid green" />
    </div>
</body>
</html>

二手农民
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery案例
WangZhang_521的博客
05-06 2625
01-精品展示案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
经典jquery案例 经典jquery
08-29
经典jquery例子，这里包含可编辑表格、div制作弹出窗口、模拟动态股票、动态菜单例子、自动补全还有div实现jquery动态滑动效果。
最新JQuery 入门 - 附案例代码_jquery前端开发实战教程案例源码，2024年最新阿里三面
最新发布
2401_84185556的博客
05-08 1000
/通过给$.fn添加方法就能够扩展jquery对象});});标题1我是弹出来的div1◆◆◆});});});
关于JQuery（附3个案例）
weixin_43842821的博客
03-07 1746
简介 JQuery是一个快速的，小的，丰富的JavaScript库（类指函数，工具的集合）。使的HTML文档遍历和操作，事件处理，动画和Ajax等操作更加简单。 JQuery官网：https://jquery.com/ JQuery文档：https://www.bejson.com/apidoc/jquery/ JQuery特点 轻量，开源，免费，易于学习 兼容性处理 强大的选择器 链式操作 便捷的DOM操作 可靠的事件机制 封装了简单易用的ajax操作 丰富的插件 JQuery准备工作 下载JQuer
jQuery经典教程系列（一）样式篇
06-06
课程目标：本教程为jQuery经典教程系列的第一部分 - 样式部分，学后可以达到学习jQuery基础。课程简介：整套教程一共分为四篇，本篇为整套教程的第一篇 - 样式篇。jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。它是前后台人员都需要具备熟知的一个JavaScript库。可以点击 我的百科 通过百度百科更多了解我^ ^ 
JQuery经典案例源码
09-09
这个“JQuery经典案例源码”压缩包文件显然包含了一些使用jQuery实现的示例代码，旨在帮助开发者理解并学习jQuery的核心功能和常见应用场景。 一、jQuery基础 jQuery库通过一个简洁的API提供了对DOM（文档对象模型...
C# Asp.net Jquery Ajax 经典案例
07-31
结合C#、Asp.net和Jquery，我们可以构建出许多经典案例： 1. **实时搜索**：用户在搜索框输入时，使用Ajax发送请求到服务器，C#后端根据输入实时返回匹配的搜索结果，Jquery处理返回数据并更新页面，无需等待用户...
Jquery经典案例
06-09
《jQuery经典案例解析》 jQuery，作为一款广泛应用于Web开发的JavaScript库，以其简洁的API和强大的功能，深受开发者喜爱。对于初学者来说，通过学习和实践jQuery的经典案例，能够快速掌握其核心概念和常用方法，...
jQuery经典案例
05-13
《jQuery经典案例解析》 jQuery，作为一款强大的JavaScript库，自2006年发布以来，因其简洁的语法和丰富的功能，迅速成为Web开发者的首选工具。它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互，...
jquery经典例子
08-16
《jQuery经典实例解析》 jQuery，作为一款广泛应用于Web开发的JavaScript库，因其简洁的语法和强大的功能，深受开发者喜爱。本篇文章将深入探讨几个jQuery的经典应用实例，包括全屏背景切换、图片放大镜效果、商品...
Jquery项目案例
05-12
Jquery案例，里面有图片的自动切换，留言板，编辑框，都是用Jquery技术开发的，代码清晰，
50个实用的jquery案例
二手农民的学习博客
02-25 4653
1. 如何创建嵌套的过滤器： //允许你减少集合中的匹配元素的过滤器，   //只剩下那些与给定的选择器匹配的部分。在这种情况下，   //查询删除了任何没（:not）有（:has）   //包含class为“selected”（.selected）的子节点。   .filter(":not(:has(.selected))")  2. 如何重用元素搜索 var a
jQuery经典小案例
娃娃的博客
03-29 1万+
目录 下拉菜单案例 突出展示案例 淘宝精品案例 京东呼吸灯案例 tab栏切换案例 手风琴案例 城市选择案例 微博发布案例 弹幕效果案例 固定导航栏案例 小火箭返回顶部案例 音乐导航栏案例 下拉菜单案例 效果图： 源代码： 鼠标进入事件mouseenter 鼠标离开事件mouseleave 下拉动画slideDown /slid...
jQuery设计思想
weixin_34309543的博客
09-23 341
译文出自：阮一峰的网络日志 jQuery设计思想 一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。 选择表达式可以是CSS选择器： $(document)//选择整个文档对象 $...
JavaWeb_21_JQuery高级
weixin_45640009的博客
09-21 237
今日内容： 1. JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数： 1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000) 2. easing：用来指定切换效果，默认是"swing"
jQuery的几个经典案例
热门推荐
马某人的博客
07-08 2万+
案例一：使用jQuery完成下拉列表左右选择&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉列表左右选择&lt;/title&gt; &lt;script type="text/javascript" src=&quo
【jQuery简单的综合案例】
weixin_45753617的博客
08-25 540
【jQuery简单的综合案例】
jQuery练习案例：实现用户登录验证和图书列表添加删除（+原生）
欢迎来到长风沛雨的博客
11-20 3393
练一个普通的JS案例...
jQuery 遍历案例
07-27
jQuery Mobile是一个基于jQuery的JavaScript库，用于开发移动设备上的网页应用。它具有跨平台和跨浏览器的能力，可以让您使用统一的代码开发多种类型的移动设备。jQuery Mobile提供了丰富的UI组件，如导航栏、按钮、列表、表单等，可以帮助开发者快速构建出美观的移动应用。 一个简单的jQuery Mobile应用示例如下: ```html <!DOCTYPE html> <html> <head> <title>My Mobile App</title> <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" /> <script src="jquery-1.11.1.min.js"></script> <script src="jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>My Mobile App</h1> </div> <div data-role="main" class="ui-content"> <p>Welcome to my mobile app!</p> <a href="#about" class="ui-btn">About</a> </div> <div data-role="footer"> <h1>Copyright © 2022</h1> </div> </div> <div data-role="page" id="about"> <div data-role="header"> <h1>About</h1> </div> <div data-role="main" class="ui-content"> <p>This is a simple mobile app built with jQuery Mobile.</p> </div> </div> </body> </html> ``` 在这个例子中，我们使用了jQuery Mobile提供的data-role属性来定义页面的各个部分，如header、main、footer等。我们还使用了jQuery Mobile提供的UI组件，如按钮、导航栏等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值