读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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
JS中封装axios来管控api的2种方式
Sep 11 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的cms
2010/12/19 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
用js编写留言板
2020/03/17 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Python中文编码那些事
2014/06/25 Python
Python map和reduce函数用法示例
2015/02/26 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
家长学校培训材料
2014/08/20 职场文书
业务员管理制度范本
2015/08/06 职场文书