读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 相关文章推荐
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
微信小程序实现星级评价
Nov 20 Javascript
原生js实现二级联动菜单
Nov 27 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自动给文章加关键词链接的函数代码
2012/11/29 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
浅谈Javascript事件模拟
2012/06/27 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
Seajs的学习笔记
2014/03/04 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
详解JS数值Number类型
2018/02/07 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
Python实现求笛卡尔乘积的方法
2017/09/16 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
Python 控制终端输出文字的实例
2019/07/12 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
Python函数基本使用原理详解
2020/03/19 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
计算机应用毕业生自荐信
2013/10/23 职场文书
财产公证书
2014/04/10 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
植物园观后感
2015/06/11 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang