读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 相关文章推荐
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
js检测用户输入密码强度
Oct 22 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
读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文件下载处理方法分析
2015/04/22 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
php实现微信企业转账功能
2018/10/02 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
当json键为数字时的取值方法解析
2013/11/15 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
Python程序语言快速上手教程
2012/07/18 Python
Python中的rjust()方法使用详解
2015/05/19 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
python之语音识别speech模块
2020/09/09 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
经典英文广告词
2014/03/18 职场文书
体育口号大全
2014/06/18 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB