jQuery-元素操作和事件

系列文章目录

一、元素操作

jQuery对象调用jQuery方法后，返回值还是原来的jQuery的jQuery对象，因此，可以链式调用，即对同一个对象连续调用多个方法。
如：$(选择器).方法1().方法2().方法3()……

在下面的方法中，如果一个方法既能获取值也能设置值。那么，通常有参数代表设置值，无参数或少参数代表获取值。

1. 类属性操作

• .addClass('类名')：添加指定的类名。
• .removeClass('类名')： 移除指定的类名。
• .hasClass('类名')：判断类是否存在。
• .toggleClass('类名')： 切换类名，如果有就移除，如果没有就添加。

2. 样式操作

• .css('样式','值')：设置样式。

位置操作：

• .offset()： 获取匹配元素在当前窗口的相对偏移或设置元素位置。
• .position()： 获取匹配元素相对父元素的偏移。
• .scrollTop(偏移量px)： 获取或设置匹配元素相对滚动条顶部的偏移。
• .scrollLeft(偏移量px)： 获取或设置匹配元素相对滚动条左侧的偏移。

尺寸操作：

• .height()：获取元素内容高度。
• .width()：获取元素内容宽度。
• .innerHeight()：获取元素内容+padding的高度。
• .innerWidth()：获取元素内容+padding的宽度。
• .outerHeight()：获取元素内容+padding+border的高度。
• .outerWidth()：获取元素内容+padding+border的宽度。

文本操作：

• HTML代码：

  • .html()：取得第一个匹配元素的html内容
  • .html(val)：设置所有匹配元素的html内容

• 文本值：

  • .text()：取得所有匹配元素的内容
  • .text(val)：设置所有匹配元素的内容

3. 属性操作

• .val('值')：获取或设置元素的value属性值，常用于input元素。

• .attr('属性名')：获取元素的属性值。

• .attr('属性名','值')：设置元素的属性值。

• .removeAttr('属性名')：移除属性。

• .prop('checked','布尔值')：此方法专门用于checkbox、radio、option等选择框，用来获取或设置它们的选择状态，返回布尔值。

4. 文档处理

• let 变量名= $('<标签名>')：创建标签并保存jquery对象。
• 元素A.append(元素B)：元素B追加到元素A内部的最后面。
• 元素A.appendTo(元素B)：元素A追加到元素B内部的最后面。
• 元素A.prepend(元素B)：元素B追加到元素A内部的最前面。
• 元素A.prependTO(元素B)：元素A追加到元素B内部的最后面。
• 元素A.after(元素B)：元素B放到元素A后面。
• 元素A.before(元素B)：元素B放到元素A前面。
• .remove()：从DOM中删除当前元素。
• .empty()：清空当前元素内部的所有内容。

二、事件

事件已经在js中讲过：传送门。

1. 常用事件

事件	描述
blur	元素失去焦点
change	元素的值改变，该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
click	元素被点击
focus	元素获得焦点
keyup	键盘按键被松开
keydown	键盘按键被按下

更多事件可以参考这里。

2. 绑定事件的方法

• 方法一：

  $(选择器).事件(要执行的动作)
  

• 方法二：

  $(选择器).on('事件',要执行的动作)
  

举例：当input标签获得焦点时，其背景色改变。

$("input").focus(function(){
  $(this).css("background-color","red");
});

this关键字指的是当前被操作的元素对象自己。

3. 阻止标签后续事件的执行

有些元素自带一些事件，比如submit类型的input标签元素，会在按下后发生submit事件。

如果我们不想在点击input时，让submit事件发生，可以采用以下两种方法：

• 方法一：

  $('input').click( function (e) {
      // 这里可以自定义事件触发的动作。。。
      e.preventDefault() 
  })
  

• 方法二：

  $('input').click( function () {
      // 这里可以自定义事件触发的动作。。。
      return false
  })
  

  注意：第二种方法，其实阻止的是后续所有的动作，并不是真正的去阻止自带事件的执行。

4. 事件冒泡

• 事件冒泡：

  当某个元素发生了一个事件时，它会先在自身查找是否绑定了后续动作。如果找到了就执行，如果未找到，就会将事件传递给父元素，父元素再重复上述过程，一直传递到window为止。

• 阻止事件冒泡：

  方法一：

  $('input').click( function () {
      // 这里可以自定义事件触发的动作。。。
      return false
  })
  

  方法二：

  $('input').click( function (e) {
      // 这里可以自定义事件触发的动作。。。
      e.stopPropagation()
  })
  

5. 事件委托

事件委托也叫事件代理，指的是子孙元素的事件绑定，完全交给其上级父元素或祖先元素绑定。它利用的就是事件冒泡的原理，目的是减少事件的绑定，提高性能，减少代码量。

比如，将body内所有的点击事件，委托给button按钮触发：

$('body').on('click','button', function(){
    // 一些代码。。。
})

6. 页面加载

在原生js中，需要在文档完全加载完成后执行的代码，可以绑定在window.onload`事件上。

而在jquery中，上述过程，可以通过下面三种方式完成：

• 方法一：

  $('document').ready(function(){
      // 代码……
  })
  

• 方法二：

  $(function(){
      // 代码……
  })
  

• 方法三：

  将js代码直接写在body内部的最下方，这是最稳妥的方法，而且原生js也可以用。

7. 两个重要方法

• each()方法：
  each()方法提供了一种更加方便的for循环写法，它会将选择的元素，一个个放进后面的函数中执行。

  // 格式一
  $(选择器).each(function(索引,元素对象){})
  
  // 格式二
  $.each('选择器',function(){})
  

• data()方法：

  data()方法可以设置一个键值对，并且该键值对是隐藏的，在文档中看不到的。想要读取，就还得使用data()方法。

  $('选择器').data('属性')  // 获取
  $('选择器').data('属性', '值')  // 设置
  $('选择器').removedata('属性')  // 移除
  

下一篇