jQuery中不带选择器的$符号语法含义、适用场景及使用方法问询

两种语法的核心含义 #

你常用的$(selector).action()属于jQuery实例方法：调用$()传入选择器时，会先构造一个包含匹配DOM元素的jQuery对象实例，后续的action都是针对这批匹配到的DOM元素执行的。
而$.ajax、$.widget这类写法属于jQuery静态方法/全局方法：它们直接挂载在jQuery根对象（也就是$这个别名本身）上，不需要依赖具体的DOM元素集合，也不用构造jQuery实例就可以直接调用。

适用场景和使用区别 #

• 当你需要操作具体DOM元素（比如修改样式、绑定事件、读写元素内容）时，使用带选择器的实例语法，示例：

  // 隐藏所有class为box的元素
  $('.box').hide()
  

• 当你需要使用jQuery提供的通用工具能力，和具体DOM无关时，使用静态方法语法，常见场景包括：
  • 发送网络请求：调用$.ajax()、$.get()、$.post()等方法处理HTTP请求，示例：

    $.post('/api/submit', {name: 'test'}, function(res) {
      console.log('提交成功', res)
    })
    

  • 通用工具调用：比如$.each()遍历数组/对象、$.trim()去除字符串首尾空格、$.extend()合并对象等，纯工具逻辑不需要关联DOM
  • 框架扩展操作：比如你提到的$.widget()是jQuery UI用于注册自定义组件的方法，还有$.extend()用来新增自定义静态方法、$.fn.extend()用来新增自定义实例方法
  • 全局配置操作：比如$.ajaxSetup()统一配置所有AJAX请求的默认超时时间、请求头等公共参数

自定义扩展操作方式 #

如果需要自己新增静态方法，直接给$挂载属性即可：

// 自定义静态工具方法
$.toUpperCase = function(str) {
  return str ? str.toUpperCase() : ''
}
// 直接调用
console.log($.toUpperCase('hello'))

如果要新增实例方法，挂载到$.fn（jQuery原型对象）即可：

// 自定义实例高亮方法
$.fn.highlight = function() {
  this.css('background', '#fffbe6')
  return this // 保留jQuery链式调用特性
}
// 给所有p标签添加高亮效果
$('p').highlight()

内容的提问来源于stack exchange，提问作者SkyRunner