jQuery小例子

使用前,请先引用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 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;  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>