jQuery小例子

valiant1882331

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

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);
View Code

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\', \'\');
            });

        });
View Code

4,jquery版的星星评分控件

  <script type="text/javascript">

        $(function () {
            $(\'#tb td\').mouseover(function () {

                $(this).text(\'★\').prevAll().text(\'★\'); //.end().nextAll().text(\'☆\');
            }).mouseout(function () {
                $(\'#tb td\').text(\'☆\');
            });

        });
    
    </script>
View Code

5,jquery为元素添加样式,去除样式,切换样式

 //为某元素添加一个类样式
// $(\'div\').addClass(\'cls cls1\');
 //移除一个类样式
// $(\'div\').removeClass(\'cls\');
//判断这个元素是否应用了这个类样式
//$(\'div\').hasClass(\'cls\');
// $(\'body\').toggleClass(\'cls\');//切换该类样式
View Code

6,jquery索引选择器

//索引为2的那个变了
//$(\'p:eq(2)\').css(\'backgroundColor\',\'red\');
//索引小于2的元素
// $(\'p:lt(2)\').css(\'backgroundColor\', \'red\');
//索引大于2的
//$(\'p:gt(2)\').css(\'backgroundColor\', \'red\');
View Code

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\');
            });
        });
View Code

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\');
View Code

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\'));
            });
        });
View Code

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>
View Code

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>
View Code

 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>
View Code

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>
View Code

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>
View Code

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>
View Code

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>
View Code

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>
View Code

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>
View Code

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>
View Code

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>
View Code

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>
View Code

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>
View Code

23,jquery图片跟随鼠标移动

    <script type="text/javascript">
        $(function () {

            $(document).mousemove(function (e) {
                $(\'img\').css({ "position": "absolute", "left": e.pageX,"top":e.pageY });
            });
           
        });
    
    </script>
View Code

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>
View Code

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; width: 300px; height: 200px">
    </div>
</body>
</html>
View Code

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>
View Code

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode