jquery查找div下第一个input_jQuery属性选择器对象\筛选器方法

Ⅰ属性选择器<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>WOT</title><script src = 'jquery.min.js'></script></hea...

兔子313

1368人浏览 · 2021-01-05 00:37:00

兔子313 · 2021-01-05 00:37:00 发布

Ⅰ 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WOT</title>
    <script src = 'jquery.min.js'></script>
</head>
<body>
<input type="text" username="ht">
<input type="text" username="mt">
<p username="lt">势如鲲鹏，怒啸长空</p>
</body>
</html>

$('[username]');
S.fn.init(3) [input, input, p, prevObject: S.fn.init(1)]
$('[username="ht"]');
S.fn.init [input, prevObject: S.fn.init(1)]
$('[username="mt"]');
S.fn.init [input, prevObject: S.fn.init(1)]
$('[type="text"]');
S.fn.init(2) [input, input, prevObject: S.fn.init(1)]

Ⅱ 表单筛选器

$(':条件') // 专属于form表单的筛选器

<form action="">
<p><input type="text"></p>
<p><input type="password"></p>
<input type="button">
</form>

$('input[type="text"]')
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('input[type="password"]')
w.fn.init [input, prevObject: w.fn.init(1)]

$(':text')  # 等价于上面第一个
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$(':password')  # 等价于上面第二个
w.fn.init [input, prevObject: w.fn.init(1)]

: 选择
$(':text') // 只能用于查找form表单内的包含text属性的
$(':password') // 只能查找form标签内部的
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...等等
 
表单对象属性
:enabled
:disabled
:checked
:selected

特殊情况

$(':checked') # 它会将checked和selected都拿到
$(':selected') # 它不会 只拿selected
$('input:checked') # 当我们需要只拿到checked的时候需要自己加一个限制条件

Ⅲ 筛选器方法

<span id="d1"></span>
<span>span</span>
<div id="d2">
    <span>div>span</span>
    <p>
        div>p
        <span>
            <span id="d3">div>p>span</span>
        </span>
    </p>
    <span>div>span</span>
</div>
<span>span</span>
<span>span</span>
<span class="c1">span</span>

$('#d1').next() # 同级别下一个
$('#d1').nextAll() // 同级别下面所有
$('#d1').nextUntil('.c1') # 同级别往下找到最后,不包括.c1
$('.c1').prev() # 上一个
$('.c1').prevAll() // 上一个所有
$('.c1').prevUntil('#d2') // 同级别往上所有找到最前,不包含#d2
$('#d3').parent() # 第一级父标签
$('#d3').parent().parent() // 第二级父标签
$('#d3').parent().parent().parent() // 第三级父标签,最多到找到document
$('#d3').parents() // 祖宗十八代,默认到html为止
$('#d3').parentsUntil('body') // 祖宗十八代到body这个祖宗为止,不包含body
$('#d2').children() # 儿子
$('#d2').siblings() # 同级别上下所有

等价筛选
$('div p') // 在div里找p标签
$('div').find('p') # find从某个区域内筛选出想要的标签 

下述等价

$('div span:first') == $('div span').first()
$('div span:last') == $('div span').last()
$('div span:not("#d3")') == $('div span').not('#d3')

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐