jQuery 核心函数以及jQuery对象


Posted in Javascript onMarch 23, 2010

一、jQuery 核心函数

首先介绍 jQuery 的几个核心函数,在 jQuery 中它们起着至关重要的作用,在实际的前端开发过程中用到最多的也是它们。
1、jQuery(elements)

将一个或多个DOM元素转化为jQuery对象。

这个函数也可以接收XML文档和Window对象(虽然它们不是DOM元素)作为有效的参数。

返回值:jQuery 对象

参数

elements:

用于封装成 jQuery 对象的 DOM 元素

// 将当前页面的背景色设为黑色 
jQuery(document.body).css( "background-color", "black" ); 
再看以下代码 
// 将当前页面的背景色设为黑色 
$(document.body).css( "background-color", "black" ); 

代码也可以正常运行,并且执行的效果跟前面的代码一致;那么这儿的 $ 和前面的 jQuery 标识符到底有什么关系呢? 

打开 jQuery 的源文件 jquery-1.3.2.js 发现以下代码 
jQuery = window.jQuery = window.$ = function( selector, context ) { 
// The jQuery object is actually just the init constructor 'enhanced' 
return new jQuery.fn.init( selector, context ); 
}

原来 $ 与 jQuery 代表的是 jQuery 框架中同一个 function,使用 jQuery 和 $ 的效果是一样的;实际上 jQuery 框架中采用 $ 来作为 jQuery 方法的一个别名(更易于使用),由于担心 $ 与其它 javascript 框架(比如 asp.net ajax)甚至个人代码中的 $ 标识符产生冲突,也可以通过 jQuery.noConflict() 函数来移除 $ 与 jQuery 函数的关联,这样 $ 就不代表 jQuery 方法了,而是代表那个原始的 $ 对象了。
2、jQuery(expression,[context])

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

jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。

返回值:jQuery 对象

参数

expression:

 用来查找 DOM 元素的字符串

context:

(可选) 作为待查找的 DOM 元素集、文档或 jQuery 对象,用于限定查找范围

// 查找所有 DIV 元素下的 A 元素 
$("div > a");

3、jQuery(html)

根据 HTML 字符串,动态创建由 jQuery 对象包装的 DOM 元素。

返回值:jQuery 对象

参数

html:

用于创建 DOM 元素的 HTML 字符串

// 将一个 jquery.com 的超链接元素加到页面主体元素中 
$("<a href=http://jquery.com/>jquery.com</a>").appendTo("body");

二、jQuery 对象

jQuery 核心函数的返回值都是一个 jQuery 对象,通过对 jQuery 对象进行操作,可以完成 javascript 编程中的大部分任务;那么这个 jQuery 对象到底是一个什么对象呢?
jQuery 核心函数以及jQuery对象
通过 doc[0]、doc[1] 可以分别取出一个 DOM 对象,其它的则是一些 jQuery 对象特有的属性和方法;实际上 jQuery 对象包装了 DOM 对象,同时还包含了一些操作 DOM 元素的 jQuery 方法。

在使用 jQuery 的过程中,大部分情况下第一步工作同时也是最重要的一步工作,就是取得包装了要操作 DOM 对象的 jQuery 对象;然后通过调用取得的 jQuery 对象的方法来完成对 DOM 对象的操作。

Javascript 相关文章推荐
Cookie 小记
Apr 01 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
原生JS实现不断变化的标签
May 22 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
jquery easyui的tabs使用时的问题
Mar 23 #Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 #Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 #Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 #Javascript
javascript 多浏览器 事件大全
Mar 23 #Javascript
jQuery $.each的用法说明
Mar 22 #Javascript
javascript 用原型继承来实现对象系统
Mar 22 #Javascript
You might like
奇怪的PHP引用效率问题分析
2012/03/23 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
详解JS模块导入导出
2017/12/20 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
python 字典中取值的两种方法小结
2018/08/02 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
2014年人事部工作总结
2014/12/03 职场文书
手术室护士个人总结
2015/02/13 职场文书
营业员岗位职责范本
2015/04/14 职场文书
生日祝酒词大全
2015/08/10 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis