jQuery 核心函数以及jQuery对象_jquery

一、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 对象到底是一个什么对象呢?

通过 doc[0]、doc[1] 可以分别取出一个 DOM 对象,其它的则是一些 jQuery 对象特有的属性和方法;实际上 jQuery 对象包装了 DOM 对象,同时还包含了一些操作 DOM 元素的 jQuery 方法。

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

时间: 2024-07-28 17:44:32

jQuery 核心函数以及jQuery对象_jquery的相关文章

JQuery核心函数是什么及使用方法介绍_jquery

jquery对于一个程序员来说,或多或少都听过.相信很多人在项目中也都用过.现在也有很多开源的库都是依赖于jQuery,因此熟悉jQuery还是很有必要的.使用熟练的大神可以简单看看,对于小白来说还是纯纯的干货.熟悉jQuery还是先从核心函数入手比较好,后面其他的功能都是在此核心函数的基础上扩展的. jQuery 核心函数 jQuery(expression, [context]) jQuery(html, [ownerDocument]) jQuery(html, props) jQuery

浅谈Jquery核心函数_jquery

      在Jquery中,所有的DOM对象都将封装成Jquery对象,而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作. 所以Jquery提供了一个可以将DOM对象封装成Jquery对象的函数,就是Jquery核心函数jquery(),也称为工厂函数. jquery核心函数有7个重载,分别如下: jquery()  该函数返回一个空的jquery对象. jquery(elements)  该函数将一个或多个DOM元素转化为Jquery对象(或jquery集合) jqu

jquery核心函数domManip详解

domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数上的校正支持,与对应处理的调用 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.insertAfter.replaceAll  节点的操作有几个重点的细节  保证最终操作的永远是dom元素,浏览器的最终A

jQuery.extend 函数及用法详细_jquery

jquery.extend函数详解 JQuery的extend扩展方法:  Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩展方法原型是: extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的.如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

模仿JQuery.extend函数扩展自己对象的js代码_javascript技巧

但在写的过程中发现,如果要在之前写好的对象中添加新的静态方法或实例方法,要修改原有的对象结构,于是查看了jquery了extend方法,果然extend方法支持了jq的半边天,拿来主义,给自己的对象做扩张用. 下面进入正题: 假如有以下一个对象 复制代码 代码如下: var MyMath = { //加法 Add: function(a, b){ return a + b; }, //减法 Sub: function(a, b){ return a - b; } } 对象名MyMath,有两个静

jquery遍历函数siblings()用法实例_jquery

本文实例讲述了jquery遍历函数siblings()用法.分享给大家供大家参考,具体如下: siblings([expr]) 得到所有匹配元素集合中各个元素的所有兄弟元素集合.返回匹配元素集合 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &l

jQuery is()函数用法3例_jquery

jQuery提供了is()方法可以很方便的判断元素是否可见,是否隐藏,是否选中. 一.判断元素是否隐藏 如下html中的div元素是隐藏的: 复制代码 代码如下: <!doctype html><html><head> <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script> </head><body&g

jQuery.extend 函数的详细用法_jquery

Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. Jquery的扩展方法原型是: extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的.如果想要得到合并的结果却又不想修改dest的结构,可以如下使用: var newSrc=$.extend({},src1,src2,src3..

浅谈jquery回调函数callback的使用_jquery

回调函数必须是全局函数或者静态函数,不可定义为某个特定的类的成员函数 callback函数在当前动画100%完成之后执行 复制代码 代码如下: $("p").hide(1000); alert("the paragraph is now hidden"); <!--未使用回调函数,段落未完全隐藏时就弹出信息--> $("p").hide(1000,function(){alert("the paragraph is now