Greasemonkey教程2-元素的定位

请知悉：本文最近一次更新为 9年前，文中内容可能已经过时。

既然上一课，准备工作都做好了，脚本也建立好了，今天就来讲基础的功能-元素的定位。

脚本是基于jQuery的，那么下面介绍基础的元素定位的代码：
1.根据class定位元素：

$('.px')

一般因为class会复用，所以上述代码获取到的是一个集合，就是所有class是“px”的元素集合。这样的集合，通过each来遍历。

    $(".px").each(function(){
    console.log($(this).prop('outerHTML'));
    });

在each中，$(this)表示当前遍历的元素本身，console.log()功能是将结果输出到控制台，prop('outerHTML')的功能是取元素本身的代码。

eq(i)来调用元素，其中i从0开始计算，刚才说的第一个元素，则可以这样调用：

console.log($(".px").eq(0).prop('outerHTML'))

2.根据id定位元素：
从刚才的查看器或者输出我们已经知道，用户名输入框的id是：ls_username。密码输入框的id是：ls_password。
下述代码就实现了直接通过id定位元素：

$('#ls_username')

因为id是唯一的，所以不需要用eq和each筛选，想输出用户名的部分，就直接:

console.log($("#ls_username").prop('outerHTML'))

3.根据name定位元素：
从刚才的查看器或者输出我们已经知道，用户名输入框的id是：username。密码输入框的id是：password。
下述代码就实现了直接通过name定位input元素（当然，这个下面的name可以写成type来筛选不同类型的input）：

$("input[name='username']")

因为name是唯一的，所以不需要用eq和each筛选，想输出用户名的部分，就直接

console.log($("input[name='username']").prop('outerHTML'))

4.根据标签类型遍历定位元素：
从刚才的查看器或者输出我们已经知道，用户名和密码输入框都是input，所以可以通过input这个标签类型来遍历定位元素。

$("input")

至于遍历，上面已经讲过each了就不再重复代码了。

好了，将了四种办法定位元素，我们通过最简单的id定位到所需要的元素。更改input输入框的值，用的函数是是val()。

元素定位拓展：以下方法有兴趣的自己度娘谷歌下，积累整理下，未来也许你会用到。
.children() 和 find()向下查找.parents() 和 .closest() 向上查找
.parent()父元素

如您从本文得到了有价值的信息或帮助，请考虑扫描文末二维码捐赠和鼓励。

如本文对您有用，捐赠和留言 将是对我最好的支持~（捐赠可转为站内积分）
如愿意，请向朋友推荐本站，谢谢。

尊重他人劳动成果。转载请务必附上原文链接，我将感激不尽。

时鹏亮的Blog