zoukankan      html  css  js  c++  java
  • 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内部所有对象都设置上相同的值
    获取的时候:智慧返回第一个元素对应的值

  • 相关阅读:
    我与计算机
    C高级第四次作业
    C高级第三次作业
    C高级第二次作业
    C高级第一次PTA作业 要求三
    C高级第一次PTA作业
    第0次作业
    # 20182304 实验七 《数据结构与面向对象程序设计》实验报告
    # 20182304 实验八 《数据结构与面向对象程序设计》实验报告
    # 20182304 《数据结构与面向对象程序设计》第八周学习总结
  • 原文地址:https://www.cnblogs.com/yanghaoyu0624/p/11459711.html
Copyright © 2011-2022 走看看