jQuery

 

2022-05-17

约定

  • jQuery 对象变量前加 $

元素

  • 查找
  • 执行
    • .val()：匹配第一个值 #方法

Events 事件

  • Event Object 事件对象
    • event.preventDefault()：阻止元素发生默认的行为
    • event.target：返回那个 DOM 元素触发了事件
    • event.currentTarget：当前 DOM 元素（通常等同于 this）
    • event.type：返回事件类型
  • 加载
    • reqdy()：页面完全加载时
  • 鼠标：mouse
    • click：点击事件
  • 表单：form
    • change：元素值发生变化时 #select #textarea #text

示例

事件绑定写法

1
  以 click 为例
2
  // 方法一：on
3
  $("#test").on("click", function() {
4
    alert('点击')
5
  })
6


7
  // 方法二
8
  $("#test").click(function() {
9
    alert('点击')
10
  })
11


12
  // 方法三：bind（3.0 已启用）
13
  $("#test").bind("click", function() {
14
    alert('点击')
15
  })

加载渲染后的 HTML 代码片段

1
  $.ajax({
2
    url: url,
3
    type: 'GET',
4
    dataType: 'html',
5
    async: false,
6
    success: function (data) {
7
      $('#id').append(data); // 添加到节点
8
    }
9
  })

checkbox 全选/反选

获取选中 rodio

1
$('input:radio:checked').val()；
2


3
$("input[type='radio']:checked").val();
4


5
$("input[name='rd']:checked").val();

参考

属性

  • .data
    • $(#myID).data(<name>)：获取指定 data 属性值
    • $(#myID).data(<name>, <value>)：设置指定 data 属性值 这个方法修改后源代码看不到变化，可改用 attr 修改attr(data-<name>, value)

筛选

  • 查找
    • .find()：从当前元素向下查找，返回匹配 ？
    • .children()：向下遍历一层级
    • .closest：从当前元素向上遍历，返回匹配的第一个祖元素
    • .parents()：从父元素向上遍历，返回匹配的所有祖元素
    • .parent()：返回父元素
    • .prev() ：返回父节点的同级元素

siblings

1
img_this.parent().siblings('.review-tags').html(`<span class="bg-green-100 text-green-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-900">${tag_name}</span>`)

问题

  • event.currentTarget 使用 .closest 后无法再次使用 .find() 等方法查找
1
// 问题场景：Bootstrap-Table button 事件
2
// 报错 .find is not a function
3
e.target.closest(".test").find('title')
4
// 正常
5
$(e.target).closest(".test").find('title')

说明

  • $("#id")和 document.getElementById("id") 的区别
    • **$(“#id”)**返回的是 jQuery 对象：[object Object]
      • $("#id")[0]或$("#id").get(0)也可以返回 DOM 对象，但有区别
    • **document.getElementById(“id”)**返回的是 DOM 对象：[object HTMLDivElement]
  • jQuery 对象和 DOM 对象互转
    • jQuery 转 DOM：$("#id")[0]或$("#id").get(0)(抽取 jQuery 集合的一项)
    • DOM 转 jQuery：$(document.getElementById("id"))（使用$()包裹 DOM）
# JS
# JavaScript
# Web
# jQuery