Mootools 1.2教程(2)——DOM选择器
作者:Fdream 来源:Fdream博客 发布时间:2008-11-13 12:46:00
原文地址:30 Days of Mootools 1.2 Tutorials - Day 2 - Selectors
如果你还没有准备好,请先阅读上一篇《Mootools 1.2教程(1)——MooTools介绍》。我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本。
今天开始本系列教程的第2讲。在这一讲中,我们会学习几种选择HTML元素的方法。在许多方面,这是MooTools用得最多最基本的。毕竟,要创建一个基于HTML元素的交互性用户体验,你必须首先把它们掌握在手中。
基本的方法
$();
$函数是MooTools中基本的选择器。你可以通过它来根据一个ID选择DOM元素。
参考代码:
// 选择ID为”body_wrap“的元素
$('body_wrap');
参考代码:
<div id="body_wrap">
</div>
.getElement();
.getElement();扩展了$方法,可以让你简化你的选择操作。例如,你可以通过$方法来选择ID为”body_wrap“的元素,然后选择第一个子节点。.getElement();只选择一个元素,如果有多个符合要求的元素则返回第一个元素。如果你给.getElement();方法一个CSS类名作为参数,你就会得到第一个有这个CSS类名的元素,而不是函数所有元素的数组。要选择多个元素,则可以使用下面的.getElements();方法。
参考代码:
// 选择ID为”body_wrap“的元素下面的第一个链接
$('body_wrap').getElement('a');
// 选择ID为”body_wrap“的元素下面的ID为”special_anchor“的元素
$('body_wrap').getElement('#special_anchor');
// 选择ID为”body_wrap“的元素下面第一个CSS类名为”special_anchor_class“的元素
$('body_wrap').getElement('.special_anchor_class');
参考代码:
<div id="body_wrap">
<a href="#">anchor</a>
<a href="#">another anchor</a>
<a id="special_anchor" href="#">special anchor</a>
<a class="special_anchor_class" href="#">special anchor</a>
<a class="special_anchor_class" href="#">another special anchor</a>
</div>
$$();
$$函数可以可以让你快速选择多个元素,并组成一个数组(一种你可以操作、获取和以任何方式重新排序的列表)。你可以通过标签名(如div、a、img等)、或者ID或者是他们的各种组合来选择多个元素。就像一个读者指出的那样,你可以用$$做很多事情,远远超出我们这里所介绍的。
参考代码:
// 选择这个页面中的所有div
$$('div');
// 选择ID为”id_name的元素和所有的div
$$('#id_name', 'div');
参考代码:
<div>
<div>a div</div>
<span id="id_name">a span</span>
</div>
.getElements();
.getElements();和.getElement();非常类似,不过它返回所有符合要求的元素,并组成一个数组。你可以想使用.getElement();方法那样使用.getElements();。
参考代码:
// 选择ID为”body_wrap“的元素下面的所有链接
$('body_wrap').getElements('a');
// 选择ID为”body_wrap“的元素下面的所有CSS类名为”special_anchor_class“的子元素
$('body_wrap').getElements('.special_anchor_class');
参考代码:
<div id="body_wrap">
<a href="#">anchor</a>
<a href="#">another anchor</a>
<a class="special_anchor_class" href="#">special anchor</a>
<a class="special_anchor_class" href="#">another special anchor</a>
</div>
猜你喜欢
- 背景简介ImageAI是一个面向计算机视觉编程的Python库,支持最先进的机器学习算法。主要图像预测,物体检测,视频对象检测与跟踪等多个应
- 最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是
- radians()方法把角度转化为弧度角x。语法以下是radians()方法的语法:radians(x)注意:此函数是无法直接访
- 全局作用域下this;当在全局作用域中使用 this,它指向全局对象。这里详细介绍下全局对象:全局对象(Global object) 是在进
- 前言飞桨(PaddlePaddle)是集深度学习核心框架、工具组件和服务平台为一体的技术先进、功能完备的开源深度学习平台1. 任务描述乘坐出
- MySQL数据库在升级到5.7版本后,和之前的版本有些不一样,没有data文件夹,我们都知道MySQL数据库文件是保存在data文件夹中的,
- matplotlib简介如果你在大学里参加过数学建模竞赛或者是用过MATLAB的话,相比会对这一款软件中的画图功能印象深刻。MATLAB可以
- 1. 环境准备1.1 安装pillow 和 pytesseractpython模块库需要 pillow 和 pytesseract 这两个库
- Cookie 对象是一种以文件(Cookie文件)的形式保存在客户端硬盘的Cookies文件夹中的数据信息(Cookie数据)。Cookie
- 1.锦短情长为什么选择这个标题,借鉴了一封情书里面的情长纸短,还吻你万千。锦短情长都只谓人走茶凉,怎感觉锦短情长?一提起眼泪汪汪,是明月人心
- 在go语言的源码中,会发现很多,代码只有函数签名,却看不到函数体,如:// src/os/proc.go 68行func runtime_b
- Python字符串和字典相关操作的实例详解字符串操作:字符串的 % 格式化操作:str = "Hello,%s.%s enough
- (asp.net的应用). 在网上一搜有很多此类文章,但我需要将公司的复杂的,较大的web应用也以此方式操作,比较的头大。一般的文章建议将b
- 本来非常喜欢偷懒最好就是不干活那种所以最近在研究把Jenkins模块集成起来做成傻瓜界面这样就给他们用本人Python搓望大神不要喷,多多指
- 1、给定的日期格式相同,则使用简单的比较运算符来比较日期。<?php//声明两个日期、初始化$date1 = "2021-1
- 如下所示:找了好久,今天无意中敲出来了:ctrl+l(小写)全局查找某个变量:ctrl+h我用的Eclipse快捷键来源:https://b
- 今天继续给大家介绍MySQL相关知识,本文主要内容是MySQL索引相关内容。一、MySQL索引简介索引是MySQL数据库为了加快数据查询的速
- 前言最近在公司售前售后同事遇到一些奇怪的需求找到我,需要提供公司一些项目数据库所有表的结构信息(字段名、类型、长度、是否主键、***、备注)
- 引言webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分,具体的用法就不做过多介
- Python 安装Graphviz 详细教程Python安装Graphviz画图器首先,要明确他是一个独立的软件,如果大家用pip的方法装了