读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 相关文章推荐
通过JAVAScript实现页面自适应
Jan 19 Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 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类中Static方法效率测试代码
2010/10/17 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
php多进程应用场景实例详解
2019/07/22 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
vue.js删除列表中的一行
2018/06/30 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
Python实现的堆排序算法示例
2018/04/29 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
创新型城市实施方案
2014/03/06 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
七一建党节演讲稿
2014/09/11 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
信访工作个人总结
2015/03/03 职场文书
九年级语文教学反思
2016/03/03 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript