jQuery中$()函数的使用方法有哪些
创始人
2024-12-27 14:43:21
0次

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

接下来会一一说一下这7种用法,欢迎大家指正其中不正确的地方。

1 jQuery(selector,context)

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

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

html

    body span
    body span
    body span
    
        wrap span
        wrap span
        wrap span
    

js

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

2 jQuery(html,ownerDocument) 、jQuery(html,props)

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

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

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

另外:对于单标签,jQuery(html,props),props是一个包含属性和事件的普通的对象,用法如下。(该用法有待考证,请知道这一用法的童鞋告知一下,感激不尽)

        $('
我是div
',{             title:'我是新的div',             click:function(){                 $(this).css('color','red');                 console.log(this);             }         }).appendTo('body');

3 jQuery(element or elementsArray)

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

html

    
            
  • 1
  •         
  • 2
  •         
  • 3
  •         
  • 4
  •         
  • 5
  •     

js

         // 传入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对象引用完全相同的元素

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

jQuery中$()函数的使用方法有哪些

7 jQuery()

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

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

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...