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

posted @ 2013-07-31 23:37  点点星痕  阅读(379)  评论(0编辑  收藏  举报