20 JavaScript和HTML交互

在HTML中可以直接在标签上给出一些事件的触发. 例如, 页面上的一个按钮.

<input type="button" value="点我"/>

我们能够知道此时在页面中会产生一个按钮. 但是该按钮无论如何进行点击. 都不会触发任何事件. 但, 此时我要告诉你, 人家其实触发了. 只是你没处理而已. 在我们点击该按钮的时候. 浏览器其实收集到了点击事件. 但是由于我们没有给出任何发生了点击事件应该做什么的事情. 所以也就没有了反应. 我们可以通过onclick属性. 来给点击事件添加上具体要做什么

<input type='button' value="点我" onclick="fn()" />

看到了吧. 多了个onclick, 其含义是, 当发生点击事件时. 去执行fn(). fn() 是什么? fn就是我们javascript的一个函数.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function fn(){

            alert("臭不要脸")

        }

    </script>

</head>

<body>

    <input type="button" value="点我就爱你" onclick="fn()">

</body>

</html>

有效果了. 发现了么. 至此, 我们成功的实现了. 从HTML中调用JS的这条路打通了.

那么在HTML中有多少种事件可以触发呢? 非常多....多到令人发指. 我们就记住几个就好了。

html中的事件:

click		点击事件

focus		获取焦点

blur		失去焦点

submit		提交表单

change		更换选项

scroll		滚动条滚动

mouseover	鼠标滑过

mouseout	鼠标滑出

mousemove	鼠标滑动

上述是第一种绑定事件的方案. 可以直接在html标签中使用onxxx系列属性来完成事件的绑定. 同时js还提供了以下事件绑定方案:

<input type="button" id="btn" value="别点我了">

<script>

    // 注意, 必须等到页面加载完毕了. 才可以这样

    document.querySelector("#btn").addEventListener("click", function(){

        console.log("你点我干什么?? ")

    })

</script>

document.querySelector() 给出一个css选择器, 就可以得到一个html页面上标签元素的句柄(控制该标签).

获取句柄的方案有好多. 常见的有:

document.getElementById();  // 根据id的值获取句柄

document.getElementsByClassName(); // 根据class的值获取句柄

// <form name='myform'><input type="myusername"/></form>

document.form的name.表单元素的name;  //  document.myform.myusername;

那么, 我们现在相当于可以从html转到JS中了. 并且在js中可以捕获到html中的内容了. 此时, 对应的表单验证也可以完成了.

<form action="服务器地址" id="login_form">

    <label for="username">用户名:</label><input type="text" name="username" id="username"><span id="username_info"></span><br/>

    <label for="password">密码:</label><input type="text" name="password" id="password"><span id="password_info"></span><br/>

    <input type="button" id="btn" value="点我登录">

</form>


<script>

    // 在页面加载的时候

    window.onload = function(){

        document.getElementById('btn').addEventListener("click", function(){

            // 清空提示信息

            document.getElementById('username_info').innerText = "";

            document.getElementById('password_info').innerText = "";

            let username = document.getElementById('username').value;  // 获取username标签中的value属性

            let password = document.getElementById('password').value;  // 获取密码

            let flag = true;  // 最终是否可以提交表单?

            if(!username){

                document.getElementById('username_info').innerText = "用户名不能为空";

                flag = false;

            }

            if(!password){

                document.getElementById('password_info').innerText = "密码不能为空";

                flag = false;

            }

            if (flag){

                document.getElementById('login_form').submit();

            }

        })

    }

</script>

发现了么. 不经意间, 我们通过js可以改变html中的内容了。

20 JavaScript和HTML交互的更多相关文章

  1. iOS中JavaScript和OC交互

    转载自:http://www.devzeng.com/blog/ios-uiwebview-interaction-with-javascript.html 还可参考的文章:http://blog.c ...

  2. iOS中JavaScript和OC交互 －－by 胡 xu

    在iOS开发中很多时候我们会和UIWebView打交道,目前国内的很多应用都采用了UIWebView的混合编程技术,最常见的是微信公众号的内容页面.前段时间在做微信公众平台相关的开发,发现很多应用场景 ...

  3. jQuery基础与JavaScript与CSS交互-第五章

    目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight Fle ...

  4. 在android中实现webview与javascript之间的交互(转）

    参见“在android中实现webview与javascript之间的交互”

  5. Hybrid App: 对比UIWebView和WebKit实现JavaScript与Native交互

    一.简介 在前面一篇文章中讲到过实现JavaScript与Native交互的方式有一种就是使用原生内嵌webView.在iOS8之前,开发者只能使用苹果提供的UIWebView类来加载URL或者HTM ...

  6. Qt和JavaScript使用QWebChannel交互一——和Qt内嵌网页交互

    Qt和JavaScript使用QWebChannel交互一--和Qt内嵌网页交互 目录 Qt和JavaScript使用QWebChannel交互一--和Qt内嵌网页交互 前言 一.效果 二.实现过程 ...

  7. 【iOS开发】UIWebView与JavaScript(JS) 回调交互

    ------------------------------------------------- 很多关于objc 与 js 交互的文章都比较适用于 mac开发,iOS的webview 还是有所不一 ...

  8. UIWebView与JavaScript(JS) 回调交互 -备

    很多关于objc 与 js 交互的文章都比较适用于 mac开发,iOS的webview 还是有所不一样, 参考:http://blog.sina.com.cn/s/blog_693de6100102v ...

  9. webview与JavaScript之间的交互

    据说WebView的强大之处就是能和JavaScript进行交互调用. 参考博客:http://droidyue.com/blog/2014/09/20/interaction-between-jav ...

  10. Android中webview跟JAVASCRIPT中的交互

    在android的应用程序中,可以直接调用webview中的javascript代码,而webview中的javascript代码,也可以去调用ANDROID应用程序(也就是JAVA部分的代码).下面 ...

随机推荐

  1. 麒麟系统开发笔记（十一）：在国产麒麟系统上使用gdb定位崩溃异常方法流程进阶定位代码行数及专项测试Demo

    前言   上一篇,通过研究,可以定位到函数,本篇进一步优化,没有行数,程序较为复杂的时候,就无法定位,所以进一步定位.  本篇做了qBreakpad的研究,但是没有成功,过程也还是填出来,后来突然注意 ...

  2. 案例分享：Qt便携式致病菌快速检测仪（账号管理、实验过程、二维图表、历史数据、通讯管理、实验报告、中英文等等）

    需求   根据提供的用户原型设计.ui设计.通讯协议研发便携式致病菌快速检测仪器软件.  100%还原ui.   基本主功能(推荐visio:★★★☆☆,前期主流程需求整理)          Dem ...

  3. HashMap源码窥探

    目录 前言 HashMap的数据结构 HashMap的put方法 HashMap的get方法 HashMap的初始化 HashMap的containsKey方法 HashMap的putAll方法 Ha ...

  4. Node.JS http server

    一.自动更新刷新 http server browser-sync dist --files "**/*" 二.http-server 三.webpack-dev-server的c ...

  5. 【Azure 存储服务】Azure Data Lake Storage (ADLS) Gen2 GRS Failover是否支持自动切换或者手动切换到灾备的终结点呢?

    问题描述 在Azure的存储服务中,介绍灾备恢复和Storage Account故障转移的文档中,有一句话"Account failover is not supported for sto ...

  6. 【Azure 应用服务】App Service for Container中配置与ACR(Azure Container Registry)的RABC权限

    问题描述 在使用App Service for container时,在从ACR(Azure Container Registry)中获取应用的镜像时,需要使用对应的权限.默认情况为在ACR中启用Ad ...

  7. Java 韩顺平老师的课，记的（前6章）笔记

    https://www.bilibili.com/video/BV1fh411y7R8/?p=110&spm_id_from=333.880.my_history.page.click& ...

  8. BUUCTF—Crypto（完结版本—_—）

    BUUCTF-Crypto 1.一眼就解密 考点:base64 我的解答: 字符串后面的等号,看来是base大家族,由字母和数字范围来看是base64,不管了,先扔CyberCher,仙女魔法棒变出f ...

  9. WPF之属性

    目录 属性 依赖属性(Dependency Property) 依赖属性对内存的使用方式 声明和使用依赖属性 声明依赖属性 使用依赖属性 依赖属性的"属性" 依赖属性的" ...

  10. Python 动态网页Fetch/XHR爬虫——以获取NBA球员信息为例

    Python 动态网页Fetch/XHR爬虫--以获取NBA球员信息为例 动态网页抓取信息,一般利用F12开发者工具-网络-Fetch/XHR获取信息,实现难点有: 动态网页的加载方式 获取请求Url ...