前端记录4（定时器，JQ）

• 定时器：

  • setTimeout 只执行一次的定时器
  • clearTimeout 关闭只执行一次的定时器
  • setInterval 反复执行的定时器
  • clearInterval 关闭反复执行的定时器
  • var r = setTimeout(x,1000) x为定时要执行的函数，1000为毫米 clearTimeout(r) 关闭该定时器

• JQuery

  • JQ是js的一个库
  • 需要导入：
  • 在头部写JQ的加载：
  • 简写：
  • 选择器：
    • $('#myId') 选择id为myId的网页元素
    • $('.myClass') 选择class为myClass的元素
    • $('li') 选择所有的li元素
    • $('#ul1 li span') 选择id为为ul1元素下的所有li下的span元素
    • $('input[name=first]') 选择name属性等于first的input元素
  • 对选择集进行过滤
    • $('div').has('p'); 选择包含p元素的div元素
    • $('div').eq(5); 选择第6个div元素
  • 选择集转移
    • $('#box').prev(); //选择id是box的元素前面紧挨的哥哥元素
    • $('#box').prevAll(); //选择id是box的元素之前所有的哥哥元素
    • $('#box').next(); //选择id是box的元素后面紧挨的弟弟元素
    • $('#box').nextAll(); //选择id是box的元素后面所有的弟弟元素
    • $('#box').parent(); //选择id是box的元素的父元素
    • $('#box').children(); //选择id是box的元素的所有子元素
    • $('#box').siblings(); //选择id是box的元素的兄弟元素
    • $('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素
  • 操作样式：
    • 获取样式：
      $('div').css('width')
    • 设置样式：
      $('div').css({'width':'100px','color':'red'})
    • 操作样式类名：
      $("#div1").addClass("divClass2") 为id为div1的对象追加样式divClass2
      $("#div1").removeClass("divClass") 移除id为div1的对象的class名为divClass的样式
      $("#div1").removeClass("divClass divClass2") 移除多个样式
      $("#div1").toggleClass("anotherClass") 重复切换anotherClass样式
    • 绑定click事件：
      $('#btn1').click(function(){
      })
  • 动画animate：
    • animate参数：
      参数一：要改变的样式属性值，写成字典的形式
      参数二：动画持续的时间，单位为毫秒，一般不写单位
      参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
      参数四：动画回调函数，动画完成后执行的匿名函数
    • $('#div1').animate({
      width:300,
      height:300
      },1000,'swing',function(){
      alert('done!');
      });