问答详情
源自:2-9 jQuery选择器之可见性筛选选择器

这节内容是真难理解,尤其是那个show函数

这节内容是真难理解,尤其是那个show函数,感觉快废了

提问者:可乐要加冰Xx 2017-09-13 20:22

个回答

  • laughing888
    2017-10-17 13:57:19

    <script type="text/javascript">
        	//查找id = div1的DOM元素,是否可见
        	show( $('.div:visible') );
        </script>
    
        <script type="text/javascript">
        	//查找id = div2的DOM元素,是否可见
        	//show( $('#div2:visible') );
        </script>
    
        <script type="text/javascript">
        	//查找id = div3的DOM元素,是否可见
        	//show(  $('#div3:visible')  );
        </script>
    
        <script type="text/javascript">
        	//查找id = div1的DOM元素,是否隐藏
        	//show( $('#div1:hidden') );
        </script>
    
        <script type="text/javascript">
        	//查找id = div2的DOM元素,是否隐藏
        	//show(  $('#div2:hidden') );
        </script>
    
        <script type="text/javascript">
        	//查找id = div3的DOM元素,是否隐藏
        	//show(  $('#div3:hidden') );
        </script>

    可以用如上代码做验证,其实这节讲的就是验证不同情况下元素的:visible或者:hidden,老师给大家分析了几种情况,函数show运行的结果0或者1只是符合条件的元素的个数。例如 枫叶咚咚咚 的分析。所以按照我的代码,可以得出 .div:visible的个数为3。show()括号里面的字符是作为参数传递给show函数的。

  • 枫叶咚咚咚
    2017-09-16 03:33:55

    show()函数的意思
    function show (ele) {
                if (ele instanceof jQuery) {//如果是jQuery元素
                    $("#show").append('元素的长度的 = ' + ele.length) // 显示“元素的长度 = (ele的个数)”
                } else {//如果不是jQuery元素
                    alert(ele+' 不是jQuery对象')
                }
            }
    执行结果:元素的长度的 = 0元素的长度的 = 0元素的长度的 = 1元素的长度的 = 1元素的长度的 = 1元素的长度的 = 0

    为什么结果是这样:

    show( $("#div1:visible") ); //div1的CSS display值为none,所以获取不到visible的元素,结果为0
    show( $("#div2:visible") ); //div2的宽度和高度都显式设置为0 ,所以获取不到visible的元素,结果为0
    show(  $("#div3:visible") ); //div3的visibility: hidden 或 opacity: 0被认为是可见的,因为他们仍然占用空间布局,结果1
    show( $("#div1:hidden") ); // 该元素hidden了,获取到一个hidden元素,结果1
    show($("#div2:hidden") ); // 该元素hidden了,获取到一个hidden元素,结果1
    show( $("#div3:hidden")); // 该元素是visible的,获取不到hidden元素,结果0

  • 落雨季
    2017-09-13 21:33:57

    效果适用于css加了display:none的元素,显示选中元素