JQ二刷

1. JQ操作和原生JS操作

2.选择器

2.1基本选择器

    

        
1
        
2
        
3
        
4
        
5
    
   

2.2后代选择器

  
    

        
two
        
three
        
444
        

            five
            
444
        
    
    
444

   

image.png

2.3 索引选择器

image.png

2.4 显示隐藏效果

    显示/隐藏
    下拉/上拉
    

image.png

2.5 jquery与js对象互相转换

    游泳

注意：JS转JQ的原因是：很多第三方库返回的是JS对象，要继续使JQ的话，就要转；JQ转JS，JQ提供的方法不够用的时候需要转为JS

2.6 tab选项卡切换练习

image.png

     


    

        

            
奔驰
            
宝马
            
奥迪
        
        

            
奔驰内饰好看
            
宝马价格贵
            
奥迪低调
        
    

注意：
index()方法，获取当前元素的下标
eq()方法，根据指定的index获取元素
addClass()方法，给元素添加class
removeClass()方法，给元素去除class
siblings()方法,获取元素的所有兄弟，该方法可以添加一个选择器参数，用于精确的查找兄弟元素

2.7 动态加载一级菜单

image.png

• common.css

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    outline: none;
    font-size: 12px;
}
.flex{
    display: flex;
}
.j_c{
    justify-content: center;
}
.j_s{
    justify-content: space-between;
}
.a_c{
    align-items: center;
}

• menu.json模拟后台API传来的json

 {
    "data":[
        {
            "name":"Web",
            "icon":""
        },
        {
            "name":"Java",
            "icon":""
        },
        {
            "name":"BIG DATA",
            "icon":""
        },
        {
            "name":"CLOUND",
            "icon":""
        },
        {
            "name":"AI",
            "icon":""
        }
    ]
 }

• firstMenuDemo.html

    
    


    

        
课程介绍
    

2.8 动态加载三级导航