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 相关文章推荐
javascript验证身份证完全方法具体实现
Nov 18 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
Vue render深入开发讲解
Apr 13 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
详解vue 组件的实现原理
Nov 12 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将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
DWR Ext 加载数据
2009/03/22 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
angularJS模态框$modal实例代码
2017/05/27 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
Python使用遗传算法解决最大流问题
2018/01/29 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
python实现三壶谜题的示例详解
2020/11/02 Python
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
自我评价是什么
2014/01/04 职场文书
餐饮营销方案
2014/02/23 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
大学新生入学教育方案
2014/05/16 职场文书
人事专员岗位说明书
2014/07/29 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
2014年终工作总结范本
2014/12/15 职场文书
酒店前台岗位职责
2015/04/16 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
go goroutine 怎样进行错误处理
2021/07/16 Golang