读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 创建快捷方式的代码(fso)
Nov 19 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
谈谈node.js中的模块系统
Sep 01 Javascript
vue element和nuxt的使用技巧分享
Jan 14 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 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python中for循环控制语句用法实例
2015/06/02 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
python绘制趋势图的示例
2020/09/17 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
校长先进事迹材料
2014/02/01 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
治庸问责心得体会
2014/09/12 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
预备党员转正材料
2014/12/19 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
python神经网络ResNet50模型
2022/05/06 Python