几个简单常用的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.平滑滚动到 ...
随机推荐
- 【shell编程】之基础知识-流程控制
和Java.PHP等语言不一样,sh的流程控制不可为空,如(以下为PHP流程控制写法): <?php if (isset($_GET["q"])) { search(q); ...
- 写一个小程序实现win系统定时锁屏
貌似很久没写程序了,随便用C语言实现吧 #include<stdio.h> #include<stdlib.h> int main(){ system("rundll ...
- 诡异的磁盘空间100%报警分析得出df -h与du -sh的根本性差别
前言:早晨磁盘报警刚清空完tomcat和nginx日志,使用的命令是类似echo "" > show_web-error.log或者> show_web-debug.l ...
- div中 li宽度不固定 ie6和ie7不兼容不自动换行
我的li因为内容字数不一样,所以宽度不固定,给他float:left属性后,ie6和ie7不兼容,不自动换行!我给ul或者li: ul{white-space: nowrap} 属性还是不管用..最后 ...
- tomcat中配置https
HTTPS配置中分为单向连接和双向连接,单向连接只需要服务器安装证书,客户端不需要,双向连接需要服务器和客户端都安装证书: 一.Keytool命令: 1.生成密钥对: keytool -genkey ...
- sql server 无法用sql server身份验证
1)首先,用windows身份验证进入服务器. 2)其次找到安全性,点击进入后,找到登录名为sa,然后右击属性. 3)在属性中找到常规,然后检查下自己的账号和密码,并且在状态中将登陆状态改成启用,否则 ...
- mqtt-jmeter
mqtt-jmeter https://github.com/emqtt/mqtt-jmeter mqtt-jmeter MQTT JMeter Plugin, it's used for testi ...
- NET设计模式 第二部分 结构性模式(9)：装饰模式（Decorator Pattern）
装饰模式(Decorator Pattern) ——.NET设计模式系列之十 Terrylee,2006年3月 概述 在软件系统中,有时候我们会使用继承来扩展对象的功能,但是由于继承为类型引入的静态特 ...
- golang database sql DSN (Data Source Name)中的timeout, readTimeout
golang 语言,在打开mysql DB时,有时会用到timeout,readTimeout两个参数. 1.timeout 建立连接超时时间 例如, "30s", "0 ...
- 大数据离线分析平台 JSSDK数据收集引擎编写
JsSDK设计规则在js sdk中我们需要收集launch.pageview.chargeRequest和eventDuration四种数据,所以我们需要在js中写入四个方法来分别收集这些数据,另外我 ...