jQuery对象的链式操作用法分析

本文实例讲述了jQuery对象的链式操作用法。分享给大家供大家参考，具体如下：

jQuery对象的链式操作

首先来看一个例子：

代码如下:

$("#myphoto").css("border","solid 2px#FF0000").attr("alt"," good");

对一个jQuery对象先调用了css()函数修改样式，然后使用attr()函数修改属性，这种调用方式象链一样，所以称为"链式操作"。

链式操作能够让代码变得简洁，因为往往可以在一条语句中实现以往多条语句才能完成的任务。比如如果不使用链式操作，需要用两条语句才能完成上面的任务：

$("#myphoto").css("border","solid 2px#FF0000");
$("#myphoto").arrt("alt","good");

除了增加了代码量，还调用了两次选择器，降低了速度。

在一个较短的链式操作中，往往语句比较清晰，可以分步骤地对jQuery对象实现各种操作。但是链式操作不应该太长，否则会造成语句难以理解，因为要查看jQuery对象当前的状态并不是容易的事，尤其如果涉及jQuery对象中元素的增删操作是更加难以判断。

并不是所有的jQuery函数都可以使用链式操作。这与链式操作的原理有关，之所以可以实现链式操作是因为其中的每个函数返回的都是jQuery对象本身。在jQuery类库的内部实现中，虽然很多的函数都返回jQuery对象本身，但都是通过调用内部有限的几个函数实现的，比如attr()函数设置属性石，实际上最后调用了"jQuery.each(object,callback,args)"方法。注意此方法不是jQuery对象方法，jQuery对象方法也有一个each()函数，为"jQuery.fn.each(callback,args)"，此函数最后同样调用jQuery.each函数：

Each:function(callback,args){
  ReturnjQuery.each(this,callback,args);
}

下面看一看jQuery.each函数的返回结果：

Each.function(object,callback,args){
  Retumobject;
}

Object是jQuery.fn对象，即jQuery对象。最后返回的还是jQuery对象。

可以使用下面的原则判断一个函数返回的时候是jQuery对象，即是否可以用于链式操作。

除了获取某些数据的函数，比如获取属性值"attr(name)",获取集合大小"size()"这些函数明显是返回数据的。除了这些函数之外的jQuery函数都可以用于链式操作，比如设置属性"attr(name.value)"。

"$"变量的使用

"$"变量是"jQuery"变量的引用。"jQuery"变量是全局变量，jQuery对象是指"jQUery.fn"，不要混淆。"jQuery"变量类似于静态类，上面的方法都是静态方法，可以在任何时刻调用。比如"jQuery.each"。"jQuery.fn"是实例方法，只能在jQuery对象上调用。比如"jQuery.fn.each()"方法只能通过"$('#id').each"这种形式调用。

前面提到，可以使用"$"代替"jQuery"，因为在jQuery的内部有如下实现：

jQuery=window.jQuery=window.$

所以"$"变量和"jQuery"变量实际上是Window对象的属性，也就是全局变量。可以在页面上得任何地方调用。

更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery常用操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery操作json数据技巧汇总》、《jQuery操作xml技巧总结》及《jQuery扩展技巧总结》

希望本文所述对大家jquery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery如何将选中的对象转化为原始的DOM对象

    在jQuery中,在一个页面上选择元素返回的集合是jQuery对象而不是原始的DOM对象. 所以只能运行jQuery方法. 如果要在选择集上运行DOM方法和属性,该集合必须转化为DOM对象 比如你不可以这样使用: $('div').innerHTML = "hello world"; 因为innerHTML是 DOM的属性而不是jQuery对象的属性.如果确实想这么做.那么就需要将jQuery对象转化为DOM对象.方法有两种. ①jQuery提供一种核心方法get(),所以上面的可以写

  • Jquery在指定DIV加载HTML示例代码

    首先引入Jquery 复制代码 代码如下: <script src="js/jquery.js"></script> 在页面加入JS 复制代码 代码如下: <script> $(function(){ $("div#top_sidebar").load("top_sidebar.html"); }) </script> #top_sidebar 为指定DIV的ID

  • jquery模拟LCD 时钟的html文件源代码

    以下是HTML文件源代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title

  • jQuery获取单击节点对象的方法

    本文实例讲述了jQuery获取单击节点对象的方法.分享给大家供大家参考,具体如下: event.target属性: <script language="JavaScript" type="text/javascript"> $("document").ready(function () { $(".menu").bind("click", function (event) { var click

  • JQuery获取与设置HTML元素的内容或文本的实现代码

    先来看看演示效果: 欢迎访问我们PHP教程 我们PHP教程 简单易懂的JavaScript魔法 简单易懂的JQuery魔法 $(function(){ $("#btn_1").click(function(){ alert( $(".nm_p").html() ); }); $("#btn_2").click(function(){ alert( $(".nm_p").text() ); }); $("#btn_3&

  • jquery 获取 outerHtml 包含当前节点本身的代码

    在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然后我们有时候确需要,找遍jQuery api文档也没有任何方法可以拿到. 看到有的人通过parent().html(),如果当前元素没有兄弟元素还行,如果有那就行不通了.后来实验发现有一个jQuery的一个方法可以解决,而且非常简便,如下: jQuery.prop("outerHTML"); 复制代码 代码如下: <div class="test">&

  • jquery遍历json对象集合详解

    本文实例采用案例分析的方法介绍了jquery遍历json对象的三种情况,供大家参考,具体内容如下 第一个案例:jquery 遍历json对象集合 常用示例 jsp中 $.ajax({ url: "${applicationScope.rootpath}common/getContractPage.html?userConId=${userConId}", type: "post", dataType:"json", data: {}, succe

  • 解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)

    复制代码 代码如下: nav1 = "<div style='width:145px;height:62px;float:left;background:url(login_image/index/on_1.jpg);font-size:18px;color:white;line-height:65px;' id='left_tab" +  "</div>" 复制代码 代码如下: $("#top_1").html(nav1);

  • jquery随意添加移除html的实现代码

    html代码: 复制代码 代码如下: <ul id="list3" class="eventlist"> <li>plain</li> <li class="special">special <button>I am special</button></li> <li>plain</li> </ul> script代码: 复制代

  • jQuery查看选中对象HTML代码的方法

    本文实例讲述了jQuery查看选中对象HTML代码的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • phpQuery让php处理html代码像jQuery一样方便

    简介 如何在php中方便地解析html代码,估计是每个phper都会遇到的问题.用phpQuery就可以让php处理html代码像jQuery一样方便. 项目地址:https://code.google.com/p/phpquery/ github地址:https://github.com/TobiaszCudnik/phpquery DEMO 下载库文件:https://code.google.com/p/phpquery/downloads/list 我下的是onefile版:phpQuer

  • jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)

    jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)

    本文实例讲述了jQuery实现鼠标跟随提示层效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: Web网站有不少需要用到tip提示层的地方,结合jquery的jquery.cluetip.js ,可以实现本地字符或ajax异步调用显示提示层.如以上购评分明细提示.(优势:宽度需要调用页加载时定义,高度auto , 且三角指定图标能根据显示层的大小位置来调用它的位置,达到醒目直观的效果) jquery.cluetip.css /* global */ #cluetip-close im

随机推荐