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

895人阅读 评论(0) 收藏 举报
分类:
* 此教程是头一章 估计我以后也不想写什么第二章了
* 需要的基础知识:javascript语法和常用对象
* 大神勿喷

上次讲完了封包 这回我们再说说javascript
javascript是一种弱类型的客户端脚本语言 在html文本返回后在浏览器上执行
javascript除了基本的运算之外 还可以通过html dom控制浏览器的某些动作 例如向编辑框输入文本 或者点击按钮等等 以达到用代码代替手动操作的目的
同样他也是网页填表的基础

好了 废话不多说 我们来做个演示 比如我要在百度搜索“飞龙”这个词
我们要做的是 1.先在搜索框里面输入飞龙 2.然后再点击“百度一下”按钮
我们注意 这两个动作分别涉及到两个控件 文本框和按钮
学过编程的人都知道 这两个动作在程序里面实现很简单
无非就是Textbox.Text = "飞龙" 之后Button.click()
那是因为在程序中你可以直接访问到控件的对象 但是网页中不行
网页中 html控件大多数以id作为标识的

那我们首先要把id找出来
我们打开chorme 右键点击审查元素 可以看到 底下的窗口中 html源文本按照tag被分为一行一行的
841aea59jw1eb8u5wt7zxj20ka082q5a.jpg

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

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

找到编辑框:


按钮:


好 控件的声明已经找到了 然后光有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();

回车 于是就成功了
841aea59jw1eb8u801k5ij20ez02pdg0.jpg

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

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

变式提升

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

var btn = document.getElementById("su");
btn.value = "飞龙";
查看评论

OpenCV视频分析与对象跟踪实战教程

-
  • 1970年01月01日 08:00

JavaScript&正则表达式

  • 2011年06月05日 07:14
  • 10.18MB
  • 下载

javascript文件夹选择框的两种解决方案(主要是获取用户选择的文件夹的路径)

转自http://www.blogjava.net/supercrsky/archive/2008/06/17/208641.html 解决方案1: 调用windows 的shell,但会有安全问...
  • lz465350
  • lz465350
  • 2014-10-24 14:20:33
  • 397

【Unity3D入门教程】Unity3D界面介绍及游戏对象基本操作

本文介绍了Unity3D界面及游戏对象基本操作。
  • zzlyw
  • zzlyw
  • 2017-01-06 17:16:10
  • 15959

less入门教程一

什么是LESSCSS LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 ...
  • sigangjun
  • sigangjun
  • 2015-09-14 16:55:05
  • 7154

Extjs4教程一之入门教学

最近刚到一家新公司
  • qq_17522839
  • qq_17522839
  • 2014-08-14 08:47:22
  • 982

c++入门教程(一)

事前日常敲黑板 (1)从现在开始 我写的东西不一定完全是正确的,有些只是看了看理论,没有实际验证过,有些验证过但是不同的编译器会有不同的效果,所以建议有能力的话手动去试一下。我说的和书上写的都不一定...
  • t1172400887
  • t1172400887
  • 2017-08-07 00:34:34
  • 564

MySQL 经典入门教程

  • 2017年09月14日 16:03
  • 670KB
  • 下载

Creo 3.0快速入门教程 PDF电子书

  • 2016年03月14日 13:49
  • 29.16MB
  • 下载

spring MVC入门教程

spring教程手册下载:全面、详细、五星推荐这篇博客的目的在于简单介绍如何快速上手使用Spring MVC框架。 spring mvc类似于struts2的一个MVC框架,通过实现Model-Vi...
  • u012385190
  • u012385190
  • 2016-05-13 16:52:15
  • 1005
    个人资料
    持之以恒
    等级:
    访问量: 60万+
    积分: 1万+
    排名: 1512
    赞助我

    最新评论