javascript网页自动填表_学个锤子 | 从零开始填表刷票

晚上好，同学们。 之前和大家一起研究了几个在线报名表平台，随之而来又有了一个问题，当我们需要填写大量数据来完成领导安排的任务时，应该怎么办呢？ 接下来我们以 问卷星 为例。 教程演示用表单地址为： https://www.wjx.cn/jq/78425667.aspx 四个很简单的基础题型，两个单选，一个多选，一个填空。

分析表单

接下来我们来研究怎么进行自动填表。 在上一节课上，我们教过大家用审查元素的方法定位网页上的内容，这节课我们继续使用这个知识，来定位网页上的表单。 要补课的同学快点点进去。 审查元素，"黑掉"熊爪度就这么简单 首先要解决的一个问题在于，问卷星的表单上屏蔽了鼠标的右键菜单，这使得你没法使用右键进行元素审查。 突破方法很简单，如果你用的是从公众号或者我博客下载的定制版 Chrome，则你可以从 书签栏->小书签栏->阅读 中选择 解除右键限制 。 如果你没有用我提供的 Chrome，则你可以在书签栏上点右键，添加网页。 起一个好听的名字，然后把下面这段代码粘贴进去，你就可以得到和我一样的小书签了。

javascript:(function(bookmarklets)%7Bfor(var%20i=0;i%3Cbookmarklets.length;i++)%7Bvar%20code=bookmarklets%5Bi%5D.url;if(code.indexOf(%22javascript:%22)!=-1)%7Bcode=code.replace(%22javascript:%22,%22%22);eval(code)%7Delse%7Bcode=code.replace(/%5Es+%7Cs+$/g,%22%22);if(code.length%3E0)%7Bwindow.open(code)%7D%7D%7D%7D)(%5B%7Btitle:%22%E7%A0%B4%E9%99%A4%E5%8F%B3%E9%94%AE%E8%8F%9C%E5%8D%95%E9%99%90%E5%88%B6%22,url:%22javascript:function%20applyWin(a)%7Bif(typeof%20a.__nnANTImm__===%5Cx22undefined%5Cx22)%7Ba.__nnANTImm__=%7B%7D;a.__nnANTImm__.evts=%5B%5Cx22mousedown%5Cx22,%5Cx22mousemove%5Cx22,%5Cx22copy%5Cx22,%5Cx22contextmenu%5Cx22%5D;a.__nnANTImm__.initANTI=function()%7Ba.__nnantiflag__=true;a.__nnANTImm__.evts.forEach(function(c,b,d)%7Ba.addEventListener(c,this.fnANTI,true)%7D,a.__nnANTImm__)%7D;a.__nnANTImm__.clearANTI=function()%7Bdelete%20a.__nnantiflag__;a.__nnANTImm__.evts.forEach(function(c,b,d)%7Ba.removeEventListener(c,this.fnANTI,true)%7D,a.__nnANTImm__);delete%20a.__nnANTImm__%7D;a.__nnANTImm__.fnANTI=function(b)%7Bb.stopPropagation();return%20true%7D;a.addEventListener(%5Cx22unload%5Cx22,function(b)%7Ba.removeEventListener(%5Cx22unload%5Cx22,arguments.callee,false);if(a.__nnantiflag__===true)%7Ba.__nnANTImm__.clearANTI()%7D%7D,false)%7Da.__nnantiflag__===true?a.__nnANTImm__.clearANTI():a.__nnANTImm__.initANTI()%7DapplyWin(top);var%20fs=top.document.querySelectorAll(%5Cx22frame,%20iframe%5Cx22);for(var%20i=0,len=fs.length;i%3Clen;i++)%7Bvar%20win=fs%5Bi%5D.contentWindow;try%7Bwin.document%7Dcatch(ex)%7Bcontinue%7DapplyWin(fs%5Bi%5D.contentWindow)%7D;void%200;%22%7D,%7Btitle:%22%E7%A0%B4%E9%99%A4%E9%80%89%E6%8B%A9%E5%A4%8D%E5%88%B6%E9%99%90%E5%88%B6%22,url:%22javascript:(function()%7Bvar%20doc=document;var%20bd=doc.body;bd.onselectstart=bd.oncopy=bd.onpaste=bd.onkeydown=bd.oncontextmenu=bd.onmousemove=bd.onselectstart=bd.ondragstart=doc.onselectstart=doc.oncopy=doc.onpaste=doc.onkeydown=doc.oncontextmenu=null;doc.onselectstart=doc.oncontextmenu=doc.onmousedown=doc.onkeydown=function%20()%7Breturn%20true;%7D;with(document.wrappedJSObject%7C%7Cdocument)%7Bonmouseup=null;onmousedown=null;oncontextmenu=null;%7Dvar%20arAllElements=document.getElementsByTagName(%5Cx27*%5Cx27);for(var%20i=arAllElements.length-1;i%3E=0;i--)%7Bvar%20elmOne=arAllElements;with(elmOne.wrappedJSObject%7C%7CelmOne)%7Bonmouseup=null;onmousedown=null;%7D%7Dvar%20head=document.getElementsByTagName(%5Cx27head%5Cx27)%5B0%5D;if(head)%7Bvar%20style=document.createElement(%5Cx27style%5Cx27);style.type=%5Cx27text/css%5Cx27;style.innerHTML=%5Cx22html,*%7B-moz-user-select:auto!important;%7D%5Cx22;head.appendChild(style);%7Dvoid(0);%7D)();%22%7D%5D)

好了，使用上节课讲的审查元素，定位到普通的单选题的 选项1 上。

<input style="display:none;" type="radio" name="q1" id="q1_1" value="1">

可以看到这个标签有 name 属性和 id 属性。 简单的介绍这两个属性，name 就是给这个元素起一个名字作为标志，而 id 则和我们的身份证一样，也是用来标识这个元素的，但 id 是唯一的。 通常情况下建议在书写 html 时使用 id 而不是 name，二者更多的不同可以自行百度。 在控制台 -> Console中输入：

document.getElementById("q1_1")

回车执行，得到结果。 可以看到其输出了刚才这个元素，我们把这种方法叫做元素选择器，可以通过一定的特征去选择网页中的元素。 在Chrome控制台中的自动补全里你可以看到还有很多选择器。 刚才这个题如果我们使用 Name 选择器，可以得到一个包含了两个成员的结果。 为什么呢？审查元素可以看到，选项2 也叫这个名字。

填写表单

接下来我们利用 id 属性来填表。 最简单有效的方法，就是模拟点击。 可以使用 click() 方法。 同样，也可以用 name 属性来填表，但注意 name 的选择结果不一定唯一，所以需要用数组，数组编号从 0 开始。 在多选上，你会发现这个方法行不通了，执行了 click 后对应的元素没有被勾上。 手动勾上一个对比看看。 勾上的样式和没勾上的元素在样式上少了一个被选中的样式。 实际上元素被选中了，只是在表单中没有展现出来。 思考下，为什么手动点击的时候就会增加被选中的样式呢？ 答案是因为手动点击时，被点击到的不是 q3_1，而是它的父元素，li。 那我们也改成点击父元素即可。 最后还有一个填空题，我们使用 value 方法来给 input 里写入内容即可。 就连最后的提交，我们也可以用代码完成。