几个简单常用的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.平滑滚动到 ...
随机推荐
- hdu1358 Period KMP
给出一个字符串,找出所有可以作为它循环节的子串长度 利用kmp的失配数组的性质,可以直接做 #include<stdio.h> #include<string.h> ; cha ...
- Intellij部署Tomcat问题
Intellij部署Tomcat问题 Warnings:No artifacts marked for development 切换到Development标签页 选择+按钮,并选择Artifacts ...
- VxWorks笔记
利用vxWorks可裁减可动态链接特性进行模块调试的分析 a) 首先,可将root.c简化,去掉大部分不需要加载的模块和想要调试的模块,以加快系统启动速度. b) 如果vxworks加载的.o中引用了 ...
- hermes kafka 转http rest api 的broker 工具
hermes 与nakadi 是类似的工具,但是设计模型有很大的差异,hermes 使用的是webhook的模式(push) nakadi 使用的是pull(event stream),各有自己解决的 ...
- Python之安装pip
安装Python之后,命令行语句定位到其安装目录下的Scripts目录 如我的安装目录是:D:\python\Scripts 然后执行命令:easy_install.exe pip就会开始安装pip ...
- [转]ArrayList的实现原理
1. ArrayList概述: ArrayList是List接口的可变数组的实现.实现了所有可选列表操作,并允许包括 null 在内的所有元素.除了实现 List 接口外,此类还提供一些方法来操作内部 ...
- create-react-app：reject和不reject(使用react-app-rewired)这2种情况下的antd组件按需引入配置
create-react-app:eject和不eject(使用react-app-rewired)这2种情况下的antd组件按需引入配置: 不eject(使用react-app-rewired)配置 ...
- irc使用教程
下面介绍几个IRC名词:NICKNAME (或nick) 昵称.在命令中可以表示你本人或者其他聊天客.#CHANNEL (或#chan) 频道.聊天室房间名字.房间名字前面一定要加 # 符号.服务器机 ...
- JDK1.8中如何用ScriptEngine动态执行JS
JDK1.8中如何用ScriptEngine动态执行JS jdk1.6开始就提供了动态脚本语言诸如JavaScript动态的支持.这无疑是一个很好的功能,毕竟Java的语法不是适合成为动态语言.而JD ...
- nginx给server增加日志配置
error_log /usr/local/nginx/logs/xxx.com.log debug; 放在 server { error_log /usr/local/nginx/logs/xxx.c ...