几个简单常用的jQuery实例
一、点赞效果：
1.1 效果：
1.2 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
cursor: pointer;
}
.item{
border: 1px red solid;
height:555px;
width:555px;
position: fixed;
left:33%;
top:10%;
}
.content{
width:36px;
//background-color: yellowgreen;
/*position必须是relative*/
position: relative;
top:123px;
left:123px;
}
</style>
</head>
<body>
<div class="item">
<div class="content">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.content').click(function () {
var span = document.createElement('span');
var top = 0;
var fontSize = 15;
var right = 0;
var opacity = 1;
$(span).text('+1');
$(span).css('color','green');
$(span).css('position','absolute');
$(span).css('top',top + 'px');
$(span).css('right',right + 'px');
$(span).css('fontSize',fontSize + 'px');
$(span).css('opacity',opacity);
var f = setInterval(function () {
top -= 5;
fontSize += 5;
right -= 5;
opacity -= 0.1;
$(span).css('top',top + 'px');
$(span).css('right',right + 'px');
$(span).css('fontSize',fontSize + 'px');
$(span).css('opacity',opacity);
if(opacity < 0){
//清除定时器
clearInterval(f);
//清除新建的span标签
$(span).remove();
}
},50);
$(this).append(span);
})
</script>
</body>
</html>
二、选项卡功能
2.1 效果：
2.2 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
margin:0 auto;
border: 1px red solid;
height:555px;
width:555px;
position: fixed;
left:30%;
}
.item{
height:50px;
}
.item .item-c{
float: left;
width:30%;
border:1px greenyellow solid;
height:45px;
text-align: center;
line-height:45px;
cursor: pointer;
}
.content .cc{
height:300px;
text-align: center;
line-height:300px;
border: 1px blue solid;
}
.hide{
display:none;
}
.active{
background-color: #2b84da;
}
</style>
</head>
<body>
<div class="d1">
<div class="item">
<div class="item-c active">标题1</div>
<div class="item-c">标题2</div>
<div class="item-c">标题3</div>
</div>
<div class="content">
<div class="cc">内容1</div>
<div class="cc hide">内容2</div>
<div class="cc hide">内容3</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item-c').click(function () {
$(this).addClass('active').siblings().removeClass('active');
//索引方式实现 index获取索引！
var v = $(this).index();
$('.content').children().eq(v).removeClass('hide').siblings().addClass('hide');
})
</script>
</body>
</html>
三、拖动框体
3.1 效果：
3.2 代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 400px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;"></div>
<div style="height: 100px;"></div>
</div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
$(function(){
$('#title').mouseover(function(){
$(this).css('cursor','move');
});
$("#title").mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
var ord_x = _event.clientX;
var ord_y = _event.clientY;
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
$('#title').on('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y);
$(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px');
})
});
$("#title").mouseup(function(){
$("#title").off('mousemove');
});
})
</script>
</body>
</html>
四、登陆验证(规定用户名及密码必须只能是字母跟数字的组合)
4.1 效果如下：
4.2 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body>
<form id="f1" action="jq1.html" method="POST">
<div><input name="n1" tex = "用户名" type="text" /></div>
<div><input name="n2" tex = "密码" type="password" /></div>
<!--<div><input name="n3" tex = "邮箱" type="text" /></div>-->
<!--<div><input name="n4" tex = "端口" type="text" /></div>-->
<!--<div><input name="n5" tex = "IP" type="text" /></div>-->
<input type="submit" value="提交" />
<img src="...">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
// 当页面“框架”加载完毕后，自动执行
$(function(){
//找到所有input的type=submit的input标签
// 当页面“元素”加载完毕后，才执行
$(':submit').click(function () {
$('.error').remove();
//注意这里flag的位置
var flag = true;
//##遍历每一个input输入框
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
var n = $(this).attr('tex');
//规定只能是字母跟数字的组合
var reg = /^\w+$/;
if(v.length <= 0 || !(reg.test(v))){
flag = false;
//在相应的input后面添加一个span标签用于提示
var tag = document.createElement('span');
tag.className = "error";
tag.innerHTML = n + "为空或者格式错误";
$(this).after(tag);
}
});
//如果把return false放到循环里，只让当前的循环终止，要让整个click终止得在外面加return false
return flag;
});
});
</script>
</body>
</html>
几个简单常用的jQuery实例的更多相关文章
- PHP+jQuery开发简单的翻牌抽奖实例
PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: <ul ...
- 值得 Web 开发人员学习的20个 jQuery 实例教程
这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...
- 十五个常用的jquery代码段【转】
好的文章顶一个 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top 2 $('a.t ...
- 十五个常用的jquery代码段
十五个常用的jquery代码段 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top ...
- 经验分享：10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- jquery】常用的jquery获取表单对象的属性与值
[jquery]常用的jquery获取表单对象的属性与值 1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的 ...
- 分享10款常用的jQuery焦点图插件
爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...
- Linux下简单的socket通信实例
Linux下简单的socket通信实例 If you spend too much time thinking about a thing, you’ll never get it done. —Br ...
- 10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...
随机推荐
- hdu3746 Cyclic Nacklace KMP
CC always becomes very depressed at the end of this month, he has checked his credit card yesterday, ...
- string的方法find
官方解释:find(sub[, start[, end]]) Return the lowest index in the string where substring sub is found wi ...
- MySQL Memory--内存分配相关参数
Seesion级的内存分配: max_threads(当前活跃连接数)* ( read_buffer_size(顺序读缓冲,提高顺序读效率) + read_rnd_buffer_size(随机读缓冲, ...
- vm centos7中用NAT模式配置上网
第一步:设置虚拟机的NAT相关网络设置: 点击5标致处的“NAT设置”会出现设置6标致处的网关. 第二部:设置操作系统网络设置,右击上图中9标致处的系统,点击设置 第三部:配置操作系统ip ...
- 01炼数成金TensorFlow基本概念
一.Tensorflow基本概念 1.使用图(graphs)来表示计算任务,用于搭建神经网络的计算过程,但其只搭建网络,不计算 2.在被称之为会话(Session)的上下文(context)中执行图 ...
- 普林斯顿数学指南(第二卷) (Timothy Gowers 著)
第IV部分 数学的各个分支 IV.1 代数数 IV.2 解析数论 IV.3 计算数论 IV.4 代数几何 IV.5 算术几何 IV.6 代数拓扑 IV.7 微分拓扑 IV.8 模空间 IV.9 表示理 ...
- MySQL全文本搜索
启用全文本搜索支持 create table text( -> id int not null auto_increment, -> texts text null, -> prim ...
- 20 约束 异常处理 MD5 日志
三十九, 一.类的约束 1.抛出异常 NotImplementedError 2.抽象方法 含有抽象方法的类是抽象类 抽象类中的方法全是抽象方法的是接口 抽象类不能创建对象 二.异常处理 处理完 ...
- 利用 MessageRPC 和 ShareMemory 来实现 分布式并行计算
可以利用 MessageRPC + ShareMemory 来实现 分布式并行计算 . MessageRPC : https://www.cnblogs.com/KSongKing/p/945541 ...
- activiti 委派和转办的区别
委派 委派:是将任务节点分给其他人处理,等其他人处理好之后,委派任务会自动回到委派人的任务中 将hr的任务进行委派: taskService.delegateTask(taskId, userId); ...