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 相关文章推荐
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
简单实现js倒计时功能
Feb 13 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
php读取html并截取字符串的简单代码
2009/11/30 PHP
php图片缩放实现方法
2014/02/20 PHP
PHP的拦截器实例分析
2014/11/03 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
Javascript----文件操作
2007/01/18 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
Python编写检测数据库SA用户的方法
2014/07/11 Python
python脚本内运行linux命令的方法
2015/07/02 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
仓管员岗位责任制
2014/02/19 职场文书
经济管理自荐书
2014/06/09 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
交通事故协议书范文
2014/10/23 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
golang 实现两个结构体复制字段
2021/04/28 Golang
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js