jQuery中$()函数的7种用法汇总
阿萨 2018-03-23 来源 :网络 阅读 844 评论 0

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

前言

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

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

1 jQuery(selector,context)

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

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

html

    <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>

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  $('<div>').appendTo('body');

     *   2  $('<div></div>').appendTo('body');  

     */

    // 多标签嵌套

     $('<div><span>dfsg</span></div>').appendTo('body');

    

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

        $('<div>我是div</div>',{

            title:'我是新的div',

            click:function(){

                $(this).css('color','red');

                console.log(this);

            }

        }).appendTo('body');

3 jQuery(element or elementsArray)

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

html

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

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);

 

7 jQuery()

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

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

 

希望这篇文章可以帮助到你。总之,同学们,你想要的职坐标IT频道都能找到!

本文由 @阿萨 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved