读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 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
mocha的时序规则讲解
Feb 16 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
Vue watch响应数据实现方法解析
Jul 10 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中文本操作的类
2007/03/17 PHP
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
PHP读取xml方法介绍
2013/01/12 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
群众路线教育实践活动调研报告
2014/11/03 职场文书
高中生物教学反思
2016/02/20 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
聊聊redis-dump工具安装问题
2022/01/18 Redis
mybatis 获取更新记录的id
2022/05/20 Java/Android
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers