jquery的部分知识点

jquery-笔记4

核心知识点

• jQuery操作元素的尺寸
• jQuery操作元素的位置
• jQuery事件操作（注册、移除、事件委托、触发）

一.jQuery操作元素的尺寸

1.1 width和height方法

操作的大小仅仅是内容部分

• 设置：
  • 语法：jQuery对象.width(数字);
• 获取：
  • 语法：jQuery对象.width();
• 代码：
  // 获取
  var w = $(‘div’).width();
  console.log(w);
  // 设置
  $(‘div’).width(300);

1.2 innerWidth和innerHeight方法

操作的大小是内容部分 + padding

• 设置：
  • 语法：jQuery对象.innerWidth(数字);
• 获取：
  • 语法：jQuery对象.innerWidth();
• 代码：
  // 获取
  var w = $(‘div’).innerWidth();
  console.log(w);
  // 设置
  $(‘div’).innerWidth(300);

1.3 outerWidth和outerHeight方法

操作的大小是内容部分 + padding + border

• 设置：
  • 语法：jQuery对象.outerWidth(数字);
• 获取：
  • 语法：jQuery对象.outerWidth();

•     // 获取
      var w = $('div').outerWidth();
      console.log(w);
      // 设置
      $('div').outerWidth(300);
  

二.jQuery操作元素的位置

2.1 获取元素距离文档的位置

• 语法：jQuery对象.offset(); 返回一个对象，对象中包含了元素的位置
• 注意：
  offset()方法获取的元素的位置，永远参照文档。和定位没有关系
• 代码：
  var o = $(’.s’).offset();
  console.log(o);
  console.log(o.top);

2.2 获取元素距离上级定位元素的位置

• 语法：jQuery对象.position(); 返回的一个对象，对象中包含了元素的位置
• 注意：
  position()方法获取的元素的位置,参照最近的定位元素（和定位有关系）
• 代码：
  var o = $(’.s’).position();
  console.log(o);
  console.log(o.top);

2.3 操作卷去的页面间距

• 获取

  • 语法：jQuery对象.scrollTop(); 返回数字

• 设置

  • 语法：jQuery对象.scrollTop(数字);

• 代码：
  $(‘div’).scroll(function(){
  // 获取被卷起的间距
  var v = $(this).scrollTop();
  console.log(v);
  });

      $('button').click(function(){
        // 设置卷起的间距
        $('div').scrollTop(0);
      });
  

三.jQuery事件操作

3.1 简单方式注册事件

• 语法：jQuery对象.事件名(事件处理程序);

3.2 on方法注册事件

• 注册简单事件语法：jQuery对象.on(‘事件名’,事件处理程序);

• 事件委托的实现：jQuery对象.on(‘事件名’,‘选择器’,事件处理程序);

  • 选择器：子孙元素
  • 注意：在事件处理程序中，this代表的是子孙元素（所点最先触发的）

• 代码：
  // 注册简单的事件
  $(‘button’).on(‘click’,function(){
  alert(1);
  });

      // 【JQ方式实现事件委托-把li委托给ul】
      $('ul').on('click','li',function(){
        // this 是谁？ 当前点击的li
        console.log(this);
        alert($(this).text());
      });
  

3.3 off方法移除事件

• 解绑简单的事件：jQuery对象.off(‘click’,事件处理程序名称)

• 解绑事件委托注册的事件：jQuery对象.off(‘click’,‘选择器’,事件处理程序名称)

• 代码：
  // 解绑按钮的事件处理程序：fn1和fn2
  $(‘button’).off(‘click’,fn1);
  $(‘button’).off(‘click’,fn2);

      // 解绑通过事件委托给p注册的事件处理程序 fn2
      $('div').off('click','p',fn2);
  

3.4 触发事件

• 语法：jQuery对象.trigger(‘事件名’);
• 代码：
  $(‘button’).trigger(‘click’);

3.5 事件对象

如何获取事件对象？

事件处理程序的第一个形参-e

• 鼠标事件对象相关的属性
  • 事件对象.clientX/Y 参照浏览器
  • 事件对象.pageX/Y 参照文档
  • 事件对象.offsetX/Y 参照元素
• 键盘事件对象相关的属性
  • 事件对象.keyCode 返回键码数字
  • 事件对象.alt/shift/ctrlKey 返回是布尔值。 检测是否按下（true）
• 公共的属性或方法
  • 属性
    • 事件对象.target;
  • 方法：
    • 事件对象.preventDefault(); 阻止默认行为
    • 事件对象.stopPropagation(); 阻止事件冒泡