开发之-的基本使用

index.html


    
        js
        
    
    
        
            爷爷级元素
            
                父级元素
                
                    元素
                    
                        子级元素
                        
                            孙子级元素
                        
                    
                
                元素的兄弟元素
            
        
    
    
    

jquery遍历元素

今天我们讲一下jquery的遍历,就是向上遍历,兄弟间遍历以下子级遍历。

父级遍历

$(function(){
    $(\"#brother_id\").parent().css(\"border\",\"2px solid red\"); // 直接父级元素
    // $(\"#brother_id\").parents().css(\"border\",\"2px solid blue\"); // 所有的父级元素
    // $(\"#brother_id\").parents(\".grandpa_class\").css(\"border\",\"2px solid grey\"); // 父级元素中具有grandpa_class进行样式设置
    // $(\".son_class\").parentsUntil(\".grandpa_class\").css(\"border\",\"2px solid black\"); // 父级元素中直到找到具有grandpa_class的之间的所有的父级进行添加样式
});

注:

大家把以上的挨个试一下看下运行的效果。

兄弟遍历

index.html:


    
        js
        
    
    
        
            爷爷级元素
            
                父级元素
                元素的兄弟元素3
                元素的兄弟元素2
                
                    元素
                    
                        子级元素
                        
                            孙子级元素
                        
                    
                
                元素的兄弟元素
                元素的兄弟元素1
            
        
    
    
    

index.js:

$(function(){
    $(\"#brother_id\").siblings().css(\"border\",\"2px solid black\"); // 兄弟元素进行样式设置
    // $(\"#brother_id\").next().css(\"border\",\"2px solid red\"); // brother_id的下一个相邻的兄弟元素进行样式设置
    // $(\"#brother_id\").nextAll().css(\"border\",\"2px solid yellow\"); // brother_id后面的所有的兄弟元素进行样式设置
});
//nextUntil,
// 向上找相邻的元素,prev,prevAll,prevUntil

子级遍历

$(function(){
    $(\".parent_class\").children().css(\"border\",\"2px solid black\"); // .parent_class的直接子元素进行样式设置
    // $(\".parent_class\").children(\".borther_class\").css(\"border\",\"2px solid red\"); // .parent_class 的子级中具有.brother_class进行样式设置
    // $(\".parent_class\").find(\".son_class\").css(\"border\",\"2px solid grey\"); // .parent_class的子级和孙子级中具有.son_class的元素进行样式设置
    // $(\".parent_class\").find(\"*\").css(\"border\",\"2px solid yellow\"); // .parent_class的所有的子级元素进行样式设置
});

以上的实例,大家要试一下看看效果,记起来也好记一些。

PS:如果遇到有关于百科类创建编辑修改的任何问题,欢迎留言咨询,百科参考网无偿免费回答。请注明出处:https://www.2333.org.cn/2333/19313.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注