资讯 安全 论坛 下载 读书 程序开发 数据库 系统 网络 电子书 微信学院 站长学院 QQ 考试
频道栏目
JavaScript| 安全资讯| 安全公告| 病毒预警| 人物| 企业招聘| 其他综合|
登录注册
首页 > 资讯 > JavaScript > 正文

jQuery选择器之层级选择器

17-05-25        来源：[db:作者]  
收藏   我要投稿

jQuery选择器之层级选择器。文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。
子元素 后代元素 兄弟元素 相邻元素





<script src="../../jquery/1.9.1/jquery.js"></script>

子选择器与后代选择器






div下的第一个p元素






div下的第一个p元素











	
div下的article下的p元素









	
div下的article下的p元素







<script type="text/javascript">
        //子选择器
        //$('div > p') 选择所有div元素里面的子元素P
         $('div > p').css("border", "1px groove red");
    </script><script type="text/javascript">
        //后代选择器
        //$('div  p') 选择所有div元素里面的p元素
         $('div > p').css("border", "1px groove red");
    </script>

相邻兄弟选择器与一般兄弟选择器




兄弟节点div, +~选择器不能向前选择

选择器span元素

span后第一个兄弟节点div


兄弟节点div

子元素div



兄弟节点span,不可选

兄弟节点div



<script type="text/javascript">
        //相邻兄弟选择器
        //选取prev后面的第一个的div兄弟节点
        $(".prev + div").css("border", "3px groove blue");
    </script><script type="text/javascript">
        //一般相邻选择器
        //选取prev后面的所有的div兄弟节点
        $(".prev + div").css("border", "3px groove blue");
    </script>

这里写图片描述

                

            

            

            

                
            

            

                
点击复制链接 与好友分享!回本站首页

                

                    
                

            

            
相关TAG标签
            

             

                                  
上一篇：linux 优化参考

                                         
下一篇：Window7上部署Django项目

                            

           
            

                
相关文章

            

            
热门专题推荐
                 vmware
                 win7激活工具
                 win10激活工具
                 excel
                 word
                 office激活
                 小马激活工具
                 重装系统
                 数据恢复
                 u盘启动工具

            

            

                

                    
                    
                

            

            

                
图文推荐

            

            
            

                
                
            

       
        

     
        

            

                
                
            

            

                

                    
文章

                    
推荐

                

                
            

            

                
                
            

            
            

                

                    
热门新闻

                

                

                    

                        
· 锤子坚果Pro发布后，罗永浩哭了

                        
· 想实习的大学党看过来!这些科技巨头最

                        
· 罗永浩锤子发布会抢先消息：锤子科技新

                        
· Google新一代系统Fuchsia OS界面曝光

                        
· 中国唯一连续运营20余年的网络游戏，还

                        
· iPhone都便宜了 为何国产手机越来越贵

                        
· 丢人！谷歌和Facebook竟被虚假企业电邮

                        
· 中国移动支付震惊日本网友 为什么美国

                    

                

            

            

                
                
            

            

                

                    

                        


                        

                    

                

            

            
            

                
                
            

        

    

    

        
        
    

    

    

        

            关于我们 |
            联系我们 |
            广告服务 |
            投资合作 |
            版权申明 |
            在线帮助 |
            网站地图 |
            作品发布 |
            Vip技术培训 |
            举报中心
        

        
版权所有: 红黑联盟--致力于做实用的IT技术学习网站