tnblog
首页

思宇课后实例—全选和部分选中

105人阅读 2019/3/24 22:43 评论:2 手机浏览 收藏
分类: .net


    jQuery课后实例


    昨天我们初次写了全(不)选和反选功能,今天我们来写下它的变种功能


    1.首先我们老规矩,来看下需求


    


    2.然后我们继续来看下HTML代码


    

    

    


    3.然后我们开始理性的分析一波,事实的真相只有一个


            我们在不改变HTNL的源码基础下,分析一下,三个功能大项,他们的class属性都为parentfunc,我们给classparentfunc的元素添加一

    个单击事件,再添加各大项后面所有小项的选中和取消选中的功能,就可以实现1.2两个需求了。可是三个大项的class相同,我们如何保证中某一

    个大项,它后面的小项被选中或者取消选中,其他项不会改变呢?

            在这里我们就要了解子节点,父节点,祖父节点的知识了!直接上图:


    

    

        我们点击了大项的复选框,它后面的小项要被选中。我们看HTML代码会发现,三个大项与其后面的小项位置关系是相同的,我们借此实现功

    能。复选框的<input>标签的父节点是<span>,<td><span>的父节点,我们在找到<td>的兄弟节点下面的后代元素,再设置属性就OK啦!

    如图:


    


    


    效果很奈斯一步到位!


    4.后面我们来完成取消选中的功能,与选中类似。只需把checked的属性设置为false


    


    其实我们结合之前的知识可以简化代码,依旧使用is()方法


    


    这样可以一步到位,实现1.2两点需求,奈斯!


    5.后面的功能就很容易实现啦,我们一起来


        


    因为这里大项也是复选框,我就用$("input[type='checkbox']:not(.parentfunc)")代替$("input[type='checkbox']"),以提高效率


    效果如图:

        

    


    补充:在后面的学习中,我学习到了更简单的方法,可以一步解决3.4点功能,我们一起来看下吧


        思路:我们在这里的思想是循环判断所以小项的复选框是否中,代码就比较多,这也是比较常规的操作,我们一起来学习别人的好思路。我们

可以拿到当前点击小项的所以小项的个数,我们在判断下小项的总个数是否相等于我们选中的小项个数,是则为全选,具体代码如下:


    


    这次功能的实现再加上以前的内容,像这种选中的功能就可以很容易的实现啦!快去试一试吧!


    注意:在实现这次功能的时候,遇到了一个小坑parent()parents()


        parent()是找该元素的父元素,我就天真的以为parents()就是其的祖父元素,没想到,还是我太年轻了


        直接上图:


        


        

    


    很明显我们可以看出来parent()是找该元素的父节点<span>


      我们在试试parents()方法:

        

    


    喔豁,竟然全红了,这不是我要的结果啊!我再试试


    


    父亲的父亲为祖父,没想到还真的是这样,后面我去了下资料才知道:


  • parent(selector) 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。

  • parents(selector) 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。

    parents()是找得祖先元素,那就有父亲,祖父,祖祖父....... 难怪会全红了,笑哭


    补充:开始我们找祖父元素的时候用的是.parent().parent(),在后面的学习中我了解到用.parents()方法会更加的简单,例如,这次功能中,我们

找小项的祖父元素就可用.parents("td"),.parents()找的是祖先元素,我们就可以规定祖先元素的类型,从而找到特定的祖先,这样找辈分更高的祖

先不是更简单了吗?而且也不.parent一个个找了,简化代码。而且因为我们这里用到了兄弟元素,其实是不太恰当的,如果<td>有多个兄弟元素,

那特定的元素就不太好找,我们这里可以用.next()和.prev向下查或 向上查找特定元素更加的合理规范。


    我们定它个小目标,每天写个小功能,加油了,啦啦啦!


    


评价
做个有趣的人!
文章
6
评论
8
分类
16
关注
16
{{item.ArticleTitle}}
{{item.BlogName}} : {{item.Content}}