读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 相关文章推荐
jQuery AjaxQueue改进步骤
Oct 06 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
js+css实现全屏侧边栏
Jun 16 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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
php字符串操作常见问题小结
2016/10/11 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
python 数据的清理行为实例详解
2017/07/12 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
基于python监控程序是否关闭
2020/01/14 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
哈弗商学院毕业生求职信
2014/02/26 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
大专生自荐书范文
2014/06/22 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers