读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 cookie操作代码
Mar 14 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
javascript修改图片src的方法
Jan 27 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
JS实现分页导航效果
Feb 19 Javascript
原生js实现日历效果
Mar 02 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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中全局变量global的使用演示代码
2011/05/18 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
php图像验证码生成代码
2017/06/08 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
python pandas 时间日期的处理实现
2019/07/30 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
印尼购物网站:iLOTTE
2019/10/16 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
人事专员职责
2014/02/22 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
模范班主任事迹材料
2014/12/17 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python