读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 相关文章推荐
奇妙的js
Sep 24 Javascript
javascript 页面划词搜索JS
Sep 28 Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
js实现div在页面拖动效果
May 04 Javascript
js+css3实现旋转效果
Jan 20 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
vue常用高阶函数及综合实例
Feb 25 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 远程关机实现代码
2009/11/10 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
Python函数参数类型*、**的区别
2015/04/11 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
Python实现多线程的两种方式分析
2018/08/29 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
后勤人员自我鉴定
2013/10/20 职场文书
财产公证书
2014/04/10 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
广告业务员岗位职责
2015/02/13 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
MySQL数据库 安全管理
2022/05/06 MySQL