二刷jQuery（以尚硅谷入门）

目录

1.设置css样式

2.位置坐标

3.元素的尺寸

4.筛选模块-过滤

5.筛选模块-查找

6.Dom的增删改（增删div）

7.事件模块

7.1事件绑定与解绑

7.2鼠标移入移出事件

7.3事件委派

7.4事件对象坐标

7.5事件相关

---

1.设置css样式

* style样式
    * css(styleName): 根据样式名得到对应的值
    * css(styleName, value): 设置一个样式
    * css({多个样式对}): 设置多个样式

$('p:eq(1)').css({
    color: '#ff0011',
    background: 'blue',
    width: 300,
    height: 30
  })

2.位置坐标

* 位置坐标
    * offset(): 读/写当前元素坐标(原点是页面左上角)
    * position(): 读当前元素坐标(原点是父元素左上角)
    * scrollTop()/scrollLeft(): 读/写元素/页面的滚动条坐标

整个页面滚动条

获取当前滚动条位置（兼容ie与谷歌）

// console.log($('html').scrollTop()+$('body').scrollTop())
    console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop()) // 兼容IE/Chrome

让滚动条到指定位置

 $('html,body').scrollTop(300)

3.元素的尺寸

1. 内容尺寸
  height(): height
  width(): width
2. 内部尺寸
  innerHeight(): height+padding
  innerWidth(): width+padding
3. 外部尺寸
  outerHeight(false/true): height+padding+border  如果是true, 加上margin
  outerWidth(false/true): width+padding+border 如果是true, 加上margin

4.筛选模块-过滤

* 过滤
    * 在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回，注意返回的还是新的jQuery对象！！！！！！！！

$lis.first().css('background', 'red')
  // $lis[0].style.background = 'red'

    * first()
    * last()
    * eq(index)
    * filter(selector): 对当前元素提要求

//4. ul下li标签中title属性为hello的
  // $lis.filter('[title=hello]').css('background', 'red')

    * not(selector): 对当前元素提要求, 并取反

 //5. ul下li标签中title属性不为hello的
  // $lis.not('[title=hello]').css('background', 'red')
  // $lis.filter('[title!=hello]').filter('[title]').css('background', 'red')

    * has(selector): 对子孙元素提要求

//6. ul下li标签中有span子标签的
  $lis.has('span').css('background', 'red')

5.筛选模块-查找

<!--
在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签
1. children(): 子标签中找
2. find() : 后代标签中找
3. parent() : 父标签
4. prevAll() : 前面所有的兄弟标签
5. nextAll() : 后面所有的兄弟标签
6. siblings() : 前后所有的兄弟标签
-->

  var $ul = $('ul')
  //1. ul标签的第2个span子标签
  //$ul.children('span:eq(1)').css('background', 'red')

  //2. ul标签的第2个span后代标签
  // $ul.find('span:eq(1)').css('background', 'red')

  //3. ul标签的父标签
  // $ul.parent().css('background', 'red')

  //4. id为cc的li标签的前面的所有li标签
  var $li = $('#cc')
  // $li.prevAll('li').css('background', 'red')

  //5. id为cc的li标签的所有兄弟li标签
  $li.siblings('li').css('background', 'red')

6.Dom的增删改（增删div）

1. 添加/替换元素
  * append(content)
    向当前匹配的所有元素内部的最后插入指定内容
  * prepend(content)
    向当前匹配的所有元素内部的最前面插入指定内容
  * before(content)
    将指定内容插入到当前所有匹配元素的前面
  * after(content)
    将指定内容插入到当前所有匹配元素的后面替换节点
  * replaceWith(content)
    用指定内容替换所有匹配的标签删除节点
2. 删除元素
  * empty()
    删除所有匹配元素的子元素
  * remove()
    删除所有匹配的元素

7.事件模块

7.1事件绑定与解绑

1. 事件绑定(2种)：
  * eventName(function(){})
    绑定对应事件名的监听,    例如：$('#div').click(function(){});
  * on(eventName, funcion(){})
    通用的绑定事件监听, 例如：$('#div').on('click', function(){})
  * 优缺点:
    eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
    on: 编码不方便, 可以添加多个监听, 且更通用

 * 常用: click, mouseenter/mouseleave mouseover/mouseout focus/blur
    * hover(function(){}, function(){})

2. 事件解绑：
  * off(eventName)

7.2鼠标移入移出事件

 //2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
  /*
   $('.inner')
   .mouseenter(function () { // 进入
    console.log('进入')
   })
   .mouseleave(function () { // 离开
   console.log('离开')
   })
   */
  /*
   $('.inner')
   .on('mouseover', function () {
   console.log('进入2')
   })
   .on('mouseout', function () {
   console.log('离开2')
   })
   */
  $('.inner').hover(function () {
    console.log('进入3')
  }, function () {
    console.log('离开3')
  })

面试题：

<!--
区别mouseover与mouseenter?
    * mouseover: 在移入子元素时也会触发, 对应mouseout
    * mouseenter: 只在移入当前元素时才触发, 对应mouseleave
                                hover()使用的就是mouseenter()和mouseleave()
区别on('eventName', fun)与eventName(fun)
    * on('eventName', fun): 通用, 但编码麻烦
    * eventName(fun): 编码简单, 但有的事件没有对应的方法
-->

7.3事件委派

 <!--
绑定事件监听的问题: 新加的元素没有监听
-->

<!--
1. 事件委托(委派/代理):
  * 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
  * 监听回调是加在了父辈元素上
  * 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
  * 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
2. 事件委托的2方:
  * 委托方: 业主  li
  * 被委托方: 中介  ul
3. 使用事件委托的好处
  * 添加新的子元素, 自动有事件响应处理
  * 减少事件监听的数量: n==>1
4. jQuery的事件委托API
  * 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
  * 移除事件委托: $(parentSelector).undelegate(eventName)
-->

7.4事件对象坐标

  * 事件坐标
     * event.offsetX: 原点是当前元素左上角，比如单击事件出的offset就是当前单击位置在单击按钮的X坐标
     * event.clientX: 原点是窗口左上角
     * event.pageX: 原点是页面左上角

7.5事件相关

* 事件相关
    * 停止事件冒泡: event.stopPropagation()，比如不想触发父div的单击事件
    * 阻止事件的默认行为: event.preventDefault()，比如取消a标签的超链接跳转页面功能

//7. 点击链接, 如果当前时间是偶数不跳转
  $('#test4').click(function (event) {
    if(Date.now()%2===0) {
      event.preventDefault()
    } 
  })