jQuery小例子
map遍历数组
//=========for循环遍历==========
var arr[1,2,3,4,5];
for(var i=0;i<=arr.length;i++)
{
arr[i]=arr+1;
}
//对数组中的每个元素加1
var scores = [10, 20, 30, 40, 50];
var newScore = [];
for (var i = 0; i < scores.length; i++) {
newScore[newScore.length] = scores[i] + 1;
}
//=========map遍历============
$.map(arr,function(ele,index))
{//ele代表元素,index代表索引
alert(ele+'====='+index);
});
//对数组中索引大于3的元素翻倍
var arr = [1, 2, 4,2,3,4,5,6,5];
arr = $.map(arr, function (ele, index) {
return index > 3 ? ele * 2 : ele;
});
jQuery对象与DOM对象才做元素和互转
//dom 操作
var dvObj = document.getElementById('dv');
dvObj.style.border = '1px solid red';
dvObj.style.width = '300px';
dvObj.style.height = '200px';
//dom转jQuery
var dvj=$(dvObj);
dvj.css('backgroundColor', 'yellow').css('width', '500px').css('height', '300px').css('border', '1px solid blue');
//jquery转dom
var dvooo=dvj[0]//.get(0);
prevall与nextall
//页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红，当点击某个li的时候，让该li之前的所有li背景色变黄，之后的所有li背景色变蓝。自己不变色。
$(function () { $('#u1 li').mouseover(function () { $(this).css('backgroundColor', 'red');
}).click(function () {
// $(this).prevAll().css('backgroundColor', 'yellow');
//$(this).nextAll().css('backgroundColor', 'blue');
//断链--end()修复断链
$(this).prevAll().css('backgroundColor', 'yellow').end().nextAll().css('backgroundColor', 'blue');
}).mouseout(function () {
$(this).css('backgroundColor', '');
}); });
jquery版的星星评分控件
<script type="text/javascript">
$(function () {
$('#tb td').mouseover(function () {
$(this).text('★').prevAll().text('★'); //.end().nextAll().text('☆');
}).mouseout(function () {
$('#tb td').text('☆');
});
});
</script>
jquery为元素添加样式,去除样式,切换样式
//为某元素添加一个类样式
// $('div').addClass('cls cls1');
//移除一个类样式
// $('div').removeClass('cls');
//判断这个元素是否应用了这个类样式
//$('div').hasClass('cls');
// $('body').toggleClass('cls');//切换该类样式
jquery索引选择器
//索引为2的那个变了
//$('p:eq(2)').css('backgroundColor','red');
//索引小于2的元素
// $('p:lt(2)').css('backgroundColor', 'red');
//索引大于2的
//$('p:gt(2)').css('backgroundColor', 'red');
siblings与even与odd
$(function () {
$('table tr').click(function () {
//除此之外,其他的所有td
$('td', $(this).siblings()).css('backgroundColor','');
//偶数行的td
$('td:even', $(this)).css('backgroundColor', 'red');
//奇数行的td
$('td:odd', $(this)).css('backgroundColor', 'blue');
});
});
属性过滤器
//获取层中所有有name属性的input标签元素
//$('#dv input[name]').css('backgroundColor','blue');
//获取层中所有有name属性别且属性值为name的input标签
//$('#dv input[name=name]').css('backgroundColor', 'blue');
//获取层中所有有name属性但是值不是name的input标签
//$('#dv input[name!=name]').css('backgroundColor', 'blue');
//相当于以name开头的name属性值
//$('#dv input[name^=name]').css('backgroundColor', 'blue');
//以name结尾的
//$('#dv input[name$=name]').css('backgroundColor', 'blue');
//name属性值中只要有name就可以
//$('#dv input[name*=name]').css('backgroundColor', 'blue');
动态创建表格
<script type="text/javascript">
$(function () {
var dic = { "百度": "http://www.baidu.com", "谷歌": "http://www.google.com" };
//创建一个表格
var tb = $('<table border="1"></table>');
for (var key in dic) {
var trObj = $('<tr><td>' + key + '</td><td><a href="' + dic[key] + '">' + key + '</a></td></tr>'); //.appendTo(tb);
tb.append(trObj);
}
$('body').append(tb);
});
</script>
创建层,层中添加元素
<script type="text/javascript">
$(function () {
//创建层按钮
$('#btn').click(function () {
$('<div id="dv"></div>').css({ "width": "300px", "height": "200px", "backgroundColor": "red", "cursor": "pointer" }).appendTo($('body'));
});
//创建层中元素,按钮
$('#btnadd').click(function () {
$('<input type="button" name="name" value="按钮" />').appendTo($('#dv'));
});
//清除元素
$('#btnemp').click(function () {
//清空层中所有子元素
$('#dv').empty();
//层没了
//$('#dv').remove();
});
});
</script>
jquery权限管理,左右移动
<script type="text/javascript">
$(function () {
$('#toAllLeft').click(function () {
$('#se1 option').appendTo($('#se2'));
});
$('#toAllRight').click(function () {
$('#se2 option').appendTo($('#se1'));
});
$('#toRight').click(function () {
$('#se1 option:selected').appendTo($('#se2'));
});
$('#toLeft').click(function () {
$('#se2 option:selected').appendTo($('#se1'));
});
});
</script>
jquery版阅读协议倒计时
<script type="text/javascript">
//十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。设置可用性等jQuery未封装方法：attr("")setInterval()
$(function () {
var sec = 5;
var setId = setInterval(function () {
sec--;
if (sec <= 0) {
$('#btn').attr('disabled', false).val('同意');
//清除计时器
clearInterval(setId);
} else {
$('#btn').val('请仔细阅读协议('+sec+')');
}
}, 1000);
});
</script>
removeAttr与unbind
<script type="text/javascript">
//选择球队,两个ul。被悬浮行高亮显示（背景是红色），点击球队将它放到另一个的球队列表。//清除所有事件。.unbind(); $(function () { $('#uu1 li').mouseover(function () {
$(this).css('backgroundColor', 'red').siblings().css('backgroundColor', '');
}).click(function () {
//removeAttr移除了什么属性
//unbind移除事件
$(this).removeAttr('style').unbind().appendTo($('#uu2')); });
});
</script>
节点替换replaceWith与replaceAll
<script type="text/javascript">
$(function () {
$('#btn1').click(function () {
//把br标签替换成hr标签
$('br').replaceWith('<hr color="yellow" />');
});
$('#btn2').click(function () {
//把hr标签替换成br标签
$('<br />').replaceAll('hr');
});
});
</script>
,jquery版全选,反选,全不选
<script type="text/javascript">
$(function () {
$('#btnAll').click(function () {
$(':checkbox').attr('checked', true);
});
$('#btnNo').click(function () {
$(':checkbox').attr('checked', false);
});
$('#btnFan').click(function () {
$(':checkbox').each(function (k, v) {
$(this).attr('checked', !$(this).attr('checked'));
});
});
});
</script>
jquery绑定与解除事件
<script type="text/javascript">
$(function () {
//注册一个点击事件
$('#btn').bind('click', function () {
alert('哈哈');
}).bind('mouseover', function () {
$(this).css('backgroundColor', 'red');
}); $('#btnClear').click(function () {
$('#btn').unbind('click');//写什么就解除什么事件,什么都不写则全部解除
});
});
</script>
合成事件hover与toggle
<script type="text/javascript">
$(function () {
//合成事件
$('#btn').hover(function () {
//相当于鼠标进来和离开
$(this).css('backgroundColor', 'red');
}, function () {
$(this).css('backgroundColor', 'blue');
});
//事件的切换
//这个事件结束,继续下一个事件,所有事件执行后再从头开始
$('#btn').toggle(function () {
alert('1');
}, function () {
alert('2');
}, function () {
alert('3');
}, function () {
alert('4');
});
}); </script>
jquery版事件冒泡阻止
<script type="text/javascript">
$(function () { $('#dv').click(function () {
alert($(this).attr('id'));
});
$('#p1').click(function () {
alert($(this).attr('id'));
});
$('#sp').click(function (e) {
alert($(this).attr('id'));
e.stopPropagation(); //阻止事件冒泡
});
}); </script>
jquery版时间冒泡阻止默认事件
<script type="text/javascript">
$(function () {
$('#btn').click({ "老牛": "公的" }, function (e) {
alert(e.data.老牛);
}); $('a').click(function (e) {
//alert('不去');
//e.preventDefault();
if (!confirm('去不')) {
e.preventDefault(); //阻止默认事件
// e.stopPropagation(); //阻止事件冒泡
}
});
}); </script>
jquery获取键盘键的值和one
<script type="text/javascript">
$(function () {
$('#txt').keydown(function (e) {
alert(e.which); //获取键盘键的值
});
// $('#txt').mousedown(function (e) {
// alert(e.which);//获取鼠标的左右键的值
// });
//只执行一次
$('#btn').one('click',function () {
alert('哈哈');
});
});
</script>
jquery图片跟随鼠标移动
<script type="text/javascript">
$(function () { $(document).mousemove(function (e) {
$('img').css({ "position": "absolute", "left": e.pageX,"top":e.pageY });
}); }); </script>
juqery动画animate
<script type="text/javascript">
$(function () {
$('img').animate({ "left": "50px", "top": "500px" }, 2000).animate({ "width": "80px", "height": "80px", "top": "-=400px", "left": "500px" }, 2000).animate({ "top": "+=450px", "left": "+=450px" }, 3000);
// $('img').animate({ "left": "50px", "top": "500px" }, 2000).animate({"left":"800px","top":"-50px","width":"200px","height":"200px"}, 3000);
});
</script>
juqery动画版显示隐藏层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn1').click(function () {
$('div').slideDown(2000);
});
$('#btn2').click(function () {
$('div').slideUp(2000);
});
$('#btn3').click(function () {
$('div').slideToggle(2000);
});
$('#btn4').click(function () {
$('div').fadeIn(2000);
});
$('#btn5').click(function () {
$('div').fadeOut(2000);
});
$('#btn6').click(function () {
$('div').fadeToggle(2000);
});
}); </script>
</head>
<body>
<input type="button" name="name" value="slideDown" id="btn1" />
<input type="button" name="name" value="slideUp" id="btn2" />
<input type="button" name="name" value="slideToggle" id="btn3" />
<input type="button" name="name" value="fadeIn" id="btn4" />
<input type="button" name="name" value="fadeOut" id="btn5" />
<input type="button" name="name" value="fadeToggle" id="btn6" />
<div style="background-color: Green; width: 300px; height: 200px">
</div>
</body>
</html>
jquery账户记录cookie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var t = $.cookie("name");
if (t!='') {
$('p').text('欢迎'+t+'登录');
}
$('#btn').click(function () {
$.cookie("name", $('#txt').val());
alert('已经记录了');
//帐号
});
}); </script>
</head>
<body>
<p>欢迎游客登录</p>
<input type="text" name="name" value="" id="txt" />
<input type="button" name="name" value="记录" id="btn" />
</body>
</html>
转自：http://www.cnblogs.com/valiant1882331/p/4071709.html
jQuery小例子的更多相关文章
- Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- jQuery小例
jQuery小例子 使用前,请先引用jquery 1,map遍历数组 2,jQuery对象与DOM对象才做元素和互转 3,prevall与nextall 4,jquery版的星星评分控件 5,jq ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- bootstrap 模态 modal 小例子
bootstrap 模态 modal 小例子 <html> <head> <meta charset="utf-8" /> <title ...
- Jquery:小知识；
Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器 上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理 ...
- 【zTree】 zTree使用的 小例子
使用zTree树不是第一次了 但是 还是翻阅着之前做的 对照着 使用起来比较方便 这里就把小例子列出来 总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先 在 ...
- Jquery小东西收集
1. $(document).ready(),$(function(){}),$(window).load(),window.onload的关系与区别 $(document).ready(functi ...
- bootstrap 模态 modal 小例子【转】
bootstrap 模态 modal 小例子 <html> <head> <meta charset="utf-8" /> <title ...
- 一个jquery ajax例子
上次搞了个jquery的AutoComplete效果,感觉很久没写jquery了,趁热打铁,再找点东西练练手.这不,看了一下jquery手册,顺便写了一个小例子,源码我直接贴上来了. 1.新建一个 ...
随机推荐
- mybatis中：returned more than one row, where no more than one was expected.异常
org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.executor.ExecutorEx ...
- MYSQL注入天书之数据库增删改介绍
Background-4 增删改函数介绍 在对数据进行处理上,我们经常用到的是增删查改.接下来我们讲解一下mysql 的增删改.查就是我们上述总用到的select,这里就介绍了. 增加一行数据.Ins ...
- JSP 页面打印
<HTML><HEAD><TITLE>javascript打印-打印页面设置-打印预览代码</TITLE> <META http-equiv=Co ...
- Java日志记录的事儿
一.java日志组件 1.common-logging common-logging是apache提供的一个通用的日志接口.用户可以自由选择第三方的日志组件作为具体实现,像log4j,或者jdk自带的 ...
- HDU 1403 Longest Common Substring（后缀数组，最长公共子串）
hdu题目 poj题目 参考了 罗穗骞的论文<后缀数组——处理字符串的有力工具> 题意:求两个序列的最长公共子串 思路:后缀数组经典题目之一(模版题) //后缀数组sa:将s的n个后缀从小 ...
- SqlServer 常用
Sql的函数 newId() 获得guid: getDatatime() 获得当前时间: Row_number() 分页常用的函数. 比top 好用的函数select Row_Number() ov ...
- lintcode：打劫房屋II
题目 打劫房屋II 在上次打劫完一条街道之后,窃贼又发现了一个新的可以打劫的地方,但这次所有的房子围成了一个圈,这就意味着第一间房子和最后一间房子是挨着的.每个房子都存放着特定金额的钱.你面临的唯一约 ...
- linux下ping加时间戳实时输出到文件 放后台运行
放后台运行命令:setsid 实时输出命令:unbuffer 加时间戳:awk '{ print $0"\t" strftime("%D_%H:%M:%S",s ...
- 在telnet下操作memcache详解（操作命令详解）
这篇文章主要介绍了在telnet下操作memcache详解,telnet下的memcache操作命令详解,需要的朋友可以参考下 在定位问题.测试等时候经常需要对memcache的数据进行一些操作,但是 ...
- JavaPersistenceWithHibernate第二版笔记-第六章-Mapping inheritance-001Hibernate映射继承的方法
There are four different strategies for representing an inheritance hierarchy: Use one table per co ...