读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应用之禁止抓屏、复制、打印
Feb 21 Javascript
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
javascript关于继承解析
May 10 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
详解python并发获取snmp信息及性能测试
2017/03/27 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
Python函数装饰器实现方法详解
2018/12/22 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
爽歪歪广告词
2014/03/20 职场文书
设计顾问服务计划书
2014/05/04 职场文书
个人校本研修方案
2014/05/26 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
CSS极坐标的实例代码
2021/06/03 HTML / CSS
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
使用Django框架创建项目
2022/06/10 Python
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript