jquery核心函数jQuery()学习

最近在学习jquery这个js库，看了一些资料，发现没有找到特别满意的，jquery的学习有一点曲折，官网的英文看着不太习惯，现有的翻译的内容又不太全，在学习的过程中查找好多资料，给自己解惑。顺便记录下来，以供参考。

本文遵从JQuery在线工具 的内容顺序记录；附带具体内容的细节记录和相关资料的网址。

jquery的使用形式有两种：jQuery()和$()

jQuery核心函数

---

一. jQuery(选择器)

jQuery( [ selector,[context] ] )

/*
**参数：**
selector[,context]
     selector:用来查找的字符串，使用css选择器
     context:作为待查找的 DOM 元素集、文档或 jQuery 对象；作为查找的根节点。
jQuery()
     无参返回一个空数组[]
jQuery object
    参数为一个jquery对象，复制一份参数对象，返回   //复制jquery对象

//转换dom对象
element
    将DOM的element转换为jquery对象
object
    转换为jquery对象
elementArray
    将element数组转换为jquery对象

**返回**
    函数返回一个jquery对象，实际上也是一个数组[..]

*/

<--! 示例结构 -->
<div>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>

var $t=jQuery("li");
//$t的值为：[<li>one</li>,<li>two</li>,<li>three</li>];返回的是一个数组

var $clone=jQuery($t);//这时$clone的值和$t一样

jQuery()
[] //返回一个空数组

/**
 * 比较纠结的是使用document.getElementsByTagName("li")返回的也是一个数组，值       
 * 也是[<li>one</li>,<li>two</li>,<li>three</li>]
**/

//******【jquery对象和dom对象】区分见下面****

//说明数组形式并不是jquery与dom对象的区分点，数组只是jquery返回值得一个固定形式。
/**
 *区分jquery和dom，根据使用的方法不一样，我们用$开头的变量表示jquery对象
 *常规的变量表示dom对象
**/

DOM对象与JQuery对象的区别

• 在JS中使用原生的代码选择元素时，比如getELementById(..)，getElementsByTagName(..),querySelecotr(..)等，返回的是DOM对象，可以通过对象使用DOM元素的相关的属性和方法。
• 而在jquery中，使用jQuery()或$()选择的元素，返回的是jquery对象，只能使用jquery库里定义的方法，和DOM对象不能混用，各自是相互独立的。

二者的转换：

• jquery对象转换为DOM对象：[index],get(index)；因为jquery对象实际上是一个数组形式；

• DOM对象转换为jquery对象： 使用$()或jQuery()把对象包起来就行，返回的就是jquery对象，就是

/**
*jQuery(参数)转换DOM对象
*其中参数可以是element,object，elementArray，都被转换为jquery对象
**/
var cr=document.getElementById("cr"); //dom对象
var $cr = $(cr); //转换成jquery对象

---

二. jQuery（html)创建对象

jQuery(html,[ownerDocument])

根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。

/**
**参数**
html,[ownerDocument]
    html:用于动态创建DOM元素的HTML标记字符串
    ownerDocument:创建DOM元素所在的文档；dom元素中的ownerElement特性，可选

html,props
    html:用于动态创建DOM元素的HTML标记字符串
    props:用于附加到新创建元素上的属性、事件和方法;以对象字面量的形式

**/

$("<div><p>Hello</p></div>").appendTo("body");
//创建一个DOM结构，div包含一个p标签，函数返回一个jquery对象，然后添加到body

$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");
//创建一个input,并设置相关的type,value,和事件处理程序等特性

---

三. jQuery(callback)加载

jQuery(callback)

$(document).ready()的简写。

允许你绑定一个在DOM文档载入完成后执行的函数。作用如同$(document).ready()一样，只不过用这个函数时，需要把页面中所有需要在DOM加载完成时执行的$()操作符都包装到其中来。(不太明白，强制要求所有需要在加载完成时执行的都必须在这个函数中？？)
从技术上来说，这个函数是可链接的－－但真正以这种方式链接的情况并不多。 你可以在一个页面中使用任意多个$(document).ready事件。

最好用$(document).ready();

/**
*参数：callback
*加载完成时调用的函数
*/

总结：看一看jQuery()和$()为何方神僧。window.jQuery=window.$

//console下输入
>window.$
/**
输出：function ( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context, rootjQuery );
    }
*/
window.jQuery结果一样

二者是加入jQuery.js库后创建的全局（window）属性，可以看到实际是一个函数；我们使用jQuery()和$()可以用来选择对象，并继续相关的操作。

再深入下去，涉及到jQuery内部的代码，还没有学习到，如果想了解可以参考

$到底是什么-详解jQuery的$符号和init函数