读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的写法基础分析
Jan 17 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
JavaScript parseInt0.0000005打印5原理解析
Jul 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
9个实用的PHP代码片段分享
2015/01/22 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
Python中的异常处理简明介绍
2015/04/13 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
解决Python requests 报错方法集锦
2017/03/19 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
Django数据库操作之save与update的使用
2020/04/01 Python
pandas的resample重采样的使用
2020/04/24 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
奥地利网上书店:Weltbild
2017/07/14 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
校庆团日活动总结
2014/08/28 职场文书
商品陈列协议书
2014/09/29 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
创业计划书之干洗店
2019/09/10 职场文书
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript