读jQuery之三（构建选择器）
前面两篇已经道明了jQuery的核心框架。弄清楚了jQuery对象的组成，以及如何用extend方法来扩展库。链式操作 也仅仅是方法体内返回this。
为了叙述每一篇的重点，其示例代码都是最精简的，比如选择器只能传HTMLElement和id。
这篇我们增强下选择器，依据2/8原则，这里仅实现最常用的几种。
1, 通过id获取,该元素是唯一的
|
1
|
$('#id')
|
2, 通过className获取
|
1
2
3
4
5
6
|
$('.cls') // 获取文档中所有className为cls的元素
$('.cls', el)
$('.cls', '#id')
$('span.cls') // 获取文档中所有className为cls的span元素
$('span.cls', el) // 获取指定元素中className为cls的元素, el为HTMLElement (不推荐)
$('span.cls', '#id') // 获取指定id的元素中className为cls的元素
|
3, 通过tagName获取
|
1
2
3
|
$('span') // 获取文档中所有的span元素
$('span', el) // 获取指定元素中的span元素, el为HTMLElement (不推荐)
$('span', '#id') // 获取指定id的元素中的span元素
|
4, 通过attribute获取
|
1
2
3
4
5
6
7
8
9
|
$('[name]') // 获取文档中具有属性name的元素
$('[name]', el)
$('[name]', '#id')
$('[name=uname]') // 获取文档中所有属性name=uname的元素
$('[name=uname]', el)
$('[name=uname]', '#id')
$('input[name=uname]') // 获取文档中所有属性name=uname的input元素
$('input[name=uname]', el)
$('input[name=uname]', '#id')
|
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zchain test</title>
<script src="http://files.cnblogs.com/snandy/zchain-0.3.js"></script>
</head>
<body>
<div id='content'>aaa</div>
<div>bbb</div>
<p class="pra">ccc</p>
<input type="submit" value="submit"/>
<input type="button" value="submit"/>
<script type="text/javascript">
var obj1 = $("#content"); // id
var obj2 = $('div'); // tagName
var obj3 = $('.pra'); // className
var obj4 = $('input[type=button]'); // attribute
console.log(obj1);
console.log(obj2);
console.log(obj3);
console.log(obj4);
</script>
</body>
</html>
Firebug输出如下
相关推荐
jQuery 1.8.1中重写了选择器引擎，大大提升了性能。此外，选择器引擎Sizzle修复了一些边缘问题和bug，包括对于多个选择符（~ > +）的改进、更好地检测浏览器bug等。 5. XSS防护 $()方法可以创建HTML元素，如果...
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript...
jQuery UI实际上是jQuery插件，专指由jQuery官方维护的UI方向的插件 jQuery UI 与 jquery 的主要区别是： (1) jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。 (2) jQuery UI则是在jQuery的...
jQuery 1.8中重写了选择器引擎，大大提升了性能。此外，选择器引擎Sizzle修复了一些边缘问题和bug，包括对于多个选择符（~ > +）的改进、更好地检测浏览器bug等。 5. XSS防护 $()方法可以创建HTML元素，如果被...
超实用的jQuery代码段精选近350个jQuery代码段，涵盖页面开发中绝...11.29 在类选择器前用标签选择器加快速度 11.30 缓存jQuery对象以提升性能 11.31 使用find（）函数提升子查询的性能 11.32 使用jQuery操作DOM的限制
jQuery中的一切都构建于这个函数之上，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果...
一个简单的基于jQuery的字体选择器 一个Angular指令，用于包装基于jQuery的字体选择器 一个简单的基于jQuery的字体大小选择器 一个Angular指令，用于包装基于jQuery的字体大小选择器 如何使用组件？ 在您的使能的...
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
jQuery就是如此强大，你可以轻易地找到DOM中的任何元素，而这也是jQuery设计之初query的真实含义（查询）。 编辑本段Jquery对象 jquery提供了很多便利的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象...
jQuery的一个月选择器。 基于jQuery UI小部件工厂（ ）构建。 依赖关系：jQuery，jQuery UI小部件工厂 演示： : 实例化 $(".someElement").monthPicker(options); 选项 可以使用以下属性将options对象传递给...
支持jQuery所有的选择器语法，只要控件有唯一ID和type属性 支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js，你可以自由的添加、修改里面的内容。 支持2种校验模式。第一种：文字提示(showword模式...
jQuery中的一切都构建于这个函数之上，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果...
jQuery UI输入选择器这是一个jQuery UI输入选择器插件，旨在与其他官方jQuery UI小部件匹配。 它将很好地将多列视图与您的表单融合在一起。 该插件很容易集成到您的表单中以供您输入。 我之所以构建此插件，是因为我...
(1) jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。 (2) jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小...
//构建jQuery对象 jQuery = function( selector, context ) { //jQuery对象是实际上初始化名为enhanced(提高的)构造器 //jQuery对象实际上只是增强的初始化构造方法 return new jQuery.fn.init( selector, ...
一:$(selectorStr[,限制范围]),接受一个选择器(符合jQuery规范的字符串),返回一个jQuery对象; 代码如下: //$(selector[,限制范围]) $(“.guo”).click(function () {//这里没有context参数 $(“a.aguo”, this)....
生成器-jquerify 使用jquery方式构建一个新项目入门自耕农发电机约曼轻装上阵。 他搬进来的时候没有带任何发电机。你可以把发电机想象成一个插件。 您可以选择要创建的应用程序类型，例如 Backbone 应用程序甚至 ...
特征DOM 选择器CSS设置器属性设置器事件开/关集成了 Brew 库（dom builder）例子 //Create a Selector. var $allDivsElements = $ ( 'div' ) ; var $myBody = $ ( 'body' ) ;//Iterate over the selection var $...