【教程】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 = "飞龙";

【教程】javascript浏览器对象入门教程相关推荐

51自学网AutoCAD2014室内设计 AutoCAD2009施工图教程 CAD布局及规范作图教程室内手绘入门教程...
我要自学网平面设计计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程五笔打字视频教程我要自学网Excel函数应用教程 Excel VBA基础教程 ...
动漫人物透视教程，透视画法入门教程
动漫人物透视教程,透视画法入门教程!今天分享的是有关动漫人物透视教程的资源,包含动漫人物透视教程教程.动漫人物透视教程图片素材两个部分,学习动漫人物透视教程的时候,一定要多练,下面开始咱们的动漫人物透 ...
JavaScript最基础入门教程
js入门教程前言小赵我最近迷上了前段web开发,因为最近用Python开发了个项目, 最后运行的时候 print('上天保佑,程序无bug')print('佛祖保佑,程序无bug')print( ...
openlayers3教程详细_OpenLayers 3 入门教程
OpenLayers 3 入门教程摘要 OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计.版本2虽然被广泛使用,但从JavaScript开发的早期发展阶段开始,已日益现实 ...
python爬虫教程下载-Python爬虫入门教程！手把手教会你爬取网页数据
其实在当今社会,网络上充斥着大量有用的数据,我们只需要耐心的观察,再加上一些技术手段,就可以获取到大量的有价值数据.这里的"技术手段"就是网络爬虫.今天就给大家分享一篇爬虫基础知识 ...
python语言入门教程-菜鸟学Python入门教程大盘点|7个多月的心血总结
原标题:菜鸟学Python入门教程大盘点|7个多月的心血总结阅读本文大概需要5分钟菜鸟学python已经写了70几篇,入门的教程已经快写完了,我把入门的文章整理了一下,下面是入门篇的一些总结,也是 ...
php class类教程,PHP类(Class)入门教程第2/2页
用正确的小汽车对象学习和熟悉类的概念很多书讲到类总喜欢拿小汽车来做例子,但是有些例子实在是又臭又烂误人子弟,骗人钱财,毁人前程,弱智低级到瞎编一个什么 set_color()函数来教人.实在是白白糟 ...
arcgis python 教程-终于晓得arcgis-python入门教程
比较操作符就是小学常常用到的,比如大于,小于,等于这些,与身份操作符不一样的是,身份操作符是对内存地址进行比较,而这个是对值进行比较比较结果要么是真(True),要么是假(Flase).以下是小编为你 ...
php laravel 入门教程,Laravel 5 系列入门教程（一）【最适合中国人的 Laravel 教程】...
Laravel 5 系列入门教程(一)[最适合中国人的 Laravel 教程] 2015-3-7 / 阅读数:314392 / 分类: Laravel 十分建议学习 5.5,跟 5.0 比变化非常大. ...

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

【教程】javascript浏览器对象入门教程相关推荐

最新文章

热门文章