jQuery中$()函数

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

构造函数jQuery()常见的7种用法

 

   1.接受一个CSS选择器表达式和可选的选择器上下文，返回一个包含了匹配的DOM元素的jQuery对象。例如：$('.p'),$('.p','.content');

   2.接受HTML代码创建DOM元素。例如:$('<p></p>');

   3.封装DOM元素为jQuery对象。例如：$(this);

   4.将普通对象封装为jQuery对象，以便普通对象也可以调用jQuery对象的方法。例如：$(obj);

   5.给ready事件绑定监听函数。例如：$(function(){});

   6.接受一个jQuery对象，返回该jQuery对象的副本。例如 $($('p'));

   7.创建一个空jQuery对象。例如$();

参数是一个function, 入口函数
$(domobj) 把dom对象转换成jquery对象
参数是一个字符串,用来找对象

　　

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>

$('span').css('background-color','red');//所有的span都会变红
$('.wrap span').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');

3 jQuery(element or elementsArray)

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

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

         // 传入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对象。

绑定事件：$("a").click(funcTIon(){...})

显示其html内容：alert($("div>p").html());       $(document).find("div>p").html());

添加新内容：$("Hello").appendTo("body");

$("#")是指选择器选择带有id的元素

---

jQuery中的“$”

1、jQuery对象构造函数【选择器】

在CSS中选择器的作用是选择页面中某一类元素或者某一个元素（ID选择器），而jQuery中的"$"作为选择器，同样是选择某一类或某一类元素。

<h2>标记下包含的所有子标记<a> 

h2 a {  /*添加CSS属性*/  }

$("h2 a")  对象数组 

$("#showDiv“)     id选择器，相当于javascript中的document.getElementById("#showDiv")

$(".SomeClass")   class选择器，选择CSS类别作为”SomeClass“的所有节点元素， 在javascript中要实现相同的选择，需要用for循环遍历整个DOM

 $("p : odd")  选择所有位于奇数行的<p>标记， 几乎所有的标记都可以使用": odd" 或者 ": even" 来实现奇偶的选择

 $("td:nth-child(1)")  所有表格行的第一个单元格，就是第一列。这在修改表格的某一列的属性时是非常有用的。不再需要一行行遍历表格

 $("li > a")  子选择器，返回<li>标记的所有子元素<a>,不包括孙标记

 $("a[href$=pdf]")  选择所有超链接，并且这些超链接的href属性是以"pdf"结尾的。有了属性选择器，可以很好的选择页面中的各种特性元素

2、功能函数前缀

在javascript中，开发者经常要便携一些小函数来处理各种操作细节，例如在用户提交表单时，需要将文本框中的最前端和最末端的空格清理掉，javascript没有提供类似trim()的功能，而引入jQuery后，便可以直接使用trim()函数，例如

$.trim(sString);

jQuery.trim(sString);

trim()是jQuery的全局函数。

3、解决window.onload函数的冲突

由于页面的HMTL框架需要在页面完全加载之后才能使用，因此在DOM编程时window.onload函数

频繁被使用。倘若页面中有多处都需要使用该函数，或者其他.js文件中也包含window.onload函数，

冲突问题十分棘手

jQuery中的ready()方法很好的解决了上述问题，它能够自动将其中的函数在页面加载完成后运行，

并且同一个页面中可以使用多个ready()方法，而且不互相冲突。例如

$(document).ready(function(){

$("table.datalist tr:nth-child(odd)").addClass("altrow");

});

对于上述代码jQuery还提供了简写，可以省略其中的"(document).ready"部分，代码如下：

$(function(){

$("table.datalist tr:nth-child(odd)").addClass("altrow");

});

4、创建DOM元素

利用DOM方法创建元素节点，通常需要将document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻烦，而jQuery中使用"$"符号可以直接创建DOM元素。例如

var  oNewP = $("<p>这是一个好故事</p>")

以上代码等同于javascript中的如下代码：

var  oNewP = document.createElement("p");// 新建节点

var oText = document.createTextNode("这是一个好故事");

oNewP.appendChild(oText);

另外，jQuery对象还提供了insertAfter()方法：

$(function(){ 

　　var oNewP = $("<p>这是一个好故事</p>");// 创建DOM元素的JQuery对象

　　oNewP.insertAfter("#myTarget");

});

<body>

<p id="myTarget">插入到这行文字之后</p>

<p>也就是插入到这行文字之前，但这行没有id,也可能不存在</p>

</body>

5、自定义添加"$"

jQuery不能满足所有用户的所有需求，且有一些特殊的需求十分小众，也不适合放到整个jQuery框架中，用户可以自定义该方法。代码如下：

$.fn.disable = function(){

　　return this.each(function(){

　　　　if(typeof this.disabled != "undefined") this.disabled = true;

　　});

}

以上代码首先设置"$.fn.disable",表明为"$"添加一个方法“disable()”,其中“$.fn”是扩展jQuery时所必须的，然后利用匿名函数定义这个方法，即用each()将调用这个方法的每个元素的disabled属性均设置为true(如果该属性存在)

6、解决"$"的冲突

如果其他框架也是用了“$",会引起冲突，jQuery同样提供了noConflict()方法来解决"$"冲突问题

jQuery.noConflict();

以上代码可以使"$"按照其他javascript框架的方式运算，这时在jQuery中便不能再使用“$”，而必须使用jQuery，例如$("div p") 必须写成jQuery("div p").

---