读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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
让IE6支持min-width和max-width的方法
Jun 25 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
JSON相关知识汇总
Jul 03 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
创建与框架无关的JavaScript插件
Dec 01 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
Laravel框架表单验证操作实例分析
2019/09/30 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
Python中暂存上传图片的方法
2015/02/18 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
python中字典dict常用操作方法实例总结
2015/04/04 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
大学生饮食配送创业计划书
2014/01/04 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
返乡农民工证明
2015/06/24 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
python实现学员管理系统(面向对象版)
2022/06/05 Python