读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 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
JS倒计时两种实现方式代码实例
Jul 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验证码类代码分享(已封装成类)
2011/07/17 PHP
PHP面向对象概念
2011/11/06 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
javascript Select标记中options操作方法集合
2008/10/22 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
javascript arguments使用示例
2014/12/16 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
jQuery实现径向动画菜单效果
2015/07/17 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
Python内存管理实例分析
2019/07/10 Python
python的pstuil模块使用方法总结
2019/07/26 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
办公室文员工作职责
2014/01/31 职场文书
如何写好自荐信
2014/04/07 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
检讨书怎么写
2015/01/23 职场文书