夕辞

jQuery根据name查找元素 | 夕辞夕辞

jQuery根据name查找元素

前端开发中,有时需要根据name来获取dom元素,在原生的JavaScript中,有专门的方法,如下:

document.getElementsByName('元素name');

在html中,name是可以重复的,例如radio按钮就是利用name相同来达到选择互斥的效果,因此是getElements,复数形式。
在jQuery中,选择器并没有对name做专属处理,而是把他当做了dom元素的一个普通属性来查询的,例如在以下HTML中:

<input name="test" id="test_id"/>

我们如果想通过name查询到该元素,可以利用jQuery的属性选择器,代码如下:

var inputs = $('[name=test]');

这样就能实现根据name查询元素的效果。
PS:同样,属性选择器是强大的,class、id以及自定义属性都可以查询到,例如我们定义以下自定义属性:

<input diy_attr="0"/>

那我们可以通过下面简单的代码就能拿到我们自定义属性的元素:

var diys = $('[diy_attr=0]');

HTML在浏览器解析后,最终形成的是树状结构的数据,每层数据都包含属性,因此通过属性查找是最基本的查询手段,而id、class等则是特殊处理以方便查询的属性。

回到顶部