读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周历选择器”利用jQuery的灵活性和易用性，构建了一个适用于混合应用程序（Hybrid App）的周历选择器组件。 1. **周历选择器设计**： - 周历选择器通常用于日程管理或时间规划应用，显示一周的日期...
jQuery时间选择器是基于流行的JavaScript库jQuery构建的，它的主要目标是简化用户在网页上输入时间的过程。这种选择器通常包含小时和分钟的下拉菜单，或者有时还包括秒和AM/PM选项，使得用户可以快速准确地选择所需...
《jQuery商品价格选择器详解与应用》 在Web开发中，jQuery库因其简洁易用的API和强大的功能，被广泛应用于各种交互设计中。本文将深入探讨如何利用jQuery实现一个商品价格选择器，以提升用户体验并优化购物过程。 ...
《jQuery城市选择器详解》 在网页开发中，常常需要为用户提供便捷的城市选择功能，以满足用户在填写地址或选择服务区域时的需求。jQuery城市选择器便是为此而设计的工具，它结合了jQuery库的强大功能，实现了高效、...
在给定的“jQuery树结构菜单选择器代码.zip”压缩包中，我们关注的是如何利用jQuery来创建一个树形结构的菜单选择器。这种组件在网页设计中广泛用于导航和数据组织，特别是对于具有层级关系的数据展示，如目录结构、...
由于基于jQuery，timepickr可以与众多其他jQuery插件无缝集成，如表单验证插件、日期选择器等，共同构建更复杂的用户界面。 7. **常见问题与解决策略** 在实际使用过程中，可能会遇到时间格式不正确、插件加载...
**jQuery基本选择器** jQuery库是JavaScript中最广泛使用的库之一，它简化了DOM操作、事件处理和动画制作。其中，选择器是jQuery的核心功能之一，它使得能够高效地选取页面中的HTML元素。以下是对jQuery基本选择器...
在本文中，我们将深入探讨jQuery日期时间选择器插件，这是一种高效、美观的JavaScript解决方案，用于在网页上添加交互式的日期和时间选择功能。这款插件利用jQuery库的强大功能，为用户提供了简单易用的界面，使他们...
总的来说，jQuery时间选择器是前端开发中的一个重要工具，它通过便捷的API和丰富的自定义选项，帮助开发者快速构建出用户友好的时间输入界面，提升了网页应用的交互体验。对于想要深入学习前端交互设计和jQuery应用...
总的来说，jQuery二级、三级城市选择器是前端开发中常见的交互组件，通过熟练掌握上述技术点，可以构建出高效、易用且具有良好用户体验的地理选择功能。在实际项目中，还可以结合现代前端框架如React或Vue.js，...
"jquery双向选择器代码"这个主题涉及的是jQuery中一种特殊的选择器机制，它允许我们从DOM（文档对象模型）中选取元素，同时还能根据某个元素选取其关联的元素，实现数据的双向绑定或者元素间的交互效果。这种功能在...
- 引入jQuery库：确保你的页面已经加载了jQuery，因为插件是基于jQuery构建的。 - 引入插件：将插件的JavaScript和CSS文件添加到你的HTML文档中。 - 初始化插件：通过JavaScript代码调用插件，并指定与之关联的...
jQuery颜色选择器是一种在网页开发中常用的前端工具，它极大地简化了用户在网页上选取颜色的过程。这个插件，称为colpick，是基于jQuery库构建的，为网页设计师和开发者提供了一个直观、易于集成的颜色选择界面。...
这个插件的核心在于JavaScript和CSS，它们共同构建了颜色选择器的交互逻辑和视觉样式。JavaScript部分负责监听用户的操作，更新颜色选择状态，并与HTML元素进行交互。CSS则定义了颜色选择器的布局和外观。在源码中，...
其中，jQuery UI是jQuery的一个扩展库，提供了一系列可交互的用户界面组件，其中包括我们今天要讨论的"日期选择器"——jQuery UI Datepicker。这个插件允许用户方便地选择日期，甚至可以扩展到选择时间，实现年月日...
4. **初始化插件**：在页面加载完成后（通常在`$(document).ready()`函数中），使用jQuery选择器找到元素并调用颜色选择器插件的初始化方法，设置相关配置，如预设颜色、回调函数等。 5. **事件监听**：你可以监听...
总的来说，这款【强大实用的jQuery日期时间选择器集合插件】是前端开发中的得力助手，它整合了Bootstrap的美观和jQuery的便捷，提供了丰富的日期时间选择功能，让开发者能够快速构建出用户友好的网页应用。...
1. **DOM操作**：jQuery提供了方便的DOM（文档对象模型）操作方法，如`$(selector).html()`用于设置元素内容，`$(selector).append()`用于添加子元素，这些在构建和更新选择器的结构时非常有用。 2. **事件处理**：...