Day22 jQuery 基本教学(二)

selector 选取

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 的都中

<<:  Backtrader - 指标使用

>>:  [DAY21] 非同步的 Boxenn Use Case

前言

大家好我是 KAI,这是我第一次参与 IT 铁人赛。 这次打算用30天的时间去复习并练习网页设计,把...

Day 7. Hashicorp Nomad: Inspect a job

Hashicorp Nomad: Inspect a job 当一套工具有一个好的Web UI可以使...

day18: pure function

今天我们提到 pure function,那相对的也会有, not a pure function,...

[Day_27]函式与递回_(6)

关键字引数(keyword arguments) 关键字引数(函式输入变数的前方使用「**」)会将函...

【设计+切版30天实作】|Day5 - 做出3栏式「痛点」设计

设计大纲 早安!今天来设计痛点,这边我想要做三栏式,列出三个他们目前主要可能会遇到的问题,再加上图片...