jQuery中$()函数的7种用法汇总

    <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>
1.
2.
3.
4.
5.
6.
7.
8.

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

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

        $('<div>我是div</div>',{
            title:'我是新的div',
            click:function(){
                $(this).css('color','red');
                console.log(this);
            }
        }).appendTo('body');
1.
2.
3.
4.
5.
6.
7.

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
1.
2.
3.
4.
5.
6.
7.

         // 传入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对象'
            
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

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

    $(function(){
    
    })
    //以上代码和下面的效果是一样的
    $(document).ready(function(){
        ...//代码
    })
1.
2.
3.
4.
5.
6.
7.

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