几个简单常用的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.平滑滚动到 ...
随机推荐
- 将本地项目上传到git/码云
idea查看任意项目的远程仓库地址: git remote -v git branch -v git branch -d 分支名 删除本地分支 git branch -D 分支名 ...
- 【BZOJ4552】【TJOI2016】【HEOI2016】排序
经验还是不够…… 原题: 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题 ,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对 ...
- 芯灵思SinA33开发板怎样安装虚拟机
芯灵思SinA33开发板怎样安装虚拟机 今天入手一块芯灵思的开发板,型号为SIN-A33,用的是全志的A33芯片,与其它开发板不同的是, 芯灵思开发板手册上用来搭建开发环境的linux系统是cento ...
- golang for 循环变量取内存地址
前几天提交的代码进行测试的时候发现变量无法赋值,原始代码如下: for _, asset := range dspInfo.native.Assets { var resAsset protocol. ...
- get android or ios appname
get app name from GP or itunes var superagent = require('superagent'); var cheerio = require('cheeri ...
- mysql之mysqldump——备份与还原
导出数据库里的某一张表 [root@localhost ~]# mysqldump -uroot -p test bptest>fi.mysql #导出test数据库中的bptest表 Ente ...
- sqler sql 转rest api 2.0 试用
sqler 的迭代还是很快的,已经2.0 了,2.0 有好多新功能的添加,同时也有好多不兼容的修改 说明: 测试使用docker-compose,同时我已经push 了docker 镜像 dalong ...
- PostgreSQL Q&A: Building an Enterprise-Grade PostgreSQL Setup Using Open Source Tools
转自:https://www.percona.com/blog/2018/10/19/postgresql-building-enterprise-grade-setup-with-open-sour ...
- jsonDB使用手冊
已在github上建立项目:https://github.com/ThinkerCodeChina/jsonDB 博客:http://blog.csdn.net/thinkercode/ 简单介绍: ...
- openstack--3--控制节点安装配置keystone
Keystone介绍 Keystone作用 用户与认证:用户权限与用户行为跟踪: 服务目录:提供一个服务目录,包括所有服务项与相关Api的端点,它是个注册中心 用户认证包括:User,Tenant,T ...