如何构造jquery 多级选择器

jQuery 层次选择器

十载的宣威网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整宣威建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“宣威网站设计”,“宣威网站推广”以来，每个客户项目都认真落实执行。

$("div span") 选取div里的所有span元素

$("div span") 选取div元素下元素名是span的子元素

$("#one +div") 选取id为one的元素的下一个div同辈元素 等同于$(#one).next("div")

$("#one~div") 选取id为one的元素的元素后面的所有div同辈元素 等同于$(#one).nextAll("div")

$(#one).siblings("div") 获取id为one的元素的所有div同辈元素（不管前后）

$(#one).prev("div") 获取id为one的元素的前面紧邻的同辈div元素

所以 获取元素范围大小顺序依次为：

$(#one).siblings("div")$("#one~div")$("#one +div") 或是

$(#one).siblings("div")$(#one).nextAll("div")$(#one).next("div")

不积跬步,无以至千里!

如何创建一个自定义jQuery插件

jQuery 库是专为加快 JavaScript 开发速度而设计的。通过简化编写 JavaScript 的方式，减少代码量。使用 jQuery 库时，您可能会发现您经常为一些常用函数重写相同的代码。如果这样的话，这可能就是您需要编写自定义 jQuery 插件的一个原因。

jQuery 插件允许您使用自定义代码扩展 jQuery 库；您可以对一些重复性函数使用插件。例如，很多插件可供幻灯片、下拉菜单和折叠菜单所用。如果您搜索 jQuery 插件，就会发现有大量可用于自己项目的示例（看看它们是如何构建的）。

常用缩略词

CSS：层叠样式表

HTML：超文本标记语言

在本文中，您将学习如何快速创建一个自定义 jQuery 插件。示例代码和逐步操作将为您演示如何创建一个 jQuery accordion 插件。如果您了解 jQuery，而且准备让您的技能再上一个台阶，这篇文章非常适合您。

您可以在此 下载 本文所用的示例源代码。

先决条件

本文假设您对 JavaScript、jQuery 和层叠样式表有一个基本了解。请参阅 参考资料 了解更多有关先决条件的信息。

回页首

准备开始

jQuery 是一个可扩展 JavaScript 语言的库。当您创建一个 jQuery 插件时，本质上是在扩展这个 jQuery 库。要真正了解插件如何扩展 jQuery 库需要对 JavaScript prototype 属性有一个基本了解。尽管不直接使用，但是 JavaScript prototype 属性可通过 jQuery 属性 fn 在后台使用，这是原生 JavaScript prototype 属性的一个 jQuery 别名。

要使用 fn 属性创建一个新 jQuery 插件，只需要为 fn 属性分配一个插件名，并将其指向一个充当构造函数的新函数，类似于纯 JavaScript。清单 1 中的代码显示了如何定义一个名为 accordion 的新 jQuery 插件，其方法是通过使用 jQuery 对象和 fn 属性，并将其分配给一个新的构造函数。

清单 1. 定义一个名为 accordion 的新 jQuery 插件

jQuery.fn.accordion = function() {

// Add plugin code here

};

清单 1 展示了创建 jQuery 插件的一种方法；该示例没有什么功能性错误。但是，创建一个 jQuery 插件所推荐的方法是，先创建一个允许使用美元符号 ($) 的包装器函数。在默认情况下，美元符号可能与其他 JavaScript 框架发生冲突，如果将插件包装在一个函数中，就不会出现冲突。清单 2 中的示例代码显示如何将一个包装器函数应用到一个 jQuery 插件定义中。

清单 2. 在一个包装器函数中包装一个名为 accordion 的新 jQuery 插件

(function($) {

$.fn.accordion = function() {

// Add plugin code here

};

})(jQuery);

在清单 2 中，jQuery 关键字被应用到包装器函数中，这允许您在插件中使用美元符号，就像使用 fn 属性时那样。包装器函数就绪后，就可以在整个插件的任何地方使用美元符号代替 jQuery 关键字，不会干扰其他第三方插件。该选项提供了一种方法使我们可以在开发整个插件中编写较少的代码，并且有助于您的插件代码保持整洁，易于维护。

回页首

维护链接性

jQuery 的一个优势是允许您使用任何类型的选择器。但是，必须记住，您的插件可以处理几种不同的元素类型。使用 this 关键字允许您的插件应用于相关函数，通过循环实现每个元素的访问，而不考虑元素类型。如果在 each 循环前使用 return 关键字，就可以使用您的插件维护链接性。清单 3 显示了分配给一个函数处理程序且与 return 关键字相结合的 each 循环。

清单 3. 在 each 循环之前使用 return 关键字

(function($) {

$.fn.accordion = function() {

return this.each(function() {

// Using return allows for chainability

});

};

})(jQuery);

有了清单 3 的代码后，示例 accordion 插件可用在一个方法调用链中。有了链接性（另一个强大的 jQuery 特性），您的插件就可用在一个方法调用链中。例如，下面的代码显示了如何淡出 HTML 元素，并在单一的方法调用链中将其从文档对象模型 (DOM) 中删除。

$("#my-div").fadeOut().remove();

回页首

构造一个 accordion

一个典型的层叠设计包括标题栏和相关内容区域。定义列表是一个可供 accordions 使用的很好的 HTML 结构；dt 元素供标题所用，而dd 元素供内容区域所用。清单 4 中的 HTML 结构是一个定义列表，含有四个标题以及相应的内容区域。

清单 4. 单一方法调用链

dl class="accordion" id="my-accordion"

dtSection 1/dt

ddMauris mauris ante, blandit et, ultrices a, suscipit eget, quam./dd

dtSection 2/dt

ddVestibulum a velit eu ante scelerisque vulputate./dd

dtSection 3/dt

ddNam mi. Proin viverra leo ut odio. Curabitur malesuada./dd

dtSection 4/dt

ddVivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc./dd

/dl

清单 4 中定义的列表也有一个分配给它的名为 accordion 的 CSS 类。没有应用任何 CSS，这个 accordion

1. 没有应用任何 CSS 的 accordion 结构

accordion 类用于将类型应用到整个定义列表、标题和内容区域。在清单 5 的示例中，accordion 类本身应用于宽度、边框、字体集和字体大小。清单 5 的示例中。您可以修改任何一个正在运行的 CSS 示例以包含您自定义的风格，比如颜色、字体、大小和间距。

清单 5. 用于定义整个定义列表样式的 accordion CSS 类

.accordion {

width: 500px;

border: 1px solid #ccc;

border-bottom: none;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

然后，您可以使用 accordion CSS 类定义标题 (dt) 和内容 (dd) 样式。标题和内容都包含一个设置底边框为 0 的共享样式，这允许标题栏和内容区域相互适宜地放置，如清单 6 所示。

清单 6. 与 accordion 标题和内容区域相关联的共享样式

.accordion dt,

.accordion dd {

border-bottom: 1px solid #ccc;

margin: 0px;

}

为了使 dt 元素看起来更像一个标题栏，设置一个背景色并添加一个指针光标，明显地呈现给用户该标题栏是可点击的。各种其他样式也都包括在这些类中，比如填充、字体大小和字体粗细。dd 元素添加了填充，将描述与标题隔开一点。清单 7 显示了一个示例。

清单 7. 与 accordion 标题和内容区域相关的 CSS 类

.accordion dt {

background: #eaeaea;

cursor: pointer;

padding: 8px 4px;

font-size: 13px;

font-weight: bold;

}

.accordion dd {

padding: 12px 8px;

}

有了这些增加的 CSS，视觉效果将会更完美、更像 accordion

关于js和jquery的一些构造函数的问题

self是方法的一个参数；

window.mapViewJs 的意思是window（代表整个浏览器的全局变量）的一个属性（或者方法），可以动态给window等对象添加属性（或者方法）的一种写法；

function(window,document)是作为执行带self参数的匿名函数执行时的一个参数（参数可以是固常量、变量、对象、方法、表达式等）；

您不知道如何称呼，我想说的是：没学会站稳，就开始学着人家跑了，首先方式就偏了。

建议你先站起来，走两步，走稳了再慢跑，慢慢的提高速度，然后就奔跑吧，兄弟~

jQuery 的功能

该博客基于阮一峰前辈在2011年所做的分享（原链接： ）

jQuery的核心就是：可以选择某个网页元素,然后对其进行某种操作

我们可知jQuery是一个构造函数，那么我们就可以通过选择表达式，把选中的元素，放进jQuery构造函数（$）当中，从而得到选中的元素。

而选择表达式可以是CSS选择器：

也可以是jQuery特有的表达式：

在jQuery当中最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，比如：

拆解开来，就是：

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作所返回的都是一个jQuery对象，所以不同操作可以连在一起。

jQuery还提供了.end()方法，使得结果集可以后退一步：

创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：

操作元素在网页中的位置移动有两种方法：

（1）直接移动该元素；

（2）移动其他元素，使得目标元素达到我们想要的位置。

（1）方法是使用.insertAfter()，把div元素移动p元素后面：

（2）方法是使用.after()，把p元素加到div元素前面：

表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。

使用这种模式的操作方法，一共有四对：

text(?) //读写文本内容

用于返回内容时，则返回所有匹配元素的文本内容（会删除 HTML 标记）。

用于设置内容时，则重写所有匹配元素的内容。

html(?) //读写HTML内容

设置或返回被选元素的 innerHTML（文本 + HTML 标记）

attr('title',?) // 读写属性

设置或返回被选元素的属性值。

css({color:'red'}) //读写style

设置或返回被选元素的一个或多个样式属性。

addClass('blue')

向被选元素添加一个或多个类。

该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。

on('click',fn)

支持动态绑定元素，即页面上元素有添加或变化后仍可绑定,前提是selector须是目标绑定元素的父元素

off('click',fn)

用于移除通过 on()方法添加的事件处理程序

如何用html字符串创建jquery对象

用html字符串创建jquery对象的方法是通过js预发构造出来的。

以下通过div的构造后，追加字符串为例来说明

1、创建一个js变量，存放构造div的表达式：

var string = 'divinput type="text" value="val" //div';

2、通过1创建的div，在其标签之间追加html内容：

$('div/').html(string).contents();

以上1和2主要执行过程如下：

$('div/')是一个并不存在的dom对象是通过执行js表达式动态构建出来的

$('div/').html(string) 追加string内容到div之间作为子节点

.contents()把上面创建的div作为jquery对象来检索内容，创建一个真正的div

jQuery源码中构造对象的方法有更简单的方法么

jQuery对象是由其prototype的init构造器进行构造实例，与prototype无关，可以抽离出来。

// 最新版本2.1.4

// 73行定义了jQuery构造函数

// Define a local copy of jQuery

jQuery = function( selector, context ) {

// The jQuery object is actually just the init constructor 'enhanced'

// Need init if jQuery is called (just allow error to be thrown if not included)

// 76行 jQuery对象通过prototype下的init方法进行构造并返回实例

return new jQuery.fn.init( selector, context );

},

// 92行 代码告诉我们 jQuery.fn 和 jQuery.prototype 是指向同一对象，也就是说fn是prototype的简写

jQuery.fn = jQuery.prototype = {

// The current version of jQuery being used

jquery: version,

// 96行修正constructor属性指回jQuery。同时jQuery对象虽然是用jQuery.fn.init方法构造，但constructor依然修正指向了jQuery，非为jQuery.fn.init，看下方代码

constructor: jQuery,

// 2735行 定义了jQuery.fn.init构造函数

init = jQuery.fn.init = function( selector, context ) {

// 2835行 使得jQuery.fn.init构造函数的原型和jQuery原型同时指向了同一个对象

// Give the init function the jQuery prototype for later instantiation

init.prototype = jQuery.fn;

// 9202行 而$仅仅只是jQuery对象的一个别名,跟无new构造无关

window.jQuery = window.$ = jQuery;

大概的代码结构就是这样子。

jQuery仅仅为了实现无new构造，在其原型下创建了init方法(仅充当构造器)为其构造实例对象，init方法的原型和jQuery原型指向了同一个对象（当然就成了循环引用），为后续的实例方法和实例插件机制打下基础(如果不指向同一对象写实例插件将会出现$.fn.init.fn.xxxxx这一幕)，并修正constructor的指向，使得看起来像是由jQuery构造器构造。

$只是jQuery对象的别名， $ === jQuery 是成立的，并且因为使用new操作符的时候 ( new jQuery() ) 和 jQuery() 的 reutrn 值会覆盖new操作符生成的实例，所以 jQuery() 和 new jQuery () 的结果也是一样的。

而题主示例是

1、 $是实现jQuery无new构造的方法

2、 $ !== jQuery

3、 jQuery() 和 new jQuery的结果是不同的

网站名称：jquery构造,jquery的语法结构
分享链接：http://kswjz.com/article/dsgejjo.html