既然上一课,准备工作都做好了,脚本也建立好了,今天就来讲基础的功能-元素的定位。
脚本是基于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()父元素
如您从本文得到了有价值的信息或帮助,请考虑扫描文末二维码捐赠和鼓励。
如本文对您有用,捐赠和留言 将是对我最好的支持~(捐赠可转为站内积分)
如愿意,请向朋友推荐本站,谢谢。
尊重他人劳动成果。转载请务必附上原文链接,我将感激不尽。