工作有時會要寫js 公司的產品用的是mootools框架,記下以后好找
ELEMENT DOM選擇
//on are tag names. //All the divs on the page: $$('div'); //All the divs and paragraphs //note: this returns an array with all the divs first, //then all the paragraphs: $$('div', 'p'); //When you include Selectors.js, you can //pass in CSS selectors. //All the divs with the css class 'myClass': $$('div.myClass') /All the paragraphs that are inside divs: $$('div p'); //All the bold tags in paragraphs with //Class 'foo' in divs with class 'myClass': $$('div.myClass p.foo b');
| 可以繼承Selectors的DOM方法 | |
| Element.getElement | Element.getAllNext |
| Element.getElements | Element.getFirst |
| Element.match | Element.getLast |
| Element.getPrevious | Element.getParent |
| Element.getAllPrevious | Element.getParents |
| Element.getNext | Element.getChildren |
CSS3表達式選擇
//All the inputs where name equals 'email' $$('input[name=email]') //All the images with urls that end in .gif: $$('img[src$=gif]') //All the links without target="_blank": $$('a[target!=_blank]') Note that these expressions can take double or single quotes when you want to search for something that has a space or other character: $$('input[name!="user[username]"]') $$('img[src$=".gif"]')
| CSS3表達式匹配規則 | |
| = | 匹配給定的屬性是某個特定值的元素 |
| ^= | 匹配給定的屬性是以某些值開始的元素 |
| $= | 匹配給定的屬性是以某些值結尾的元素 |
| != | 匹配給定的屬性是不包含某個特定值的元素 |
| *= | 匹配給定的屬性是以包含某些值的元素 |
| ~= | 該屬性的值必須是一系列用空格隔開的多個值，(比如，class=”title featured home”)，而且這些值中的一個必須是指定的值”value”。 |
| |= | 屬性的值就是“value”或者以“value”開始並立即跟上一個“-”字符，也就是“value-”。(比如lang=”zh-cn”) |
基本選擇器
| 選擇器 | 描述 | 示例 | 備注 |
| #id | 根據給定的id匹配一個元素 | $$(‘#myid’)選取文檔中id為myid的一個元素 | |
| .class | 根據給定的類名匹配元素 | $$(‘.myclass’)選取文檔中所有class為myclass的元素 | |
| element | 根據給定的標簽名匹配元素 | $$(‘p’)選取文檔中所有的<p>元素 | |
| * | 匹配所有元素 | $$(‘*’)選取所有的元素 | IE中$$(‘*’)有問題 |
| Selector1, Selector2, …..,SelectorN |
將每一個選擇器匹配到的元素合並后一起返回 | $$(‘div’,’span’,'p.myclass’)選取所有<div>,<span>和class為myclass的<p>標簽的一組元素 | |
層次選擇器
| 選擇器 | 描述 | 示例 | 注意 |
| 后代選擇器 |
|||
| $$(‘ancestor descendant’) | 選取ancestor元素里的所有descendant（后代）.元素即ancestor(祖先),descendant(子孫)。 | $$(‘body div’) 選取body里的所有的div元素。 | 后代選擇器是基於一個元素是否是另一個元素的后代來決定是否應用樣式的 |
| 直接子選擇器 | |||
| $$(‘parent>child’) | 選取parent元素下的child(子)元素，與$$(‘ancestor descendant’)是有區別的，$$(‘ancestor descendant’)選擇的是后代元素。 | $$(‘body > div’) 選取body里元素是div的子元素。 | 選擇parent的直接子節點child. child必須包含在parent中並且父類是parent元素。 |
| 兄弟（相鄰）組合選擇器 |
|||
| $$(‘prev+next’) | 選取緊跟在prev元素后的下一個元素。 | $$(‘.one + div’) 選取class為one的下一個 div 元素。 | prev和next是兩個同級別的元素. 選中在prev元素后面的next元素。 |
| 普通兄弟組合選擇器 | |||
| $$(‘prev~siblings’) | 選取prev元素之后的所有siblings元素。 | $$(‘.two ~ div’)選擇 class為two的元素后面的所有div兄弟元素。 $$(‘#someDiv~[title]’)選擇id為someDiv的對象后面所有帶有title屬性的元素。 |
siblings是過濾器 |
過濾選擇器
| 選擇器 | 描述 | 示例 | 備注 |
| 基本過濾選擇器 | |||
| :index | 根據索引號查取元素 | 查找列表索引號是3的所有li ：$$(‘li:index(3)’) | 從 0 開始計數（自定義偽類選擇器） |
| :even | 匹配所有索引值為偶數的元素 | 查找列表li的1、3、5…行:$$(‘li:even’) | 從 0 開始計數（自定義偽類選擇器） 強烈推薦使用本選擇器來替代nth-child(even), 因為它返回的是實際的偶數序子元素. |
 dd |
匹配所有索引值為奇數的元素 | 查找列表li的1、3、5…行:$$(‘li:odd’) | 從 0 開始計數（自定義偽類選擇器） 強烈推薦使用本選擇器來替代nth-child(odd), 因為它返回的是實際的奇數序子元素. |
| 可見性過濾選擇器 | |||
| :enabled | 匹配所有可用元素 | $$(‘*:enabled’) $$(‘myElement’).getElements(‘:enabled’); |
（自定義偽類選擇器） |
| 內容過濾選擇器 | |||
| :empty | 匹配所有內容為空的元素 | $$(‘div:empty’); | |
| :contains(text) | 匹配含有文本內為“text”的元素 | $$("p:contains(‘find me’)"); | |
| :not(selector) | 檢測當前元素是否符合指定的CSS規則.
|
# 除 .foobar 以外的所有 <div> 的背景為黑色 $$(‘div:not(.foobar) ‘).setStyle(‘background’,'#000′); # 除 .foo 和 .bar 以外的所有 <h2> 的背景都為 #ccc $$(‘h2:not(.foo, .bar) ‘).setStyle(‘background’,’#ccc‘); |
|
| 子元素過濾選擇器 | |||
| :nth-child (expression) |
匹配其父元素下的第N個子或奇偶元素。 可以使用: 所有奇數序子元素: ‘:nth-child(odd)’ 所有偶數序子元素: ‘:nth-child(even)’ 無兄弟節點的子元素: ‘:nth-child(only)’ 第一個子元素: ‘nth-child(first)’ 最后一個子元素: ‘nth-child(last)’ |
在每個 ul 查找第 2 個li: $$(‘ul li:nth-child(2)’) |
:nth-child從1開始的。 |
| :first-child | 選取每個父元素的第一個子元素 |
在每個 ul 中查找第一個 li: $$(‘ul li:first-child’) |
|
| :last-child | 匹配最后一個子元素。 ‘:last’只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素 |
在每個 ul 中查找最后一個 li: $$(‘ul li:last-child’) |
|
| : only-child | 如果某個元素是父元素中唯一的子元素，那將會被匹配。 如果父元素中含有其他元素，那將不會被匹配。 |
在 ul 中查找是唯一子元素的 li: $$(‘ul li:only-child’) |
|
| 表單對象屬性過濾選擇器 | |||
| :selected | 匹配所有選中的option元素 | 查找所有選中的選項元素: $$(’select option:selected’) |
自定義偽類選擇器 |
| :checked | 匹配所有選中的被選中元素(復選框、單選框等，不包括select中的option) | 查找所有選中的復選框元素: $$(‘input:checked’) |
|
屬性過濾選擇器
| 名稱 | 描述 | 示例 |
| [attribute] | 匹配包含給定屬性的元素 | 查找所有含有 id 屬性的 div 元素: $$(‘div[id]‘) |
| [attribute=value] | 匹配給定的屬性是某個特定值的元素 | 查找所有 name 屬性是 newsletter 的 input 元素: $$(“input[name='newsletter']“).attr(‘checked’, true); |
| [attribute!=value] | 匹配給定的屬性是不包含某個特定值的元素 | 查找所有 name 屬性不是 newsletter 的 input 元素: $$(“input[name!='newsletter']“).attr(‘checked’, true); |
| [attribute^=value] | 匹配給定的屬性是以某些值開始的元素 | $$(“input[name^='news']“) |
| [attribute$=value] | 匹配給定的屬性是以某些值結尾的元素 | 查找所有 name 以 ‘letter’ 結尾的 input 元素: $$(“input[name$='letter']“) |
| [attribute*=value] | 匹配給定的屬性是以包含某些值的元素 |
查找所有 name 包含 ‘man’ 的 input 元素: |
| [attribute~=value] | 該屬性的值必須是一系列用空格隔開的多個值，(比如，class=”title featured home”)，而且這些值中的一個必須是指定的值”value”。 | 查找所有的a 元素，並且class屬性中含有tit的元素 $$(‘a[class~=tit]‘) |
| [attribute|=value] | 屬性的值就是“value”或者以“value”開始並立即跟上一個“-”字符，也就是“value-”。(比如lang=”zh-cn”) | 該語句將匹配所有class屬性包含”post”並帶”-”字符的div元素。 $$(“[class|='post'] “) |
| [attributeFilter1] [attributeFilter2] [attributeFilterN] |
復合屬性選擇器，需要同時滿足多個條件時使用。 | 找到所有含有 id 屬性，並且它的 name 屬性是以 man 結尾的: $$("input[id][name$='man']") |