读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的deferred对象使用详解
Aug 20 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
前端深入理解Typescript泛型概念
Mar 09 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中trim()函数简单使用指南
2015/04/16 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python的类方法和静态方法
2014/12/13 Python
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
Python简单读取json文件功能示例
2017/11/30 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
Python中常用的内置方法
2019/01/28 Python
python实现对输入的密文加密
2019/03/20 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
想学画画?python满足你!
2020/12/24 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
大学毕业感言一句话
2014/02/06 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
大学生毕业个人总结
2015/02/15 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
Java 在线考试云平台的实现
2021/11/23 Java/Android
redis protocol通信协议及使用详解
2022/07/15 Redis