[原创]javascript&浏览器对象入门教程

龙 · 发表于 2013-4-28 12:10:21

本帖最后由飞龙于 2013-4-29 20:29 编辑

* 此教程是头一章估计我以后也不想写什么第二章了
* 需要的基础知识：javascript语法和常用对象
* 大神勿喷

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

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

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

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

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

找到编辑框：

<input type="text" name="wd" id="kw" maxlength="100" style="width:474px;" autocomplete="off">

复制代码

按钮：

<input type="submit" value="百度一下" id="su" class="btn" onmousedown="this.className='btn btn_h'" onmouseout="this.className='btn'">

复制代码

好控件的声明已经找到了然后光有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脚本将"百度一下"按钮上面的文字改成"飞龙"
答案：

游客，如果您要查看本帖隐藏内容请回复

admin · 发表于 2013-4-28 12:37:56

大家都来学习一下吧

西木野真姬 · 发表于 2013-4-28 12:41:01

前排

二先森 · 发表于 2013-4-28 12:49:46

喝我姨妈吗 · 发表于 2013-4-28 12:52:15

- -!!!

方人山 · 发表于 2013-4-28 12:55:36

前排支持

汐宫栞 · 发表于 2013-4-28 15:38:43

哇哦

clampxss · 发表于 2013-4-28 15:53:54

虽然不懂顶下

上邪 · 发表于 2013-4-29 13:19:18

前排支持、学习了

It_will_rain · 发表于 2013-4-29 15:30:41

加油加油加油

sxlcp · 发表于 2013-5-4 15:50:42

学习学习

假好人。 · 发表于 2013-5-10 04:06:10

暨家言乐 · 发表于 2013-5-23 15:25:43

呵呵。。。

tth0225 · 发表于 2013-5-24 15:14:35

貌似好厉害的样子

小优 · 发表于 2013-6-7 14:20:57

诉述_、________ · 发表于 2013-6-12 20:44:10

蝶儿 · 发表于 2013-6-15 12:55:32

看看怎么样.

look · 发表于 2013-6-17 17:10:02

前排支持

a737901688 · 发表于 2013-7-9 13:59:18

谔谔

王行飞 · 发表于 2013-7-9 17:24:46

会不会很不错，等会下载看看哦！

hades1989 · 发表于 2013-7-14 19:01:38

学习了

撒旦我是人 · 发表于 2013-8-6 21:38:25

c++不知道可以么。

lean · 发表于 2013-8-7 08:06:32

正在看js的书

harry · 发表于 2013-8-12 21:40:02

嗷嗷待食安迪

拾风 · 发表于 2013-8-16 13:02:29

这个玩过

走偏伦方向 · 发表于 2013-8-17 10:20:16

啊，学习了！！！

vipid · 发表于 2013-8-28 17:28:27

看看怎么样

a296776902 · 发表于 2013-8-30 00:48:49

新人来学习学习

tobe秀才 · 发表于 2013-8-30 23:11:36

我看看

and1and1 · 发表于 2013-9-1 20:30:56

马克很棒的东西

账号		自动登录	找回密码
密码			立即注册

[原创]javascript&浏览器对象入门教程

相关帖子

浏览过的版块

伯爵荣耀

会员纪念勋章

苍海的女仆

二货勋章

周年纪念勋章