jQuery之核心函数

相比任何一个web前端开发工作者,对于jQuery这个框架再熟悉不过了,小编前几天打开jquery的开发文档看到那么多的API,还是有一部分比较陌生,虽然大多数开发的时候都用的是jQuery,为此小编决定还是要温故而知新,重新复习一遍jQuery的开发文档,看完还是有不少收获,至少对于一些模糊的,知道这样写能达到目的函数,再一次看过之后明白了不少呢!废话不多说,以下是个人复习笔记:

一、核心函数

1、jquery([selector,[context]])

其中:

selector:用来查找的字符串

context:作为带查找的DOM元素集、文档或jquery对象

这是jquery这个框架最核心的函数,几乎所有的核心功能都是通过这个函数实现的;其基本的用法是向它传递一个表达式(一般由CSS选择器组成),然后根据该表达式查找所有匹配的元素。通常在利用jquery开发的时候,很少会用到context这个参数,他的作用其实就是指定函数该从哪里去查找匹配的元素,不写这个参数,$()则在当前的HTML document中查找DOM元素。

我们直接上例子:

2、jQuery(html,[ownerDocument]|[props])

其中:

html:用于动态创建DOM元素的HTML标记字符串

ownerDocument:创建DOM元素所在的文档

props:用于附加到新创建元素上的属性、事件和方法

直接通过例子来理解:

$("

",{

"class":"test",

text:"Click me!",

click:function(){

$(this).toggleClass("test");

}

}).appendTo("body");

3、jQuery(callback)

$(document).ready()的简写,即允许你绑定一个在DOM文档载入完成后执行的函数。你可以在一个页面中任意使用多个$(document).ready事件。

例:

4、jQuery.holdReady(hold)

暂停或恢复.ready()事件的执行,但必须在执行.ready事件之前调用,否则没有效果;如果要延迟ready事件,则调用$.holdReady(true),在ready事件执行时,调用$.holdReady(false);

例:

二、对象访问

1、each(callback)

匹配每一个元素来作为上下文执行一个函数,每次函数传进来时,函数中的this都会指向一个不同的DOM元素,同时还会传递给当前执行元素所在的index值;返回false则停止循环,返回true则进入下一次循环

例:

html:

js:

2、size()

获取jquery对象中元素的个数

html:

js:

结果:

3、length()

获取jquery对象中元素的个数

html:

js:

结果:

4、selector

返回你用什么选择器来找到这个元素的。可与context一起使用,用于精确检测选择器查询情况。开发插件常用

例子:

5、get([index])

取得其中一个匹配的元素,$(this).get(0)与$(this)[0]等价

例:

html:

js:

结果:

6、index([selector|element])

搜索匹配的元素,并返回相应元素的索引值,从0开始计数

例:

html:

js:

三、数据缓存

1、data([key],[value])

其中:

key:存储的数据名

value:将要存储的任意数据

在元素上存放数据(任何格式的数据),返回jQuery对象

例:

html:

js:

2、removeDate([name|list])

在元素上移除存放的数据

例子:

$("div").removeDate("greeting");

插件机制

用来扩展新的方法(常用来制作插件)

例:

2、jQuery.extend(object)

扩展jQuery对象本身

例:

结果:

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180310G0DQZJ00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券