jq - 获取元素

2018-01-11

任何元素，即使处于不同的结构，也应能通过各种方式获取相应的元素值，或通过自身，或通过同级。

假设原本的 dom 结构为以下结构：


    
        第一代孩子
        第二代孩子
    
    
        孩子
        第二代孩子

获取某个类（.类名）
1
$('.parent')

获取某个 id （#id名）

1 2	$('#baba') $('#s_child, #ss_child') // 获取两个元素，用逗号隔开

获取某个属性值元素，如果是自定义标签，格式为：标签[data-自定义名称]），如果是标签自身的属性，格式应为：标签:属性
1
2
$('div[data-name]')
$('select>option:selected').val() // 获取选中的 select 框的值，与$('select').val() 等值

获取子元素

$('#baba div') // 返回 baba 的所有后代，包括一代和二代
$('.parent div') // 同上
$('#baba>div') // 返回第一代
$('#baba div').eq(n) // 返回 baba 的第 n 个后代，从 0 开始，如果为 0 ，返回 xiaoming 的节点
$('#baba div').first() // 返回 baba 的第一个后代，即 xiaoming
$('#baba div').last() // 返回 baba 的最后一个后代，即 ss_child

获取父元素

1
2
3

$('.s_child').parent()  // 获取到第二个 div
$('.s_child').parent().parent() // 获取到第一个 div ，即 baba
$('.s_child').closest('.parent') // 往上查找，一查到类名为 parent 的元素就停止，并返回查到的节点 baba

获取兄弟节点

1
2
3

$('#xiaoming').sibling() // 返回所有兄弟节点
$('#xiaoming').next() // 返回下一个节点，即 xiaowang
$('#xiaowang').prev() // 返回上一个节点，即 xiaoming

| 阅读量()