读jQuery之三(构建选择器)


Posted in Javascript onJune 11, 2011

为了叙述每一篇的重点,其示例代码都是最精简的,比如选择器只能传HTMLElement和id。

这篇我们增强下选择器,依据2/8原则,这里仅实现最常用的几种。

1, 通过id获取,该元素是唯一的
$('#id')

2, 通过className获取
$('.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获取
$('span') 获取文档中所有的span元素
$('span', el) 获取指定元素中的span元素, el为HTMLElement (不推荐)
$('span', '#id') 获取指定id的元素中的span元素

4, 通过attribute获取
$('[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://demo.3water.com/js/2011/zchain/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之三(构建选择器)


http://demo.3water.com/js/2011/zchain/zchain-0.3.js
Javascript 相关文章推荐
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
js css自定义分页效果
Feb 24 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
读jQuery之二(两种扩展)
Jun 11 #Javascript
读jQuery之一(对象的组成)
Jun 11 #Javascript
基于jquery的无刷新分页技术
Jun 11 #Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 #Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 #Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 #Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 #Javascript
You might like
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
php-fpm中max_children的配置
2019/03/15 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
angular 服务随记小结
2019/05/06 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
详解Python中的多线程编程
2015/04/09 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
浅谈Python中的bs4基础
2018/10/21 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
工商企业管理实习自我鉴定
2013/12/04 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
社会实践活动总结报告
2014/04/29 职场文书
企业文明单位申报材料
2014/05/16 职场文书
交通安全标语
2014/06/06 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
实习协议书
2015/01/27 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
恰同学少年观后感
2015/06/08 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技