一、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])

 示例:略

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值