jQuery学习(第二天)

show和hide的作用

jQuery学习(第二天)_第1张图片
image.png

点击显示


jQuery学习(第二天)_第2张图片
image.png

点击隐藏


jQuery学习(第二天)_第3张图片
image.png
  • 注意 show与hide可传三种参数
      1. 数字 表示多久之后显示
      1. 字符串 给定的 (slow 慢 normal 正常 fast 快)
      1. function函数

jQuery的动画效果(用法同show)

    1. 上拉(slideDown)
    1. 下拉(slideUp)
    1. 上下拉切换(slideToggle)
    1. 淡入(fadeIn)
    1. 淡出(fadeOut)
    1. 淡入出切换(fadeToggle)
    1. 自定义(animate)(里面传两个参数 第一个是你自己定义的可以是函数 第二个是时间)

stop(停止 让谁停止就在谁的接口里书写)

可以传输两个参数 为true和 false
首先默认值是false
可以单独传一个参数 也可以 同时传输两个参数

tab切换

jQuery学习(第二天)_第4张图片
image.png
  

DOM操作

  • 设置属性
  • 获取属性
  • 设置值
  • 获取值
  • 设置html



    jQuery学习(第二天)_第5张图片
    image.png

    举例如下:


    jQuery学习(第二天)_第6张图片
    image.png

追加节点(一般不用建议使用.html()的方式)

  • append
  • appendTo(把谁追加到谁)


    jQuery学习(第二天)_第7张图片
    image.png
  • prepend(向前追加)
  • prependTo(把谁追加到谁的前面)


    jQuery学习(第二天)_第8张图片
    image.png

    jQuery学习(第二天)_第9张图片
    image.png

    jQuery学习(第二天)_第10张图片
    image.png

图片导航

jQuery学习(第二天)_第11张图片
image.png

效果:


jQuery学习(第二天)_第12张图片
image.png

综合

在css样式中$("li").css(“”,"")表示给元素(li)设置样式,$("li").css(“”)表示获取选定元素(li)的样式
给选定元素添加类样式 首先定义好类样式的属性,然后在script中书写$("li").addClass("divItem") ;
注意:样式名字没有点(.

你可能感兴趣的:(jQuery学习(第二天))