五邑大学一键评教代码实现与解析(邑大懒人)

快速实现

复制以下代码， 用浏览器打开五邑大学教务处，然后点F12 点击console 粘贴如下代码

$("table tr").each(function(index,element){
    if(index == 2){
       	$(element).children("td[field='pj']").children("div").children("a").click()
setTimeout(function(){
            $("input[mc='优秀']").each(function(index,element){
                $(element).click();
            })
        },2000)
setTimeout(function(){
            $("a[iconcls='icon-pj']").click();
        },2000)
     
        return false;
    } else {
        return true;
    }
});

原理解析

表单的实现原理

如上图所示，整个表单是由一个table标签实现，并且每一条老师信息对应一个tr，仔细看这些代码，不难发现其中的规律

进入评价的代码原理

如图，当我们选中进入评价按钮的时候，这个a标签会触发pj()方法，并且将一大堆参数传进去。
又根据这个界面使用的js框架为 jQuery 我们可以猜测制作人是使用操作dom动态渲染 评教小窗口的

选项框的代码实现

请看如下代码，不难发现 每一个框框都是对应着一个input标签，我们点击的时候触发 onchange 事件

并且，该标签的mc属性就是拿来判断

提交按钮的代码原理

注意这个savePj()方法，这个是提交问卷评分的方法。当我们遍历的时候要记得触发这个方法

代码解析

使用JQuery方便我们搞破坏

请看Console工作台的代码，我使用

$("td[field='pj']").css("backgroundColor","pink");

这一段jquert的代码也能完成对dom的操作，证明我们可以在控制台直接使用jquert框架实现我们的破坏之旅

实现步骤

我们首先要先遍历table标签的所有a标签(因为每个tr标签里面只有一个a标签)，触发其点击事件。
我们来做个小实验，在控制台输入如下代码

console.log($("table tr"))

它的返回值为

点击那个倒三角，耐心观察

不难发现 序号为2tr到序号为19的tr才是我们所需要的tr
所以我们遍历的时候要注意这个问题
我们可以使用:

jquery对象.each(function(index,element){});
 //如果当前function返回为false，则结束循环(break)
 //如果返回为true，则结束本次循环，继续下次循环(continue)

该遍历语法来遍历 $(“table tr”) 数组
并且 设置退出循环和跳过此循环的if语句

$("table tr").each(function(index,element){
    if(index == 7){
       	console.log($(element).children("td[field='pj']").children("div").children("a").click())
        return false;
    } else {
        return true;
    }
});

使用如下代码 就可以直接使序号为7的老师评价框弹出来了，并且成功渲染进了评论框，证明我们第一步已经实现了

选中单选按钮

// 这里我们统一选择优秀
$("input[mc='优秀']").each(function(index,element){
    $(element).click();
})

得到如图效果

所以此时我们只需要触发提交按钮的点击事件，就能完成提交
输入以下代码

$("a[iconcls='icon-pj']").click()

得到如图效果

上传成功

最终版本

于是我们就可以把三组代码组合在一起
这里是直接将编号为12的老师全部点赞再上传

$("table tr").each(function(index,element){
    if(index == 12){
       	$(element).children("td[field='pj']").children("div").children("a").click()
setTimeout(function(){
            $("input[mc='优秀']").each(function(index,element){
                $(element).click();
            })
        },2000)
setTimeout(function(){
            $("a[iconcls='icon-pj']").click();
        },2000)
     
        return false;
    } else {
        return true;
    }
});

以下为我们的理想代码(但是这有bug)

$("table tr").each(function(index,element){
    if(index>= 2 && index <= $("table tr").length-2){
        setTimeout(function(){
            $(element).children("td[field='pj']").children("div").children("a").click()
        },3000)
        setTimeout(function(){
            $("input[mc='优秀']").each(function(index,element){
                $(element).click();
            })
        },3000)
        $("a[iconcls='icon-pj']").click();
        return true;
    }
    if(index > $("table tr").length-2){
        return false; //break
    }
    return true; // continue
});

但是，这里有个很严重的问题，就是每次我们上传之后页面都会刷新，如果我们在控制台写的话无法做到一次过全部评教的效果。所以现阶段我只能做到每次刷新只点一位老师，以后有时间我会做个脚本来解决这个问题

祝大家圣诞节快乐，早日脱单

特别感谢: 劲哥给予我的兴趣与启发

后记

考完试之后好无聊啊，有没有妹纸来找我玩啊！！！