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

脚本是基于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()父元素

Related Posts: Greasemonkey教程2-元素的定位 :