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. linux系统优化命令--day03

    用户管理与文件权限 给普通用户授权 root 用户 修改/etc/sudoers文件,文件非常重要, 不可以随意更改 vim /etc/sudoers 如果想要给用户赋予权限,我们要使用这个命令 vi ...

  2. 【进阶篇】使用 Redis 实现分布式缓存的全过程思考（一）

    目录 前言 一.关于缓存 二.基本数据结构 三.缓存注解 3.1自定义注解 3.2定义切点(拦截器) 3.3 AOP 实现 3.4使用示例 四.数据一致性 4.1缓存更新策略 4.2缓存读写过程 五. ...

  3. 【LeetCode二叉树#15】二叉搜索树的最小绝对差（巩固迭代中序遍历#2）

    二叉搜索树的最小绝对差(迭代法中序遍历巩固) 力扣题目链接(opens new window) 给你一棵所有节点为非负值的二叉搜索树,请你计算树中任意两节点的差的绝对值的最小值. 示例: 提示:树中至 ...

  4. Centos下git pull免密码操作

    在终端输入以下指令: git config --global credential.helper store然后再次执行pull操作,还是会提示一次输入帐号与密码.断开终端链接,重连,再次进行pull ...

  5. 【Azure 云服务】指标哪去了？在执行 Swap (交换生产部署和Staging部署) 操作后看不见云服务的旧指标

    问题描述 打开云服务(Cloud Service)的Metrics页面,发现过去了指标不见了? 以虚点构成无数据的图表. 问题解答 查看云服务的活动日志(Activity Logs),发现最近执行的操 ...

  6. 【Azure 存储服务】关于对Azure Storage Account 的 Folder 权限管理和设定

    问题描述 在一个storage account下面有很多folder,需要对不同的folder设置不同的权限给到不同的用户来访问使用,怎么样设定比较合理? 问题解答 一:可以使用SAS共享访问签名进行 ...

  7. C++ //栈 stack 容器 先进后出 不允许遍历

    1 //栈 stack 容器 先进后出 不允许遍历 2 3 4 #include<iostream> 5 #include<stack> 6 7 using namespace ...

  8. 18 Codeforces Round 853 (Div. 2)C. Serval and Toxel's Arrays（算贡献）

    C. Serval and Toxel's Arrays 这种题目做多了应该很容易从贡献的角度去考虑了. 考虑当前版本对答案的贡献,首先这个版本和其他版本取交集至少会包含它本身所以直接先把\(i * ...

  9. el-select封装（单选框、多选框、全选功能）

    先看看设计图: 网上找了一溜,都是扯淡,样式也没个 自己动手吧,先把样式搞定 popper-class="xx-option" 所有单选框都用 :after和:before类 + ...

  10. mybaits 笔记2022年8月学习笔记

    mybatis整理 前期准备 安装必要依赖: idea开发mybatis,如果学习测试,可以在一个直接建一个空白项目,如果是用spring boot,则建议用用boot的安装捆绑方式 核 心依赖 or ...