jQuery 简单案例

案例一:全选、反选、取消实例

    

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input type="button" value="全选" οnclick="checkAll();" /><input type="button" value="反选" οnclick="reverseAll();" /><input type="button" value="取消"  οnclick="cancleAll();"/><table border="1"><thead><tr><th>选项</th><th>IP</th><th>PORT</th></tr></thead><tbody id="tb"><tr><td><input type="checkbox" /></td><td>1.1.1.1</td><td>80</td></tr><tr><td><input type="checkbox" /></td><td>1.1.1.1</td><td>80</td></tr><tr><td><input type="checkbox" /></td><td>1.1.1.1</td><td>80</td></tr></tbody></table><script src="jquery-1.12.4.js"></script><script>function checkAll() {$('#tb :checkbox').prop('checked',true);   #prop是jquery的属性,checked设置为true,只有checked表示获取选中的
        }function cancleAll() {$('#tb :checkbox').prop('checked',false);}function reverseAll() {$(':checkbox').each(function(k){// this,代指当前循环的每一个元素// Dom/*if(this.checked){this.checked = false;}else{this.checked = true;}*//*if($(this).prop('checked')){$(this).prop('checked', false);}else{$(this).prop('checked', true);}*/// 三元运算var v = 条件? 真值:假值var v = $(this).prop('checked')?false:true;$(this).prop('checked',v);})}</script>
</body>
</html>全选、反选、取消
全选、反选、取消

案例二:菜单栏点击展开收起实例

  本实例实现菜单栏点击一个菜单另一个菜单收起来,类似下图:

   

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style>.header {background-color: #67b168;
                color: wheat;}.content {min-height: 30px;}.hide {display: none;}</style>
</head>
<body><div style="height: 400px;width: 200px;border: 1px solid #d58512"><div class="tiem"><div class="header">标题一</div><div  class="content hide">内容一</div></div><div class="tiem"><div class="header">标题二</div><div class="content hide">内容二</div></div><div class="tiem"><div class="header">标题三</div><div class="content hide">内容三</div></div></div><script src='js/jquery-1.11.0.min.js'></script>
<script>
//        找到所有class为header的标签,然后.click()绑定事件$('.header').click(function(){
//                #jQuery默认循环所有选中的标签
//             $(this)  当前点击的标签
//             $(this).next  当前点击的标签的下一个标签
//                找到当前点击的标签的下一个标签,移除hide样式,点击后hide去掉,即展开$(this).next().removeClass('hide');
//                找到当前标签的父标签的兄弟标签,然后找样式为.content的标签$(this).parent().siblings().find('.content').addClass('hide');
//            可以一行完成
//            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')})</script>
</body></html>
菜单栏点击展开其余收起

 

案例三:模态编程框案例

本案例实现魔态编程框案例,点击添加会出现一个对话框,用于添加一行,编辑可以编辑当前行,删除可以删除当前行

 

 

 

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style>.modal{position: fixed;top: 50%;left: 50%;width: 500px;height: 400px;margin-left: -250px;margin-top: -250px;background-color: #eeeeee;z-index: 10;}.shadow {position: fixed;top: 0;left: 0;right: 0;bottom: 0;opacity: 0.6;background-color: #000000;z-index: 9;}.hide {display: none;}</style>
</head>
<body><a οnclick="addElement();">添加</a><table border="2" id="tb"><tr><!--target 自定义属性--><td target="hostname">1.1.1.1</td><td target="port">80</td><td><a class="edit">编辑</a><a class="del">删除</a></td></tr><tr><td target="hostname">2.2.2.2</td><td target="port">80</td><td><a class="edit">编辑</a><a class="del">删除</a></td></tr><tr><td target="hostname">3.3.3.3</td><td target="port">8000</td><td><a class="edit">编辑</a><a class="del">删除</a></td></tr></table><!--modal 提前写好编程框--><div class="modal hide"><div><input name="hostname" type="text"><input name="port" type="text"></div><div><input type="button" value="取消" οnclick="canceModal();"><input type="button" value="确定" οnclick="confirmModal();"></div></div><!--shadow 遮罩层--><div class="shadow hide"></div><script src='js/jquery-1.11.0.min.js'></script>
<script>function addElement(){$(".modal,.shadow").removeClass('hide');}function canceModal(){$(".modal,.shadow").addClass('hide');
//        清空框中的脏数据,$('.modal input[type="text"]').val("");}
//    $('.edit').click(function(){
//        $(".modal,.shadow").removeClass('hide');
        this 当前点击的标签,parent父标签,prevAll父标签上面的所有同级标签
//        var tds = $(this).parent().prevAll();
        循环获取tds中的内容(td中的内容),赋值给编程框中的value
//        tds.each(function(){
            this 当前每个td
            获取自定义属性的值,hostname/port
//            var n = $(this).attr('target');
            获取当前td内容:1.1.1.1/80
//            var v = $(this).text();
            将获取的内容放入相应的编程框中
          $('.modal input[name="[hostname"]').val(1.1.1.1)
            因为hostaname/port为变量,而name=里面需要是“”格式,所以用到字符串拼接
            var a1 = '.modal input[name="';
            var a2 = '"]';
            var temp = a1 + n + a2
//            $('.modal input[name="' + n + '"]').val(v)
//        });
//
//    });
//    在添加更多一行的时候所产生的 input 和 button 都是动态生成的,所以不能使用 click,要使用 on$(document).on('click','.edit',function(){$(".modal,.shadow").removeClass('hide');
//        this 当前点击的标签,parent父标签,prevAll父标签上面的所有同级标签var tds = $(this).parent().prevAll();
//        循环获取tds中的内容(td中的内容),赋值给编程框中的valuetds.each(function(){
//            this 当前每个td
//            获取自定义属性的值,hostname/portvar n = $(this).attr('target');
//            获取当前td内容:1.1.1.1/80var v = $(this).text();
//            将获取的内容放入相应的编程框中
//          $('.modal input[name="[hostname"]').val(1.1.1.1)
//            因为hostaname/port为变量,而name=里面需要是“”格式,所以用到字符串拼接
//            var a1 = '.modal input[name="';
//            var a2 = '"]';
//            var temp = a1 + n + a2$('.modal input[name="' + n + '"]').val(v)});});function confirmModal(){//        创建一个trvar tr = document.createElement('tr');$('.modal input[type="text"]').each(function(){
//            循环使用dom创建一个td,也就是有几个input就需要加几个tdvar td = document.createElement('td');
//            获取输入框中输入的数据var v = $(this).val();
//            获取数据库的属性var tage = $(this).attr('name');
//            将属性加入到td中$(td).attr('target',tage);
//            将输入的内容加入td中$(td).append(v);
//            将td加入tr中$(tr).append(td);});
//        最后将编辑和删除加入var temp = "<a class='edit'>编辑</a> <a class='del'>删除</a>";
//        将一行加入到table里面var td2 = document.createElement('td');$(td2).append(temp);$(tr).append(td2);$('#tb').append(tr);
//        添加完成后去掉编程框和遮罩层$('.modal,.shadow').addClass('hide');
//        清空框中的脏数据,否则下次在点击添加时,还会有上一次填写的数据$('.modal input[type="text"]').val("");}//    删除tr行
//    在添加更多一行的时候所产生的 input 和 button 都是动态生成的,所以不能使用 click,要使用 on$(document).on('click','.del',function(){console.log(this,"1");$(this).parent().parent().remove();});
</script>
</body></html>
编程框添加删除案例

 

 

 案例四:横向菜单切换

本案例实现横向菜单菜单切换,即点击菜单一现实内容一,点击菜单二,显示菜单二。。。

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.hide{display: none;}.menu{height: 38px;background-color: #eeeeee;line-height: 38px;}.active{background-color: brown;}.menu .menu-item{float: left;border-right: 1px solid red;padding: 0 5px;cursor: pointer;}.content{min-height: 100px;border: 1px solid #eeeeee;
        }</style>
</head>
<body><div style="width: 700px;margin:0 auto"><div class="menu"><div  class="menu-item active" a="1">菜单一</div><div  class="menu-item" a="2">菜单二</div><div  class="menu-item" a="3">菜单三</div></div><div class="content"><div b="1">内容一</div><div class="hide"  b="2">内容二</div><div class="hide" b="3">内容三</div></div></div><script src='js/jquery-1.11.0.min.js'></script><script>$('.menu-item').click(function(){$(this).addClass('active').siblings().removeClass('active');var target = $(this).attr('a');$('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');});</script>
</body>
</html>
横向菜单切换

 

 

 

持续更新中。。。。。。。。。。。

转载于:https://www.cnblogs.com/liang-wei/p/9629633.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/426759.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

xadsafe做暗刷_手把手教你如何去掉网吧广告之PUBWin2015_XADSAFE

链接: https://pan.baidu.com/s/1sOMjmseN_O9NW1fne6nyUw 密码: s7hf完完全全学会网吧去广告第四节&#xff1a;Pubwin2015篇前言&#xff1a;暗安全兴趣小组追求的是在技术突破中的快感&#xff0c;他们在乎过程&#xff0c;而不是最终的结果。暗安全欢迎任何有共同爱好的人加…

实例56:python

#题目&#xff1a;画图&#xff0c;学用circle画圆形。 #usr/bin/env python #coding:utf-8 if name ‘main’: import turtle turtle.title(“画圆”) turtle.setup(800,600,0,0) penturtle.Turtle() pen.color(“yellow”) pen.width(5) pen.shape(“turtle”) pen.speed(…

c语言笔记之数组和指针(初学者)

数组 定义 由数据类型相同的一系列元素组成 size_t arr[index]{ } *当{}内列出元素的值&#xff0c;可以让编译器自己数出数组大小&#xff0c;此时index可省略不写。数组的长度可以用(sizeof arr)/(sizeof arr[0])间接得出 初始化 不完全初始化时&#xff0c;编译器会把…

JAVA之运算符优先级

Java运算符优先级从高到低 运算符结合性[ ] . ( ) (方法调用)从左向右! ~ -- (一元运算) -(一元运算)从右向左* / %从左向右 -从左向右<< >> >>>从左向右< < > > instanceof从左向右 !从左向右&从左向右^从左向右|从左向右&&从左…

5 html 根据手机转动而转动_手机安装陀螺仪有什么用 手机安装陀螺仪作用介绍【详解】...

手机中有各种传感器&#xff0c;其中陀螺仪是个听起来高大上的玩意&#xff0c;今天小编就来给大家科普一下&#xff0c;陀螺仪在手机中的具体应用及其原理。 陀螺仪(角速度传感器)它的测量物理量是偏转、倾斜时的转动角速度。在手机上&#xff0c;仅用加速度传感器没办法测量或…

python学习turtle(笔控制)

学习记录&#xff0c; 笔控制 turtle.pendown() turtle.pd() turtle.down()&#xff0c;下笔&#xff0c;移动时绘画。 turtle.penup() turtle.pu() turtle.up()&#xff0c;拿起笔&#xff0c;移动时不绘画。 turtle.pensize(widthNone) turtle.width(widthNone)&#xff0c…

c语言语法格式规范(1)常量的非法与合法

c语言语法格式规范&#xff08;1)常量的非法与合法 首先确定常量的类型 整型 确定进制&#xff0c;查看各位数的范围是否超界。 8进制常量以前导 0 开始&#xff0c;每位数只能到7 例如&#xff1a;05188 非法 16进制常量以 0x 开始&#xff0c;每位从 0 ~ f 例如&#xf…

实例57:python

#画直线 import turtle def drawline(n): tturtle.Pen() t.color(0.3,0.8,0.6) #设置颜色&#xff0c;在0–1之间 t.begin_fill() #开始填充颜色 for i in range(n): #任意边形 t.forward(50) t.left(360/n) t.end_fill() #结束填充颜色 drawline(4)

BZOJ1895Pku3580 supermemo——非旋转treap

题目描述 给出一个初始序列fA1;A2;:::Ang&#xff0c;要求你编写程序支持如下操作&#xff1a; 1. ADDxyD&#xff1a;给子序列fAx:::Ayg的每个元素都加上D。例如对f1,2, 3,4,5g执行"ADD 241" 会得到f1,3,4,5,5g。 2. REVERSExy&#xff1a;将子序列fAx:::Ayg翻转。例…

光谱 波长_【第三课】红外光谱仪及其联用技术

第三课前两节课&#xff1a;【第一课】什么是红外光谱方法、【第二课】如何进行红外光谱结构解析&#xff0c;孙素琴教带我们学习了红外光谱的前世今生&#xff0c;以及红外光谱的理论基础。相信小伙伴们都有所收获&#xff0c;今天咱们将跟随另一位清华大学红外光谱专家周群老…

请写一个C表达式,对正浮点数a的值按四舍五入取整

(int)(n0.5) 当我们做强制类型转换时会直接舍弃小数部分&#xff0c;所以我们要做的就是改变浮点数的小数位大于或等于0.5时的个位值。 其他类型数据转换时也可用此思路。

实例58:python

#画方块 #!/usr/bin/python -- coding: UTF-8 -- from turtle import * forward(100) left(90) forward(100) for i in range(2): left(90) forward(100)

WPF 蒙罩层 LoadingPage

WPF 蒙罩层 LoadingPage 原文:WPF 蒙罩层 LoadingPageWPF 蒙罩层 LoadingPage 前言 无论是在PC客户端&#xff0c;移动端&#xff0c;网站&#xff0c;在遇到长时间处理的时候都会需要用到蒙罩层&#xff0c;让用户有更好的体现。今天上网逛了一下各位前辈网友的蒙罩层的实现方…

前端对所有文件请求添加header_【前端面试必问】浏览器缓存原理?送你满分答案...

(本文适合所1-3年的前端阅读)原文链接&#xff1a;http://blog.poetries.top/2019/01/02/browser-cache/一、浏览器缓存基本认识分为强缓存和协商缓存浏览器在加载资源时&#xff0c;先根据这个资源的一些http header判断它是否命中强缓存&#xff0c;强缓存如果命中&#xff0…

实例59:python

#题目&#xff1a;计算字符串长度 #!/usr/bin/python -- coding: UTF-8 -- sStr1 ‘strlen’ print (len(sStr1))

C语言实战:(1) 整数的二进制表示

#include<stdio.h> int main( ) {int a; //待转换的整数scanf("%d",&a);//用左移位运算(移到符号位时a的正负)逐位判断0和1for(int i0,n 0;i<sizeof(int)*8;i,n,aa<<1){if(n%40&&n!0)putchar( );//控制格式的输出&#xff1a;每四位输出…

intern()方法的使用

intern() intern方法的作用是&#xff1a;如果字符串常量池中已经包含一个字符串等于此String对象的字符串&#xff0c;则返回常量池中的这个String对应的对象&#xff0c; 否则将其添加到常量池并返回常量池中的引用。 在jdk1.7以后&#xff0c;就不会像之前那样把String对象复…

华为做raid5步骤_华为验厂验厂流程如何?主要内容是什么呢?

华为作为民族企业是全球领先的信息与通信技术(ICT)解决方案供应商&#xff0c;消除数字鸿沟&#xff0c;促进经济、环境和社会的和谐与可持续发展是华为一直以来的可持续发展愿景。为此&#xff0c;华为不仅支持联合国可持续发展目标的实现&#xff0c;还同时与供应链上下游的客…

实例60:python

#题目&#xff1a;打印出杨辉三角形&#xff08;要求打印出10行如下图&#xff09;。 #!/usr/bin/python3 def Pascal(n): ls [[1]] for i in range (1, n): ls.append([1]) for j in range(1, i): ls[i].append(ls[i-1][j-1] ls[i-1][j]) ls[i].append(1) for i in range(0…

FUI- 我离钢铁侠还差几步?

本文来自网易云社区作者&#xff1a;马宝什么是FUI本文不累赘的可以自行Google&#xff0c;喜欢科幻的同学们都看一张图就能感受到FUI的魅力。本文算是一篇所见即所的&#xff0c;可边学边干的原创教程。总结全文就一句话&#xff0c;“让结构和表现分离&#xff0c;自下而上的…