JQuery中$()函数的7种用法总结

本文链接：https://blog.csdn.net/a394268045/article/details/89317014

本文深入解析jQuery中$()函数的7种使用方法，包括选择器、HTML创建、DOM元素封装、对象封装、回调函数绑定等，为前端开发者提供全面的jQuery应用指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

最近项目中需要用到jQuery，而jQuery中最重要的概念应该就是这个$符号了，特意总结了下$()函数的几种用法。

jQuery对象是一个类数组的对象，含有连续的整形属性以及一系列的jQuery方法。它把所有的操作都包装在一个jQuery()函数中，形成了统一(也是惟一)的操作入口。其中我们用的非常频繁的一个函数是$()或者说是jQuery()，当我们调用他的时候会根据传入的参数的不同而达到不同的效果。

1. jQuery(selector,context)

简要的说是：接收一个css选择器表达式(selector)和可选的选择器上下文(context),返回一个包含了匹配的DOM元素的jQuery对象。

默认情况下，对匹配元素的查找都是从根元素ducument对象开始，也就是说查找范围是整棵文档树。但是如果给定了上下文context，则在指定上下文中查找

    <span>body span</span>
    <span>body span</span>
    <span>body span</span>
    <div class="wrap">
        <span>wrap span</span>
        <span>wrap span</span>
        <span>wrap span</span>
    </div>

$('span').css('background-color','red');//所有的span都会变红
$('span','.wrap').css('background-color','red');//只有.wrap中的span会变红

2. jQuery(html,ownerDocument)

用所提供的html代码创建DOM元素.

对于jQuery(html,ownerDocument)，参数html可以是单标签或者是多层标签之间的嵌套。第二个参数用于创建新DOM元素的文档对象，如果不传入则默认为当前的文档对象。

//单标签  两种方式都可以往body中插入div
/*   
 *   1  $('<div>').appendTo('body');
 *   2  $('<div></div>').appendTo('body');  
 */
// 多标签嵌套
 $('<div><span>dfsg</span></div>').appendTo('body');

3. jQuery(element or elementsArray)

如果传入一个DOM元素或者是DOM元素的数组，则把DOM元素封装到jQuery对象中并返回。

// 传入DOM元素
 $('li').each(function(index,ele){
        $(ele).on('click',function(){
            $(this).css('background','red');//这里的DOM元素就是this
        })
})

//传入DOM数组
var aLi=document.getElementsByTagName('li');
    aLi=[].slice.call(aLi);//集合转数组
    var $aLi=$(aLi);
    $aLi.html('我是jQuery对象');//所有的li的内容都变成'我是jQuery对象'

4. jQuery(object)

如果传入的是一个object对象，则把该对象封装到jQuery对象中并返回。

var obj={name:'谦龙'};
var $obj=$(obj);//封装成jQuery对象
//绑定自定义事件
$obj.on('say',function(){
    console.log(this.name)//输出谦龙
});
$obj.trigger('say');

5. jQuery(callback)

当传进去的参数是函数的时候，则在document对象上绑定一个ready事件监听函数，当DOM结构加载完成的时候执行

$(function(){

})
//以上代码和下面的效果是一样的
$(document).ready(function(){
    ...//代码
})

6. jQuery(jQuery object)

当传进去的参数是一个jQuery对象的时候，则创建该jQuery对象的一个副本并返回。副本与传入的jQuery对象引用完全相同的元素(PS:本人表示，增加一个副本有什么用呢？)

var aLi=$('li');
var copyLi=$(aLi);//创建一个aLi的副本
console.log(aLi);
console.log(copyLi);
console.log(copyLi===aLi);

7. jQuery()

如果不传入任何的参数，则返回一个空的jQuery对象，属性length为0

注意这个功能可以用来复用jQuery对象，例如可以创建一个空的jQuery对象，然后在需要的时候先手动修改其中的元素，然后在调用jQuery方法。从而避免重复创建jQuery对象。