推荐教程: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对象。
更多编程相关知识,请访问:编程教学!!
以上就是7种jquery $()函数的使用方法(总结)的详细内容。
   
 
   