首页 > 代码库 > jQuery小例子
jQuery小例子
使用前,请先引用jquery
1,map遍历数组
//=========for循环遍历==========var arr[1,2,3,4,5];for(var i=0;i<=arr.length;i++){ arr[i]=arr+1;}//对数组中的每个元素加1var 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;});
2,jQuery对象与DOM对象才做元素和互转
//dom 操作var dvObj = document.getElementById(‘dv‘);dvObj.style.border = ‘1px solid red‘;dvObj.style.width = ‘300px‘;dvObj.style.height = ‘200px‘;//dom转jQueryvar dvj=$(dvObj);dvj.css(‘backgroundColor‘, ‘yellow‘).css(‘width‘, ‘500px‘).css(‘height‘, ‘300px‘).css(‘border‘, ‘1px solid blue‘);//jquery转domvar dvooo=dvj[0]//.get(0);
3,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‘, ‘‘); }); });
4,jquery版的星星评分控件
<script type="text/javascript"> $(function () { $(‘#tb td‘).mouseover(function () { $(this).text(‘★‘).prevAll().text(‘★‘); //.end().nextAll().text(‘☆‘); }).mouseout(function () { $(‘#tb td‘).text(‘☆‘); }); }); </script>
5,jquery为元素添加样式,去除样式,切换样式
//为某元素添加一个类样式// $(‘div‘).addClass(‘cls cls1‘); //移除一个类样式// $(‘div‘).removeClass(‘cls‘);//判断这个元素是否应用了这个类样式//$(‘div‘).hasClass(‘cls‘);// $(‘body‘).toggleClass(‘cls‘);//切换该类样式
6,jquery索引选择器
//索引为2的那个变了//$(‘p:eq(2)‘).css(‘backgroundColor‘,‘red‘);//索引小于2的元素// $(‘p:lt(2)‘).css(‘backgroundColor‘, ‘red‘);//索引大于2的//$(‘p:gt(2)‘).css(‘backgroundColor‘, ‘red‘);
7,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‘); }); });
8,属性过滤器
//获取层中所有有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‘);
9,动态创建元素
$(function () { $(‘#btn‘).click(function () { // var dvObj = $(‘<div></div>‘); //dvObj.css({"backgroundColor":"red","width":"300px","height":"200px"}); // $(‘body‘).append(dvObj); $(‘<div></div>‘).css({ "backgroundColor": "red", "width": "300px", "height": "200px" }).appendTo($(‘body‘)); }); });
10,动态创建表格
<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="http://www.mamicode.com/‘ + dic[key] + ‘">‘ + key + ‘</a></td></tr>‘); //.appendTo(tb); tb.append(trObj); } $(‘body‘).append(tb); }); </script>
11,创建层,层中添加元素
<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="http://www.mamicode.com/按钮" />‘).appendTo($(‘#dv‘)); }); //清除元素 $(‘#btnemp‘).click(function () { //清空层中所有子元素 $(‘#dv‘).empty(); //层没了 //$(‘#dv‘).remove(); }); }); </script>
12,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>
13,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>
14,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>
15,节点替换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>
16,包裹节点
<script type="text/javascript"> $(function () { $(‘#btn‘).click(function myfunction() { //每个p标签外面有一对font标签 // $(‘p‘).wrap(‘<font color="red" size="7" face="全新硬笔行书简"></font>‘); //所有的p标签外面只有一对font标签 $(‘p‘).wrapAll(‘<font color="red" size="7" face="全新硬笔行书简"></font>‘); //每一对p标签中都有一对font标签 //$(‘p‘).wrapInner(‘<font color="red" size="7" face="全新硬笔行书简"></font>‘); }); }); </script>
17,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>
18,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>
19,合成事件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>
20,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>
21,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>
22,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>
23,jquery图片跟随鼠标移动
<script type="text/javascript"> $(function () { $(document).mousemove(function (e) { $(‘img‘).css({ "position": "absolute", "left": e.pageX,"top":e.pageY }); }); }); </script>
24,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>
25,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="http://www.mamicode.com/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="http://www.mamicode.com/slideDown" id="btn1" /> <input type="button" name="name" value="http://www.mamicode.com/slideUp" id="btn2" /> <input type="button" name="name" value="http://www.mamicode.com/slideToggle" id="btn3" /> <input type="button" name="name" value="http://www.mamicode.com/fadeIn" id="btn4" /> <input type="button" name="name" value="http://www.mamicode.com/fadeOut" id="btn5" /> <input type="button" name="name" value="http://www.mamicode.com/fadeToggle" id="btn6" /> <div style="background-color: Green; width: 300px; height: 200px"> </div></body></html>
26,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="http://www.mamicode.com/jquery-1.8.3.js" type="text/javascript"></script> <script src="http://www.mamicode.com/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="http://www.mamicode.com/记录" id="btn" /></body></html>
jQuery小例子
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。