jQuery ------ 基础（三）——常用 API

jQuery 样式操作

1. 操作 css 方法：

1. 参数只写属性，则是返回属性值。 $(this).css('color')
2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号。 $(this).css('color','red')
3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。 $(this).css({ width:10, backgroundColor:'red' })

2. 设置类样式方法：

1. 添加类：$('div').addClass('current')

点击蓝盒子 变为 红盒子：

	//css 样式
	div{
    
    
        width: 100px;
        height: 100px;
        background-color: lightblue;
    }
    .current{
    
    
        background-color: red;
    }

	// html 标签
	<div></div>
	
	// jquery
    $(function(){
    
    
        // 1.添加类 addClass()
        $('div').click(function(){
    
    
            $(this).addClass('current')
        })
    })

2. 删除类：$('div').removeClass('current')

点击 红盒子 变为 蓝盒子：

	//css 样式
	div{
    
    
        width: 100px;
        height: 100px;
        background-color: lightblue;
    }
    .current{
    
    
        background-color: red;
    }

	// html 标签
	<div class='current'></div>
	
	// jquery
    $(function(){
    
    
        $('div').click(function () {
    
    
        	// 2.删除类 removeClass()
            $(this).removeClass('current')
        })
    })

3. 切换类 $(this).toggleClass('current')

点击旋转360度，并且盒子换颜色：

	//css样式
	div{
    
    
        width: 100px;
        height: 100px;
        background-color: lightblue;
        transition: all 0.5s;
    }
    .current{
    
    
        background-color: red;
        transform: rotate(360deg);
    }
    
    // html
	<div class='current'></div>
	
	//jquery
	$(function(){
    
     
        // 3.切换类 toggleClass()
        $('div').click(function(){
    
    
            $(this).toggleClass('current')
        })
    })

3. 类操作与className区别：

1. 原生JS中 className 会覆盖元素原先里面的类名。
2. jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

jQuery 效果

1. 显示隐藏效果

显示语法：show([speed, [easing], [fn]])
隐藏语法：hide([speed, [easing], [fn]])
切换语法：toggle([speed, [easing], [fn]])

1. speed：速度（slow、normal、fast、自定义xx ms）。
2. easing：切换效果，默认是 swing，可用参数 linear。
3. fn：回调函数，在完成动画时执行的函数，每个元素执行一次。

	// css 样式
	div{
    
    
        width: 100px;
        height: 100px;
        background-color: lightblue;
    }
        
    //html 按钮
	<button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
   
   	//jquery
    <script>
        $(function(){
    
     
            $('button').eq(0).click(function(){
    
    
               $('div').show(1000) 
            })
            $('button').eq(1).click(function(){
    
    
               $('div').hide(1000) 
            })
            $('button').eq(2).click(function(){
    
    
               $('div').toggle(1000) 
            })
        })
    </script>

2. 滑动效果

1. 下滑动：slideDown()
2. 上滑动：slideUp()
3. 滑动切换：slideToggle()

	// css 样式
	div{
    
    
        width: 100px;
        height: 100px;
        background-color: lightblue;
    }
        
    //html 按钮
	<button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
   
   	//jquery
	$(function(){
    
     
        $('button').eq(0).click(function(){
    
    
           $('div').slideDown() 
        })
        $('button').eq(1).click(function(){
    
    
           $('div').slideUp() 
        })
        $('button').eq(2).click(function(){
    
    
           $('div').slideToggle() 
        })
    })

3. 事件切换

hover([over,]out)

1. over：鼠标移到元素上要触发的函数（相当于mouseenter）
2. out：鼠标移出元素要触发的函数（相当于mouseleave）

stop 停止排队，写到动画或效果前面，相当于停止结束上一次的动画。

	$('.nav li').hover)(function(){
    
    
		$(this).childern('ul').stop().slideToggle()
	})

4. 淡入淡出效果

fadeIn()：淡入
fadeOut()：淡出
fadeToggle()：切换

fadeTo()：修改透明度
$('div').fadeTo(1000,0.5) 时间 和 透明度是必选属性

	$('div').click(function(){
    
    
        $(this).stop().fadeTo(1000,0.5)
    })

5. 自定义动画 animate

语法：animate(params,[speed],[easing],[fn])

1. params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采取驼峰命名 borderLeft。

	//css
    div{
    
    
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: red;
    }
	// html
    <button>动起来</button>
    <div></div>
    //jq
    $(function(){
    
     
       $('button').click(function(){
    
    
            $('div').animate({
    
    
                left:100,
                top:100,
                opacity:0.4
            },500)
       })
    })

不积跬步无以至千里 不积小流无以成江海