专栏首页信数据得永生【教程】javascript&浏览器对象入门教程

【教程】javascript&浏览器对象入门教程

* 此教程是头一章 估计我以后也不想写什么第二章了 * 需要的基础知识:javascript语法和常用对象 * 大神勿喷 上次讲完了封包 这回我们再说说javascript javascript是一种弱类型的客户端脚本语言 在html文本返回后在浏览器上执行 javascript除了基本的运算之外 还可以通过html dom控制浏览器的某些动作 例如向编辑框输入文本 或者点击按钮等等 以达到用代码代替手动操作的目的 同样他也是网页填表的基础 好了 废话不多说 我们来做个演示 比如我要在百度搜索“飞龙”这个词 我们要做的是 1.先在搜索框里面输入飞龙 2.然后再点击“百度一下”按钮 我们注意 这两个动作分别涉及到两个控件 文本框和按钮 学过编程的人都知道 这两个动作在程序里面实现很简单 无非就是Textbox.Text = "飞龙" 之后Button.click() 那是因为在程序中你可以直接访问到控件的对象 但是网页中不行 网页中 html控件大多数以id作为标识的 那我们首先要把id找出来 我们打开chorme 右键点击审查元素 可以看到 底下的窗口中 html源文本按照tag被分为一行一行的

我们可以看到 鼠标移上去 上面会有阴影提示你是网页的哪个部分 于是可以迅速定位到你要找的控件

一开始可能一个区域都有阴影 我们可以点击左侧的小箭头 一层一层找

找到编辑框:

按钮:

好 控件的声明已经找到了 然后光有id也不成啊 我们要生成这个两个控件的对象 ctrl+shift+J打开控制台 输入:

var txt = document.getElementById("kw");
var btn = document.getElementById("su");

这样就成功取到了 我们可以看到 编辑框位于两个div一个form下 按钮位于两个div一个form以及一个span下面 也就是说 无论它有多下面 用这种方法都能取到 注意 输入的时候如果要换行 请用shift+enter 直接按enter会提交脚本 然后就是模拟动作了 首先是输入文本 input标签的编辑框 以及input标签的submit按钮 文本属性都是value 按钮的点击事件一般是button.click() 表单的提交事件一般是form.submit() 那我们换行 接着输入:

txt.value = "飞龙";
btn.click();

回车 于是就成功了

当然 你也可以把自己代码间的回车取掉 前面加上javascript: 存成书签用于经常使用

javascript:var txt = document.getElementById("kw");var btn = document.getElementById("su");txt.value = "飞龙";btn.click();

变式提升 通过js脚本 将"百度一下"按钮上面的文字改成"飞龙" 答案:

var btn = document.getElementById("su");
btn.value = "飞龙";

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 米斯特白帽培训讲义 漏洞篇 SQL 注入

    SQL 注入就是指,在输入的字符串中注入 SQL 语句,如果应用相信用户的输入而对输入的字符串没进行任何的过滤处理,那么这些注入进去的 SQL 语句就会被数据库...

    ApacheCN_飞龙
  • 安卓逆向系列教程 4.7 修改游戏金币

    软件下载:http://www.xuepojie.com/thread-24343-1-1.html

    ApacheCN_飞龙
  • 米斯特白帽培训讲义(v2)漏洞篇 第三方风险

    域名商就是提供域名购买的站点。我们可以通过站长工具的 WHOIS 查询来查询域名商,比如这里我们查询www.hi-ourlife.com的域名商:

    ApacheCN_飞龙
  • 不可注册为ActiveX控件

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

    DannyHoo
  • 并发控制-简单总结

    预期读者     1. 初学者。     2. 想复习的人。     3. 原来学习并发觉得太复杂,没搞清楚,想以更简单的方式学习的人。     4. 懒得总结...

    用户1172223
  • 如何口算MD5

    对MD5算法简要的叙述可以为:MD5以512位分组来处理输入的信息,且每一分组又被划分为16个32位子分组,经过了一系列的处理后,算法的输出由四个32位分组组成...

    天钧
  • 死锁代码

    葆宁
  • 探秘|大数据技术恰恰在加剧收入不平等现象?

    在刚刚闭幕的G20杭州峰会上,世界各国的领导人在一个问题上达成了一致:日益严重的收入不平等现象存在着巨大的隐患。各国领导人都强调,应该更加均等地分享全球经济增...

    灯塔大数据
  • 不吹牛逼我教你口算MD5

    对MD5算法简要的叙述可以为:MD5以512位分组来处理输入的信息,且每一分组又被划分为16个32位子分组,经过了一系列的处理后,算法的输出由四个32位分组组成...

    HACK学习
  • 【云端架构】教你口算MD5算法

    对MD5算法简要的叙述可以为:MD5以512位分组来处理输入的信息,且每一分组又被划分为16个32位子分组,经过了一系列的处理后,算法的输出由四个32位分组组成...

    墨色明月

扫码关注云+社区

领取腾讯云代金券