jQuery小例子

页面导航:首页 > 网络编程 > JavaScript > jQuery小例子

jQuery小例子

来源: 作者: 时间:2016-02-20 09:49 【

使用前,请先引用jquery1,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, 4
使用前,请先引用jquery
 
1,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;
});
复制代码
2,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);
复制代码
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="' + 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="按钮" />').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 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>
复制代码
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="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>
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<