一、jQuery核心(上)

1、核心函数

/**
 * 查找满足条件的元素
 *
 * @param  expression  用于查找元素的css选择器字符串(不明白的请察看“选择器”一章)
 * @param  context  指定元素查找范围(可选参数),DOM 元素集、文档或 jQuery 对象
 *
 * @return	jQuery对象
 */
jQuery(expression, [context])

示例：

 $("p", $("table"))或者$("p", document.getElementsByTagName("table"))：查找所有table元素的子元素p。

 $("p", document.forms[0]：在第一个form表单中查找p子元素。

 

/**
 * 根据给定的html源代码字符串，创建DOM元素
 *
 * @param  html	用于创建DOM元素的html原代码字符串
 * @param  ownerDocument  创建DOM元素所在的文档(可选参数，未用过，具体用在什么地方还未弄明白，不过默认为当前document)
 *
 * @return	jQuery对象
 */
jQuery(html, [ownerDocument])

示例：

$("<input type='text' value='aaaa'/><br/>").appendTo("#aa")：创建一个input元素，并放到id为aa的元素中。

 

/**
 * 是上面创建DOM元素方法的扩展，也是根据给定的html源代码字符串，创建DOM元素，只不过可以同时根据第二个参数
 * 为元素指定相应的属性、事件和方法
 *
 * @param  html  用于创建DOM元素的html原代码字符串
 * @param  props  用于附加到新创建元素上的属性、事件和方法
 *
 * @return	jQuery对象
 */
jQuery(html, props)

示例：

$("<input/>",{

"class":"test",

type:"button",

value:"test测试",

click:function() {

  alert("呵呵。。。。。");

}

}).appendTo("#aa")：创建了一个button类型的input元素，并且添加了一些属性和事件方法。

 

/**
 * 将指定的DOM元素转换成jQuery对象(方便使用jquery的方法操作DOM元素)
 *
 * @param  elements  用于封装成jQuery对象的DOM元素，可以是单个元素也可是元素数组
 *
 * @return JQuery对象
 */
jQuery(elements)

示例：

$($("p")).hide()或$(document.getElementsByTagName('p')).hide()：隐藏页面总的所有p元素。

$(document.all).hide()：隐藏页面中所有的元素。

 

/**
 * 返回一个空的jQuery对象(没用过，具体用在什么地方还未弄明白)
 *
 * @return  jQuery对象
 */
jQuery();

 示例：略

 

/**
 * $(document).ready()的简写，指定一个在DOM文档载入完成后执行的函数，相当于放在body标签中的onload事件
 * 指定的方法
 *
 * @param  callback  在DOM文档载入完成后执行的函数
 * 
 * @return  jQuery对象
 */
jQuery(callback)

示例：

jQuery(function() {

  alert("document ready.....");

})：文档加载完毕会打印document ready.....。

 

$(document).ready(function() {

  alert("document ready.....");

})：同上。

 

2、对象访问

/**
 * 数组元素遍历(迭代)工具方法
 *
 * @param  elements  可选参数，将要遍历的元素对象数组
 * @param  callback  遍历到每一个元素是执行的方法，该方法有两个默认传入参数(function(i,els))，第一个参数(i)为元素在
 * 		     数组中的下标值，从0开始，第二个为对应的元素，当然也可以在方法中直接采用this来访问每一个遍历元素
 *
 * @return  JQuery对象
 */
each([elements], callback)

示例：遍历页面中所有input组建

$("input").each(function(i, els) {

alert(i+","+els.value);

});

或者:

$("input").each(function(i) {

alert(i+","+this.value);

});

或者：

var inpus = document.getElementsByTagName('input');

$.each(inpus, function(i, els){

alert(i+","+els.value);

});

 

/**
 * jQuery 对象(数组对象)中元素的个数
 *
 * @return  元素个数(是一个数值)Number
 */
size()

示例：打印页面中所有input元素个数

alert($("input").size());

 

/**
 * 一个全局属性，同size()，区别在于size()是一个方法，而length为一个属性
 *
 * @return 元素个数Number
 */
length

示例：打印页面中所有input元素个数

alert($("input").length);

 

/**
 * 一个全局属性，查找到当前jQuery对象所采用的“选择器”字符串，也就是采用方法jQuery(expression, [context])来查找
 * 产生jQuery对象时的expression参数值，如果是采用其他方法创建的jQuery对象，则返回空字符串
 *
 * @return 查找当前元素所采用的“选择器”字符串(一个字符串值)String
 *
 */
selector

示例：

alert($("#aa").selector)：返回#aa

alert($("<br/>").selector)：返回空字符串

 

/**
 * 一个全局属性，查找当前jQuery对象时指定的范围(DOM 元素集、文档或 jQuery 对象)，也就是采用方法jQuery(expression, [context])
 * 来查找产生jQuery对象时的context参数值，如果是采用其他方法创建的jQuery对象，默认为当前文档(document)
 *
 * @return  查找当前jQuery对象时指定的范围Element
 */
context

示例：

alert($("p", $("div")).context);

 

/**
 *  获取jQuery对象表示的元素的DOM对象，也就是将jQuery对象转换成DOM对象
 *
 *  @return	DOM对象数组Array<Element>
 */
get()

示例：获取所有p元素然后转换成javascript中的Array对象，然后调用其中的toString方法，将对象数组表示成字符串

alert($("p").get().toString());

 

/**
 * 获取元素数组中，第 index 个位置上的元素，get()方法的扩展，$(this).get(0)与$(this)[0]等价
 *
 * @param  index  获取元素数组中指定元素的下标位置，从0开始。
 * 
 * @return  Element，根据指定下标index获取的元素对象
 */
get(index)

示例：略

 

/**
 * 查找指定元素的索引值(从0开始计数)
 *  
 * @param  subject  可选参数，可以为DOM对象、jQuery对象或“选择器”字符串，不传参时，表示查找
 *		jQuery对象集合中第一个元素相对于其同辈元素(document文档结构树中的兄弟元素)的位置
 *		如果找不到匹配的元素，则返回-1。(如果为DOM或jQuery对象数组，则以数组中的第一个元素为准) 
 *
 * @return 元素索引值Number
 */
index([subject])

 示例：略