最近在学习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对象
**/
- 在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内部的代码,还没有学习到,如果想了解可以参考