0413 jQuery学习

一、jQuery学习——jQuery效果

1.显示和隐藏效果：hide()和show()

    <1> hide()方法:是把指定元素隐藏;

           show()方法:是把指定元素显示出来.

    <2>效果练习：实现jquery动画效果隐藏与显示

●代码如下：

    
    
    
    


 jquery动画效果隐藏与显示



 

●代码实现：

点击“隐藏”和“显示”效果

        点击“隐藏”→→→              点击“显示”↓↓↓

 点击“按钮”效果

点击“按钮”→→→ 再点击“按钮”→→→

    点击“按钮”效果

点击“按钮”→→→ 再点击“按钮”→→→

●语法

 

①$(selector).hide(speed,callback)

②$(selector).show(speed,callback)

③speed参数规定隐藏和显示的速度，取值为“slow”，“fast”，毫秒(1秒等于1000毫秒).

    callback参数是隐藏或显示完成后执行的函数名称

④$(selector).toggle(speed,callback)

2.滑动效果：slide()

    <1> slide()方法：slideUp()方法是把指定元素伸展；slideDown()方法是把指定元素压缩

    <2>效果练习：点击我，滑动显示或者隐藏面板
●代码如下：

    
    
    
    
    


点击我，滑动显示或者隐藏面板
hello

●代码实现：

点击“点击我”↓↓↓

3.用于创建自定义的动画：animate()

    <1>$(selector).animate({params},speed,callback)

           params参数定义形成动画的css属性，可选参数和上面的几个方法相同

    <2>效果练习：animate

    ①通过animate，把

元素向右移动200px

●代码如下：
 

    
    
    
    


开始动画

●代码实现：

  点击“开始动画”→→→    

●注：默认情况下，所有的HTML元素有一个静置的位置，且是不可移动的，如果需要改变，那么需将元素的position属性设置为：absolute，relative，fixed

    ②通过animate，使用相对值

●代码如下：

  点击“开始动画”→→→    

●注：几乎可以用animate()方法来操作所有的css属性，但需要记住，当使用animate()方法的时候，必须使用camel标记法书写所有的属性名，eg:css.background color 在animate中：backgroundColor

    ③通过animate，实现开始动画和暂停动画

●代码如下：

 

●代码实现：

点击“开始动画” ↓↓↓

    点击“暂停动画”     再点击“开始动画”  

4.jQuery---链(Chaining)

通过jQuery，可以把方法链接到一起，Chaining允许我们在一条语句中运行多个jQuery方法(在相同的元素上)

●语法

①$(“#p1”).css({'color':"red"}).slideUp(1500).slideDown(1500).animate({backgroundColor:"bule"},1000)

意思：#p1元素首先会变红，然后向上以1.5秒的速度移动，然后向下以1.5秒的速度移动，最后将背景颜色变为蓝色

②如果不同链，写法是这样的：

      $(“#p1”).css({'color':"red"})

      $(“#p1”).slideUp(1500)

      $(“#p1”).slideDown(1500)

      $(“#p1”).animate({backgroundColor:"bule"},1000)

③通过Chaining的优点：浏览去不用多次去查找相同的优点