Jquery经典案例总结

2024-09-07 01:48

本文主要是介绍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>

这篇关于Jquery经典案例总结的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1143710

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

深入探索协同过滤:从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤(UserCF)2. 基于物品的协同过滤(ItemCF)3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代,推荐系统成为连接用户与内容的桥梁。本文聚焦于

【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

伴随着区块链技术的不断完善,其在教育信息化中的应用也在持续发展。利用区块链数据共识、不可篡改的特性, 将与教育相关的数据要素在区块链上进行存证确权,在确保数据可信的前提下,促进教育的公平、透明、开放,为教育教学质量提升赋能,实现教育数据的安全共享、高等教育体系的智慧治理。 可信教育区块链治理系统的顶层治理架构由教育部、高校、企业、学生等多方角色共同参与建设、维护,支撑教育资源共享、教学质量评估、