jQuery操作css,class,属性,dom,dom动画

一、jQuery操作css样式
  1、jq对象.css(样式名,样式值)
  2、jq对象.css({样式名:样式值,样式名:样式值,....})
  3、获取css样式

二、jQuery操作class属性
  1、添加类:jq对象.addClass(类名):追加
  2、移除类:jq对象.removeClass(类名):移除指定类
  3、判断一个类是不是存在:jq对象.hasClass(类名):返回true和false
  4、判断类是不是存在如果存在则删除,反正添加:jq对象.toggleClass(类名)

三、jQuery操作属性操作:attr
  1、设置属性:
    jq对象.attr(属性名,属性值);
    jq对象.attr({属性名:属性值,属性名:属性值,....})
  2、获取属性:jq对象.attr(属性名);
    注意对于布尔类型的属性值,应使用jq对象.prop(),当没设置值时返回false,attr返回undefined

四、jQuery动画
  1、三组基本动画
    a、显示隐藏:show([时间],[回调函数]),hide([时间],[回调函数]),
    b、划入画出:slideDoem([时间],[回调函数]),slideUp([时间],[回调函数]), 切换:slideToggle([时间],[回调函数]),
    c、淡入淡出:fadeIn([时间],[回调函数]),fadeOut([时间],[回调函数]),fadeToggle([时间],[回调函数])
  2、自定义动画:animate({})
    第一个参数:对象,里面可以传需要动画的样式
    第二个参数:动画的执行时间
    第三个参数:动画的执行效果
      a、默认'swing'越来越快
      b、'linear'匀速前进
    第四个参数:回调函数
    注意:第一个参数必填,使用前将元素设置CSS定位

    解决动画队列用jq对象.stop();用在animate()方法前。

    停止动画:stop()只停止当前动画队列的当前执行的动画

    第一个参数:clearQueue:是否清楚动画队列(true,false)
    第二个参数:jumpToEnd:是否跳转到当前动画的最终效果(true,false)

五、jQuery节点操作
  1、创建节点
    jq对象.append('<div></div>')
  2、添加节点
    jq对象.append(变量or对象):添加到子元素的最后面
    jq对象.prepend(变量or对象):添加到当前元素的前面
    jq对象.appengTo(变量or对象):把当前元素添加到变量or对象的里面
    jq对象.prependTo(变量or对象):把当前元素添加到变量or对象的前面
    jq对象.after(变量or对象):把当前元素添加到变量or对象后,做兄弟元素
    jq对象.before(变量or对象):把当前元素添加到变量or对象前,做兄弟元素
  3、清空节点
    jq对象.empty():清空当前对象里的所有子元素
    jq对象.remove():删除当前元素
  4、克隆节点
    jq对象.clone():克隆元素 :有一个布尔类型的参数:当为false时不会赋值方法,当为true时则赋值方法

注意:jQuery隐式迭代:
设置操作的时候:会给jq内部所有对象都设置上相同的值
获取的时候:智慧返回第一个元素对应的值

 

posted @ 2019-09-04 16:06  养一只Tom猫  阅读(495)  评论(0编辑  收藏  举报