博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery学习笔记:核心(jQuery Core)
阅读量:6282 次
发布时间:2019-06-22

本文共 6017 字,大约阅读时间需要 20 分钟。

学习并掌握jQuery,从熟悉jQuery核心开始。

一、
核心函数

1、
jQuery(expression,[context])

这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 

jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。默认情况下, 如果没有指定context参数,$()将在当前的 HTML 文档中查找 DOM 元素;如果指定了context 参数,如一个DOM 元素集或 jQuery 对象,那就会在这个context 中查找。
返回值 jQuery
参数 
expression (String) : 用来查找的字符串
context (Element, jQuery) : (可选) 作为待查找的 DOM 元素集、文档或 jQuery 对象。
示例:

ContractedBlock.gif
Code
文档片段:

ContractedBlock.gif
Code
2、
jQuery(html,[ownerDocument])
根据提供的原始HTML标记字符串,动态创建由 jQuery 对象包装的DOM元素。 

可以传递一个手写的HTML字符串,或者由某些模板引擎或插件创建的字符串,也可以是通过 AJAX 加载过来的字符串。但是在创建input 元素的时会有限制,可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址),还有反斜杠。
 
当创建单个元素时,请使用闭合标签或 XHTML 格式
。例如,创建一个span,可以用 
("<span/>")("<span/>")或
("<span></span>") ,但不推荐 
("<span>")jQuery("<span>")。在jQuery中,这个语法等同于
(document.createElement("span")) 。 

返回值 
jQuery

参数 

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

ownerDocument (Document) : 可选,创建DOM元素所在的文档
示例:

ContractedBlock.gif
Code

3、jQuery(elements)

将一个或多个DOM元素转化为jQuery对象。
这个函数也可以接收XML文档和Window对象(虽然它们不是DOM元素)作为有效的参数。
返回值 jQuery
参数 

elements (Element, Array<Element>) : 用于封装成jQuery对象的DOM元素

示例:

$(document).ready(
function
() {
    $(document.body).css(
"
background
"
"
cef
"
); 
//
设置页面背景色
    $(document.forms[
0
].elements).hide(); 
//
隐藏一个表单中的所有元素
})

 4、jQuery(callback)

(document).ready()DOM(document).ready()的简写。允许绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同(document).ready()一样,只不过用这个函数时,需要把页面中所有需要在DOM 加载完成时执行的()使()操作符都包装到其中来。可以在一个页面中使用任意多个(document).ready事件。
返回值 jQuery
参数 

callback (Function) : 当DOM加载完成后要执行的函数

示例:

$(
function
() {
    alert(
"
文档加载就绪
"
);
    
//
 文档加载就绪
}); 

注意:

使用 (document).ready()jQuery使(document).ready()的简写,同时内部的jQuery代码依然使用 作为别名,而不管全局的 jQuery:jQuery(function(为何。jQuery代码:jQuery(function() {
// 可以在这里继续使用$作为别名...
}); 
二、对象访问
1、each(callback)
以每一个匹配的元素作为上下文来执行一个函数。
意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形)。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
返回值 jQuery
参数 
callback (Function) : 对于每个匹配的元素所要执行的函数
示例:

$(
"
img
"
).each(
function
(i) {
this
.src 
=
 
"
images/test
"
 
+
 (i 
+
 
1
).toString() 
+
 
"
.jpg
"
//
 结果: <img src="images/test1.jpg" />
});

 如果你想得到 jQuery对象,可以使用 (this)jQuery:(this)函数。jQuery代码:("img").each(function(){

  $(this).toggleClass("example");
}); 
下面再实现一个使用 'return' 来提前跳出 each() 循环:

ContractedBlock.gif
Code

文档片段:

<
button
>
改变背景色
</
button
>
<
span
></
span
>
 
<
div
></
div
>
 
<
div
></
div
>
<
div
></
div
>
 
<
div
></
div
>
<
div 
id
="stop"
>
在这里停止
</
div
>
 
<
div
></
div
>
<
div
></
div
>
<
div
></
div
>

 3、size()和length

jQuery 对象中元素的个数。
这个函数的返回值与 jQuery 对象的length属性一致。
返回值 Number
参数    没有参数
示例:

$(
function
() {
    
var
 len 
=
 $(
"
img
"
).size(); 
//
计算文档中所有图片数量
    alert(len);
    alert($(
"
img
"
).length 
==
 len); 
//
与jQuery对象的length属性一致
})

 4、selector

jQuery 1.3新增。返回传给jQuery()的原始选择器。
换句话说,就是返回你用什么选择器来找到这个元素的。可以与context一起使用,用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。
返回值 String
参数    没有参数
示例:

ContractedBlock.gif
Code

5、context

jQuery 1.3新增。返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。如果没有指定,那么context指向当前的文档(document)。
可以与selector一起使用,用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。
返回值 HTMLElement
示例

ContractedBlock.gif
Code

6、get()

取得所有匹配的 DOM 元素集合。
这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,而实际上是元素数组)。如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。
返回值 Array<Element>
参数    没有参数
示例:

$(
function
() {
$(
"
img
"
).get().reverse(); 
//
选择文档中所有图像作为元素数组,并用数组内建的reverse方法将数组反转
})

 文档片段:

    
<
form 
id
="form1"
 runat
="server"
 
>
    
<
img 
src
="images/test1.jpg"
/><
br 
/>
 
<
img 
src
="images/test2.jpg"
/>
    
</
form
>

 7、get(index)

取得其中一个匹配的元素。 index表示取得第几个匹配的元素。
这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。(this).get(0)(this).get(0)与(this)[0]等价。
返回值 Element
参数    
index (Number) :取得第 index 个位置上的元素
示例:

$(
function
() {
    
var
 imgSrc 
=
 $(
"
img
"
).get(
0
).src; 
//
取图片对应路径
    alert(imgSrc);
})

8、index(subject)

搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。
如果找到了匹配的元素,从1开始返回;如果没有找到匹配的元素,返回-1。
返回值 Number
参数    
subject (Element) : 要搜索的对象
示例:

ContractedBlock.gif
Code

文档片段:

<
div id
=
"
foobar
"
>
<
div id
=
"
fo
"
><
/
div>
<
div id
=
"
foo
"
><
/
div>
<
/
div>

三、数据缓存

1、data(name)
返回元素上储存的相应名字的数据,可以用data(name, value)来设定。
如果jQuery集合指向多个元素,那将只返回第一个元素的对应数据。
这个函数可以用于在一个元素上存取数据而避免了循环引用的风险。jQuery.data是1.2.3版的新功能。可以在很多地方使用这个函数,另外jQuery UI里经常使用这个函数。
返回值 Any
参数    
name (String) :存储的数据名 
示例:

ContractedBlock.gif
Code

2、removeData(name)

在元素上移除存放的数据
与$(...).data(name, value)函数作用相反
返回值 jQuery
参数    
name (String) :存储的数据名 
示例:

ContractedBlock.gif
Code

3、queue([name])

返回指向第一个匹配元素的队列(将是一个函数数组)
返回值 Array<Function>
参数    
name (String) :队列名,默认为fx 
示例:

ContractedBlock.gif
Code

文档片段:

ContractedBlock.gif
Code

4、queue([name],callback)

在匹配的元素的队列最后添加一个函数
返回值 jQuery
参数    
name (String) :队列名,默认为fx 
callback (Function) : 要添加进队列的函数
示例:

ContractedBlock.gif
Code

文档片段:

ContractedBlock.gif
Code

5、queue([name],queue)

将匹配元素的队列用新的一个队列来代替(函数数组).
返回值 jQuery
参数    
name (String) :队列名,默认为fx 
queue (Array<Function>) : 用于替换的队列。所有函数都有同一个参数,这个值与queue(callback)相同
示例:

ContractedBlock.gif
Code

文档片段:

ContractedBlock.gif
Code

6、dequeue([name])

从队列最前端移除一个队列函数,并执行它。
返回值 jQuery
参数    
name (String) :队列名,默认为fx 
示例:

ContractedBlock.gif
Code

文档片段:

ContractedBlock.gif
Code

 ps:上面的一些示例用到了一些jquery特效函数,因为本篇主要阐述核心函数,对于单个特效函数这里不再详细说明使用细节。

四、插件机制
1、jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法(通常用来制作插件)
返回值 jQuery
参数    
object (Object) :用来扩充 jQuery 对象。 
示例:

ContractedBlock.gif
Code

文档片段:

    
<
input  
type
="checkbox"
 
/>
    
<
input 
type
="radio"
  checked
="checked"
/>

2、jQuery.extend(object)

扩展jQuery对象本身,用来在jQuery命名空间上增加新函数
返回值 jQuery
参数    
object (Object) :用来扩充 jQuery 对象。 
示例:

ContractedBlock.gif
Code

五、多库共存

1、jQuery.noConflict()
运行这个函数将变量$的控制权让渡给第一个实现它的那个库。这有助于确保jQuery不会与其他库的使jQuery访jQuery对象发生冲突。在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到("div p")的地方,就必须换成jQuery("div p")。
注意:这个函数必须在导入jQuery文件之后,并且在导入另一个导致冲突的库之前使用。当然也应当在其他冲突的库被使用之前,除非jQuery是最后一个导入的。
返回值 jQuery
示例:

ContractedBlock.gif
Code

2、jQuery.noConflict(extreme)

将$和jQuery的控制权都交还给原来的库(用之前请考虑清楚!)
这是相对于简单的 noConflict 方法更极端的版本,因为这将完全重新定义jQuery。这通常用于一种极端的情况,比如你想要将jQuery嵌入一个高度冲突的环境。注意:调用此方法后极有可能导致插件失效。
返回值 jQuery
参数    
extreme (Boolean) : 传入 true 来允许彻底将jQuery变量还原示例:
示例:

ContractedBlock.gif
Code

好了,核心部分就介绍到这里。现在回头来看,jQuery函数封装的方式比直接调用js和dom的各种函数,真是方便直接多了。 振作精神,下一篇接着把jQuery的选择器属性介绍一下。函数很多,现在记不住就记不住算了,多写多用熟练了就好。以后用到的时候,可以直接当自己的在线参考书。希望对你也有帮助。

本文转自JeffWong博客园博客,原文链接:http://www.cnblogs.com/jeffwongishandsome/archive/2009/08/08/1530624.html,如需转载请自行联系原作者

你可能感兴趣的文章
Python 数据类型
查看>>
iOS--环信集成并修改头像和昵称(需要自己的服务器)
查看>>
PHP版微信权限验证配置,音频文件下载,FFmpeg转码,上传OSS和删除转存服务器本地文件...
查看>>
教程前言 - 回归宣言
查看>>
PHP 7.1是否支持操作符重载?
查看>>
Vue.js 中v-for和v-if一起使用,来判断select中的option为选中项
查看>>
Java中AES加密解密以及签名校验
查看>>
定义内部类 继承 AsyncTask 来实现异步网络请求
查看>>
VC中怎么读取.txt文件
查看>>
如何清理mac系统垃圾
查看>>
企业中最佳虚拟机软件应用程序—Parallels Deskto
查看>>
Nginx配置文件详细说明
查看>>
怎么用Navicat Premium图标编辑器创建表
查看>>
Spring配置文件(2)配置方式
查看>>
MariaDB/Mysql 批量插入 批量更新
查看>>
ItelliJ IDEA开发工具使用—创建一个web项目
查看>>
solr-4.10.4部署到tomcat6
查看>>
切片键(Shard Keys)
查看>>
淘宝API-类目
查看>>
virtualbox 笔记
查看>>