• 浅谈JQuery中的一些知识点


    1、用JQuery检查网页上是否有某个对象的方法:

    如何判断对象是否存在,jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象),调用text()、html()、click()之类方法的时候其实是对数组中每个DOM对象迭代调用每个方法,因此即使通过id选择的元素不存在也不会报错,如果需要判断指定的id是否存在,应该写:

    //通过判断$("#btn1")这个集合中对象的个数来判断是否有对象存在(可行)

    if ($("#btn1").length <= 0) {

        do something

    }

    //直接判断是否有DOM对象存在(可行)

    if ($("#btn1")[0]) {

        do something

    }

    //下面的写法是错误的,因为判断的直接是集合

    if($("#btn1")){

    do something

    }

    2、用JQuery实现全选、全不选、反选

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title></title>

        <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

        <script type="text/javascript">

            $(function () {

                $('#allOrNone').click(function () {

                    //点击“选择状态”,实现全选与全不选

                    $(':checkbox').attr('checked', $(this).attr('checked'));

                });

                //当改变了上面选择项的选中状态后,“选择状态”的状态也跟着改变

                $(':checkbox[id!=allOrNone]').click(function () {

                    optionStateChanged();

                  

                });

                //选项改变抽象的方法

                function optionStateChanged() {

                    var state = true;

                    $(':checkbox[id!=allOrNone]').each(function () {

                        if (!$(this).attr('checked')) {

                            state = false;

                            return false;

                            //break;   不可以使用break;

                        }

                    });

                    //如果有一个没有被选中,则将“选择状态”的状态也设置为没有选中状态

                    $('#allOrNone').attr('checked', state);

                }

                //反选

                $('#chooseReverse').click(function () {

                   //进行选项的反选工作

                    $(':checkbox[id!=allOrNone]').each(function () {

                        $(this).attr('checked', !$(this).attr('checked'));

                    });

                   //单独考虑选项改变的操作

                    optionStateChanged();

                });

            });

        </script>

    </head>

    <body>

        <input type="checkbox" value="1" />足球

        <input type="checkbox" value="2" />足球

        <input type="checkbox" value="3" />足球

        <input type="checkbox" value="4" />足球

        <input type="checkbox" value="5" />足球<br />

        <input type="checkbox" name="name" value="" id="allOrNone"/>选择状态

        <input type="button" name="name" value="反选" id="chooseReverse"/>

    </body>

    </html>

  • 相关阅读:
    竞品选择的背后
    小程序UI
    效果CSS实现三角
    pmp心得
    [已读]响应式web设计实践
    [在读]HTML5程序设计(第二版)
    [已读]响应式web设计
    [已读]HTML5与CSS3权威指南第二版(下)
    [已读]编写可维护的javascript
    [未读]JavaScript高效图形编程
  • 原文地址:https://www.cnblogs.com/diandianxinghen/p/3229084.html
Copyright © 2020-2023  润新知