zoukankan      html  css  js  c++  java
  • 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对象。

    艾欧尼亚,昂扬不灭,为了更美好的明天而战(#^.^#)
  • 相关阅读:
    网站外链建设如何布局关键词?
    Cloudera Manager、CDH零基础入门、线路指导 http://www.aboutyun.com/thread-9219-1-1.html (出处: about云开发)
    Spring源码地址和相关介绍的网址
    【转】Tomcat7.0.42源代码运行环境搭建
    【转】windows上自动设置java环境变量的脚本
    [转]SAP中找表的方法
    【转】linux shell ${}简单用法
    【转】linux下设置ssh无密码登录
    安装Java和Pycharm的步骤
    提取位于<title>...</title>内的文本标题内容
  • 原文地址:https://www.cnblogs.com/lovelywcc/p/14371324.html
Copyright © 2011-2022 走看看