不讲废话,直接主题
一、总览
二、元素获取
1、原生获取
2、jq获取
三、元素操作
$0 代表当前元素,下面给几个典型的例子,其他以此类推。
1、文本框
$0.value = "United States"
2、下拉框
$0.value = "United States"
$0.options[1].selected =true
四、事件触发
事件文档: https://developer.mozilla.org/en-us/docs/Web/API/Event/Event
1、直接触发
$0.click()
2、jq触发
$0.trigger("click");
3、原生触发
$0.dispatchEvent(new Event("click"))
IE使用
$0.fireEvent(new Event("click"))
五、demo
1、滑动
//滑块
function sendEvent(elem, event, clientX, clientY) {
var mousemove = new MouseEvent(event,{
bubbles: true,
clientX: clientX,
clientY: clientY,
});
elem.dispatchEvent(mousemove);
}
function dragandDrop(elem, distance) {
var x = 0, interval;
var rect = elem.getBoundingClientRect();
var startx = Math.floor(rect.x + rect.width / 2);
var starty = Math.floor(rect.y + rect.height / 2);
sendEvent(elem, "mousedown", startx, starty);
interval = setInterval(function() {
x++;
sendEvent(elem, "mousemove", startx + x, starty);
if (x >= distance) {
clearInterval(interval);
sendEvent(elem, "mouseup", x, 0);
}
}, 10);
}
dragandDrop(document.getElementById("tcaptcha_drag_thumb"), 100)
2、内置frame操作
IE
document.frames[i].document.getElementById('元素的ID');
document.frames['iframe的name'].document.getElementById('元素的ID');
document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')
其它
跨域frame 暂不知道如何操作
3 常用函数
function getElementLeft(element) {
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null) {
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}