jQuery-CSS和事件处理

jQuery-CSS和事件处理

1. CSS样式操作

   —读取CSS样式语法：css('样式名字符串')

   —设置CSS样式语法：css('样式名字符串','设置的样式字符串')

   —另外css()里面传递的参数可以为一个封装所有设置样式的对象；例如：

   <script>
   	$('p:eq(1)').css({
        color:'red',
        background:'blue',
        width:300,
        height:100
    })
   </script>
   

2. 元素位置

   —offset()：获取匹配元素在当前视口的相对偏移；返回对象包含两个属性，top和left；此方法只对可见元素有效；可以传递包含两个属性的参数对象，进行偏移量设置:

   $('div').offset({left:50,top:100})

   —position()：获取匹配元素相对于父元素的相对偏移；返回对象包含两个属性，top和left；只可读取，不可传递对象；

   —scrollTop：读取/设置滚动条的垂直坐标；scrollLeft：读取/设置滚动条的水平坐标；

   —读取web页面滚动条的垂直坐标(兼容chrome和IE浏览器)：$(document.body).scrollTop()+$(document.documentElement).scrollTop();

   —设置web页面滚动到指定位置：$('html,body').scrollTop(300);

3. 元素尺寸

   —width()和height()：内容区尺寸width/height；

   —innerHeight()和innerWidth()：包含padding的内部尺寸，即heigth/width+padding；

   —outerHeight(false/true)和outerWidth(false/true)：外部尺寸，heigth/width+padding+border；如果传递参数为true，则需要加上margin；

4. jQuery对象的筛选

   筛选是针对于jQuery对象的，包括过滤和查找；一般再进行筛选的过程中，尽量先找id选择器，这样效率较高；

   过滤

   —在原有jQuery对象中的元素对象数组中过滤出一部分dom元素；过滤返回的都是jQuery对象，可以进行方法操作；

   —相关语法：

   1. first()：返回第一个元素jQuery对象；

   2. last()：返回最后一个元素jQuery对象；

   3. eq(index|-index)：返回元素中其中一个元素jQuery对象；

      以上三个都是根据下标过滤；

   4. filter(selector)：返回特定选择器下的元素jQuery对象；该语法是针对当前DOM元素集合提出条件；

   5. not(selector)：返回除去特定选择器外的元素jQuery对象；例如选择title属性值不为hello的元素：

      $('ul>li').not('[title=hello]')或者$('ul>li').filter('[title!=hello]').filter('[title]')

   6. has(selector)：返回含有特定选择器的元素jQuery对象；而这个语法是针对当前DOM元素的子孙元素提出条件；

      以上三个都是根据选择器进行过滤；

   查找

   —在已经匹配出的原有的dom元素集合(jQuery对象)中根据选择器查找子孙/父母/兄弟元素；

   1. children(selector)：查找子元素；
   2. find(selector)：查找后代元素；
   3. parent()：查找父元素；
   4. prevAll(selector)：查找前面selsctor所有的兄弟元素；
   5. nextAll(selector)：查找后面所有的兄弟元素；
   6. siblings(selector)：查找前后所有的兄弟元素；

5. 文档处理-增删改

   1. 增加/替换元素

      内部插入：

      —append(content)：向当前匹配的所有元素内部的最后插入指定内容（标签体内容）；同样appendTo()也可以实现：

      $('<span>添加的span标签</span>').appendto($('ul'))

      —prepend(content)：向当前匹配的所有元素内部的最前面插入指定内容；同样prependTo()也可以实现

      外部插入：

      —before(content)：将指定内容插入到当前所有匹配元素的前面；

      —after(content)：将指定内容插入到当前所有匹配元素的后面；

      替换

      —replaceWith(content)：用指定内容替换所有匹配的元素；

      —replaceAll(selector)：用于替换指定选择器；

   2. 删除元素

      —empty()：删除所有匹配元素的子元素；只删除内部子孙元素；

      —remove()：删除所有匹配的元素；删除自己及内部子孙元素；

6. jQuerty事件处理

   事件绑定

   1. eventName(function(){})：绑定对应事件名的监听，例如：$('div').click(function(){});
   2. on(eventName,function(){})：通用的绑定事件监听，例如：$('div').on('click',function(){})
   3. 优缺点：第一种编码方便，且有的事件监听不支持；第二种编码不方便，可以添加多个监听，且更通用；
   4. 常用的事件：click、mouseenter/mouseleave、mouseover/mouseout、focus/blur(获取/失去焦点)；

   事件解绑

   off(eventName)：移除一个或者多个事件的事件处理函数；

   事件坐标

   1. event.clientX，event.clientY：相对于视口的左上角；
   2. event.pageX，event.pageY：相对于页面的左上角；
   3. event.offsetX，event.offsetY：相对于当前事件元素的左上角；

   事件的相关处理

   1. 停止事件冒泡：event.stopPropagation()
   2. 阻止事件默认行为：event.preventDefault()

   事件面试题

   1. 区别mouseover和mouseenter

      —mouseover：在移入子元素时也会触发，对应mouseout；

      —mouseenter：只有在移入当前元素时才会触发，对应mouseleave；

      —两者只有在含有子元素下才会有区别；

      —hover()使用的就是mouseenter()和mouseleave()；

   2. 区别on('eventName',fun)和eventName(fun)

      —on('eventName',fun)：通用，支持动态绑定，但编码麻烦；

      —eventName(fun)：编码简单，只支持静态绑定，但有的事件没有对应的方法；

7. 事件委托

   1. 事件委托(委派/代理)

      —将多个子元素的事件监听委托给父辈元素处理；

      —监听回调加在父辈元素上；

      —当操作任何一个子元素时，事件会冒泡到父辈元素；

      —最终子元素调用事件回调函数；父元素不会直接处理事件，而是根据event.target得到发生事件的子元素；

   2. 设置和移除事件委托

      —设置事件委托：$(parentSelector).delegate(childrenSelector,eventName,callback)这里的回调函数中的this指向绑定事件子元素

      —移除事件委托：$(parentSelector).undelegate(eventName)

   3. 事件委派的好处

      —添加新的子元素，自动增加事件监听，事件会自动响应处理；

      —减少事件监听数量，由n个变为1个（绑定给父元素的监听）；

   4. 举例：

      <script>
      	$('u1').delegate('li','click',function(){
              this.style.background = 'red'
          })
      </script>