几个简单常用的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.平滑滚动到 ...
随机推荐
- 通过阻止 touchstart 事件，解决移动端的 BUG
在 iOS10 下,即使设置了 meta 标签的 user-scalable=no 依然不能阻止用户缩放. 解决此 BUG 的方法是阻止 PC 事件: document.addEventListene ...
- Singer 学习十三 发现模式
发现模式 发现模式提供了一种描述tap 支持数据流的方式,使用了json schema 做为描述数据的结构以及每个数据流的 类型,发现模式的实现依赖tap 的数据源,有些taps 将硬编码每个流的模式 ...
- C# Winform 怎么让按钮在Panel里居中显示
把pannel里面的多个按钮的那个anchor属性全部去掉,如下图: 再用VS2010自带的工具调一下即可: 小注: 有的时候我们却想子控件在父控件里的相对位置不要随着父控件的变大缩小而变化,或者控件 ...
- 【LAYABOX】轴心点和锚点
https://blog.csdn.net/RuoYeKnight/article/details/77947288 轴心点和锚点是一个概念,都是基准点,决定了图片在舞台的位置, 简单地说,若对spr ...
- Ajax 异步请求返回集合遍历问题
for(var i = 0;data.length;I++){ var value = data[i]; } 这种遍历,如果方法体没有取值,则页面会卡死,具体原因待解,如果有方法体取值,则所取值val ...
- [转]ConcurrentHashMap原理分析
一.背景: 线程不安全的HashMap 因为多线程环境下,使用Hashmap进行put操作会引起死循环,导致CPU利用率接近100%,所以在并发情况下不能使用HashMap. 效率低下的Has ...
- SSH框架搭建demo
1.新建Java Web工程 2.添加Struts2.1框架支持 去除冲突包:antlr-2.7.2.jar 一般项目加上这三个包足够,后期可以视项目需求增加支持包: 2.1配置web.xml文件 增 ...
- Usbhub驱动编译
在3g 4g的usb驱动基础上,加入以下部分,就可以驱动hub了 kmod-usb-hid 3.3.8-1 kmod-usbip 3.3.8-1 kmod-usbip-client 3.3.8-1 k ...
- 【java】break,continue和return区别
break:适用于switch和loop continue:只适用于loop 两者都可以通过给循环加标签来控制跳出,如下例所示 class BreakDemo { public static void ...
- Ubuntu 14.04 正式版 12.4
安装Ubuntu 14.04后要做的5件事情 4月17日,开源免费系统Ubuntu官方正式宣布发布Ubuntu 14.04 LTS(代号Trusty Tahr)正式版.官方声称该版本主打云计算,在云平 ...