浅谈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>

原文地址:https://www.cnblogs.com/diandianxinghen/p/3229084.html