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 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
PHP 学习路线与时间表
2010/02/21 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
javascript 写类方式之五
2009/07/05 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
python封装对象实现时间效果
2020/04/23 Python
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
2014大学生全国两会学习心得体会
2014/03/13 职场文书
绿色校园广播稿
2014/10/13 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS
GO中sync包自由控制并发示例详解
2022/08/05 Golang