JQ 的 DOM 存取方式是透过 selector 来达到索引目标,会先转换为 jQuery 之元件来取得後续行为。选取元件的方式范围广泛,主要概念采用了同於 CSS 的层级观念。
基本的选择器写法:
$(selector)
selector 为文字串格式,方式如下:
selector 可以是全部,tagName,id,class…也能多选 selector,像是#one,#two 这样同时多种不同对象合并选取,也能将外部的自身物件用 this 指定
selector(选取) | 说明 |
---|---|
$(“*”) | 所有的 HTML 都列入选取 |
$(“p”) | 找到 element 为 p 标签之选取 |
$(“#header”) | 找到 id 为”header”之选取 |
$(“.hot”) | 找到 class 为”myclass”之选取 |
$(“#one,#two”) | 多选 (or) 对象,譬如找#one 或#two,使一起共同选择 |
$(“#one”).add(“#two”) | 多选 (or) 对象,譬如找#one 或#two,使一起共同选择 |
$(this) | 同 JavaScript 观念,传入前一个外部元件的本体 |
用CSS的选择器为观念,使用节点层级做选取,弹性容易取得
选取的层级观念 | 说明 |
---|---|
$(“h1#header”) | 找到该 h1 且 id=header |
$(“ul li”) | 找到该 ul 位置之子孙层级的标签 li |
$(“ul>li”) | 找到该 ul 位置之子层级的标签 li |
多笔结果下,能进行不同过滤筛选条件
筛选条件 | 说明 |
---|---|
$(“li:not(.hot)”)、$(“li”).not(“.hot”) | 找到 li 标签对象且该标签不能有.hot |
$(“li:first”)、$(“li”).first() | 找到 li 标签对象之第一笔 |
$(“li:last”)、$(“li”).last() | 找到 li 标签对象之最後笔 |
$(“li:even”) | 找到 li 标签对象之偶数笔 |
$(“li:odd”) | 找到 li 标签对象之奇数笔 |
$(“li:eq(n)”)、$(“li”).eq(n) | 找到 li 标签对象之第 n 笔,初值=0 |
$(“li:contains(‘我’)”) | 找到 li 标签内含文字”我”之选取 |
$(“ul:has(li)”)、$(“ul”).has(“li”) | 找到 ul 标签且持有 li 之选取(取 ul) |
能根据 tag 里面的属性 (attr) 做选取,透过多种比较式去检查布林条件
筛选依属性 | 说明 |
---|---|
$(“input[type=button]”) | 找到 input 标签且 type 为 button |
$(“input[type!=button]”) | 找到 input 标签且 type 不是 button |
$(“input[value^=aa]”) | 找到 input 标签且 value 开头为 aa |
$(“input[value$=aa]”) | 找到 input 标签且 value 结尾为 aa |
$(“input[value*=aa]”) | 找到 input 标签且 value 中间为 aa |
$(“input[value/=aa]”) | 找到 input 标签且 value 开头为aa- |
$(“input[type=button][value=”is loki”]”) | 找到符合多笔属性值 |
tagName 是 input 相关的互动表单型,能透过:type 去找到,也包含 checked 或 selectd 性质
选择为表单类型 | 说明 |
---|---|
$(“:input”) | 所有输入项目都中 |
$(“:text”) | 所有 input:text 都中 |
$(“:checked”) | 所有被勾选 checked 的都中 |
>>: [DAY21] 非同步的 Boxenn Use Case
大家好我是 KAI,这是我第一次参与 IT 铁人赛。 这次打算用30天的时间去复习并练习网页设计,把...
Hashicorp Nomad: Inspect a job 当一套工具有一个好的Web UI可以使...
今天我们提到 pure function,那相对的也会有, not a pure function,...
关键字引数(keyword arguments) 关键字引数(函式输入变数的前方使用「**」)会将函...
设计大纲 早安!今天来设计痛点,这边我想要做三栏式,列出三个他们目前主要可能会遇到的问题,再加上图片...