JQUERY简写案例

源代码:

<script ttype="text/javascript">
$(function(){
$(".btn").eq(0).click(function(){
$(".layer").eq(0).show();
});
})
$(function(){
$(".btn").eq(1).click(function(){
$(".layer").eq(1).show();
});
})
</script>

简写后:

$(function(){
$(".btn:lt(2)").each(function(i){
$(this).on("click",function(){
$(".layer:eq("+i+")").show();
});
});
});

时间: 2024-10-05 04:50:31

JQUERY简写案例的相关文章

tomcat URL简写案例:模拟网站www.baidu.com的访问

tomcat URL简写案例:模拟网站 * 实际URL:http://www.baidu.com:8080/myweb/1.html * 实际位置:F:\mywebapps\myweb\1.html * 最终访问URL:http://www.baidu.com * 步骤 * 1 可用:http://www.baidu.com:8080/myweb/1.html * 虚拟主机 <Host name="www.baidu.com" appBase="F:\mywebapps

中国省市区地址三级联动jQuery插件 案例下载

中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm或bower来安装该三级联动插件. npm install distpicker bower install distpicker 使用方法 HTML结构 基本的HTML结构是使用一个<div>容器来包裹一组<select>元素. <div><!-- containe

jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统

jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统

jquery简单案例

昨天写了一篇关于jquery选择器的学习的记录,后边发现关于jquery的学习不能只依靠简单的文档,必须动手写出一些实际的东西,这样会学习的更好,今天呢,就给大家带来利用jquery实现文字和图片提示的效果. jquery文字提示 先看下效果: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"/> <title>

jQuery常用案例总结

模态对话框 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .field{ 8 z-index: 1; 9 } 10 .cover{ 11 display: none; 12 z-index: 2; 13 position:

jquery使用案例

表单验证 Dom实现表单验证 通过在form标签的submit上绑定一个onclick事件,用户点击事,触发这个事件,执行Checkvalid()函数进行对表单中的元素值验证,验证通过之后,继续让submit之行自己的事件,post表单内容到服务器,如果验证不通过,则返回false,终止submit继续提交 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

jQuery实际案例⑥——图片跟随鼠标、五角星评分案例

一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距离页面左侧.顶部的距离通过event.pageX.event.pageY,然后通过修改图片的left.top值即可. 二.五角星评分案例 1.如图:业务逻辑:①鼠标移入某颗星时,这颗及之前的都变实心:②未点击,移开评分区,所有星变空心:③点击,移开评分区,点击过的星及之前的变实心 2.用到的方法:e

jQuery小案例

Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> <head> <script type="text/javascript"> function check() { String.prototype.format = function(){ var args = arguments; return this.replace(/\{(\d+)\}/g, functio

jQuery基础--案例练习

1.端口案例改进,操作更灵活 <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .model{ position: fixed; top: 50%; left: 50%; width: 500px; height: 350px; margin-top: -200px; margin-left: -250px; b