前端（jQuery样式操作、特殊效果、动画......）

1、jQuery选择器

    
    
    
    
    


    
这是一个div元素
    
这是第二个div元素
    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
    

---

2、选择器转移

prev()是同级的上一个元素，prevAll()是同级的上面所有的元素
next()是同级的下一个元素，nextAll()是同级的下面所有的元素

    
    
    
    


    
这是一个div元素
    
这是第二个div元素
    
这是一个p元素

    

        

            腾讯网
            span元素
        
    

    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
    

    

        
1
        
2
        
3
        
4
        
5
    

    

        

            腾讯网
        
    

---

3、样式操作

jQuery用同一个函数即可以取值、也可以赋值
            //读取样式
            alert($('#div1').css('fontSize'));//16px
            //设置（写入）样式
            $('#div1').css({background:'gold'});

            //增加行间样式
            $('#div1').addClass('big');
            //减少行间样式，多个样式用空格分开
            $('#div1').removeClass('div2 big');

---

    
    
    
    
    


    
这是一个div元素

---

4、click事件

---

5、jQuery索引值

    
    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
    

---

6、jQuery做选项卡

//失去焦点，避免出现默认的蓝框
                $(this).blur();
                //this是原生的对象
                // alert(this);//弹出[object HTMLInputElement]，说明this就是当前点击的input元素

                //jQuery的this对象使用时要用$()包起来，这样就可以调用jQuery的方法了
                //给当前元素添加选中样式，为兄弟元素移除选中样式
                $(this).addClass('cur').siblings().removeClass('cur');

                //$(this).index()获取当前按钮所在层级范围的索引值
                //显示对应索引的内容区，隐藏其它兄弟内容区
                $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');

---

    
    
    
    
    


    

        
        
        
    
    

        
tab文字内容一
        
tab文字内容二
        
tab文字内容三
    

---

7、属性操作

读写值为布尔类型的属性用prop方法
读写值为非布尔类型的属性用attr方法

    
    
    
    
    


    
这是一个div元素

    

    多选

    

        这是div元素内的span
    

---

8、特殊效果

$('.box').fadeOut();//淡出
$('.box').fadeIn();//淡入
$('.box').fadeToggle();//切换淡入淡出
$('.box').toggle();//切换显示隐藏
$('.box').slideToggle();//切换上收和下展               

---

---

9、jQuery动画

参数：
1、什么属性做动画，属性设置{param1: value1, param2: value2}
2、动画执行的时间，单位毫秒
3、动画曲线：
swing（默认值）开始和结束慢，中间快
linear匀速
可省略不写
4、回调函数，动画完成之后要做的事情，可无限嵌套

---

10、jQuery循环

---

---

小练习

1、层级菜单

    
    
    
    
    


    

        

            水果
            

                
苹果
                
梨子
                
葡萄
                
火龙果
            
        
        

            海鲜
            

                
蛏子
                
扇贝
                
龙虾
                
象拔蚌
            
        
        

            肉类
            

                
内蒙古羊肉
                
进口牛肉
                
野猪肉
                
            
        
        

            蔬菜
            

                
娃娃菜
                
西红柿
                
西芹
                
胡萝卜
            
        
        

            速冻
            

                
冰淇淋
                
湾仔码头
                
海参
                
牛肉丸
            
        
    

image.png

---

2、手风琴

   
   
   
   
   


   

   

       
非洲景色01
       
非洲景色02
       
非洲景色03
       
非洲景色04
       
非洲景色05
   

image.png

---

3、指定菜单

    
    
    
    
    


    
顶部logo
    
置顶菜单
    
    

    

        
网站主内容
        
网站主内容
        
网站主内容
        
网站主内容
        
网站主内容
    
    
    

image.png