您好,欢迎来到网暖!

当前位置:网暖 » 站长资讯 » 建站基础 » 网络技术 » 文章详细 订阅RssFeed

python学习之javascripts

来源:网络整理 浏览:195次 时间:2020-08-15

JavaScript 简介

JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

简单的javascripts
 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>    alert("我的第一个 JavaScript");    </script></head><body>这是一个javascript页面</body></html>
<body> 中的 JavaScript

在本例中,JavaScript 会在页面加载时向 HTML 的 <body> 写文本:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>    document.write("<h1>这是一个标题</h1>");    document.write("<p>这是一个段落</p>");    </script></head><body>这是一个javascript页面</body></html>
在 <head> 或者 <body> 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>(runoob.com)</title> <script>function myFunction(){    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";}</script></head><body><h1>我的 Web 页面</h1><p id="demo">一个段落。</p><button type="button" onclick="myFunction()">点击这里</button></body></html>
<body> 中的 JavaScript 函数

在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>(runoob.com)</title></head><body><h1>我的第一个 Web 页面</h1><p id="demo">一个段落。</p><button type="button" onclick="myFunction()">点击这里</button><script>function myFunction(){    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";}</script></body></html>
外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>(runoob.com)</title> </head><body><h1>我的 Web 页面</h1><p id="demo">一个段落。</p><button type="button" onclick="myFunction()">点击这里</button><p><b>注释:</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p><script src="myScript.js"></script></body></html>
聚焦(onfocus)和离焦(onblur)事件:

onfocus事件:聚焦事件,onfocus 事件在对象获得焦点时发生。
onblur事件:离焦事件,onblur 事件会在对象失去焦点时发生。
为了使用户体验更好,在鼠标点击到用户名的框时,右边提示输入用户名和密码的要求,当离开框时,检测用户名和密码是否正确。

我们在平常的登录过程当中,用户名和密码栏后面一般会有所输入内容相关要求和提示的,并不会总是 跳出警示框,这种需求该如何实现呢?那就需要用到聚焦和离焦事件。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function showUserTips() {            var usertipsObj = document.getElementById('usertips');            var info ='<span style="color: gray">用户名长度大于2</span>';            // alert(usertipsObj.innerHTML);            usertipsObj.innerHTML = info;        }        function checkUser() {             //获取当前用户提交的用户名,默认情况下getElementsByName返回列表对象, .value获取对象里面的值            var username = document.getElementsByName('username')[0].value;            // 判断用户名是否为空, 如果为空, 报错             var usertipsObj = document.getElementById('usertips');            if (username.length <= 2) {                usertipsObj.innerHTML = '<span style="color: red">用户名长度不大于2</span>'            }else{                usertipsObj.innerHTML = '<span style="color: green;">ok</span>'            }        }    </script></head><body><div class="login">    <h1>用户登录</h1>    <form action="#" method="get">        <!--onfocus聚焦事件, 如果聚焦, 执行函数showUserTips()-->                    <input type="text" name="username" placeholder="用户名" id='user' onfocus="showUserTips()" onblur="checkUser()">        <span id="usertips"></span><br/>        <input type="password" name="password" placeholder="密码" id="pwd"><br/>        <input type="submit" value="登录">    </form></div></body></html>
点击onclick事件

点击事件
onclick事件:onclick 事件会在对象被点击时发生。
案例(1)onclick实现图片的转换:实现点击按钮,切换图片

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function showUserTips() {            var usertipsObj = document.getElementById('usertips');            var info ='<span style="color: gray">用户名长度大于2</span>';            // alert(usertipsObj.innerHTML);            usertipsObj.innerHTML = info;        }        function checkUser() {            //获取当前用户提交的用户名,默认情况下getElementsByName返回列表对象, .value获取对象里面的值            var username = document.getElementsByName('username')[0].value;            // 判断用户名是否为空, 如果为空, 报错            var usertipsObj = document.getElementById('usertips');            if (username.length <= 2) {                usertipsObj.innerHTML = '<span style="color: red">用户名长度不大于2</span>'            }else{                usertipsObj.innerHTML = '<span style="color: green;">ok</span>'            }        }    </script></head><body><div class="login">    <h1>用户登录</h1>    <form action="#" method="get">        <!--onfocus聚焦事件, 如果聚焦, 执行函数showUserTips()-->        <input type="text" name="username" placeholder="用户名" id='user' οnfοcus="showUserTips()" οnblur="checkUser()">        <span id="usertips"></span><br/>        <input type="password" name="password" placeholder="密码" id="pwd"><br/>        <input type="submit" value="登录">    </form></div></body></html>
实现表格全选与全部选案例
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function checkAll() {            //    1. 获取全选框对象            var checkAllEle = document.getElementById('checkAll');            //    获取当前的状态, 如果返回true, 则代表选中, 否则未选中;            // alert(checkAllEle.checked);            var checkOnes = document.getElementsByName('checkOne');            if (checkAllEle.checked) {                for (var i = 0; i < checkOnes.length; i++) {                    checkOnes[i].checked = true;                }            } else {                for (var i = 0; i < checkOnes.length; i++) {                    checkOnes[i].checked = false;                }            }        }    </script></head><body><table style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;" border="1px">    <th style="text-align: center;" colspan="5">        <input type="button" value="添加">        <input type="button" value="删除">    </th>    <tr>        <th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>        <th>编号</th>        <th>姓名</th>        <th>性别</th>        <th>年龄</th>    </tr>    <tr>        <td><input type="checkbox" name="checkOne"></td>        <td>1</td>        <td>1</td>        <td>1</td>        <td>1</td>    </tr>    <tr>        <td><input type="checkbox" name="checkOne"></td>        <td>2</td>        <td>1</td>        <td>2</td>        <td>2</td>    </tr>    <tr>        <td><input type="checkbox" name="checkOne"></td>        <td>3</td>        <td>3</td>        <td>3</td>        <td>1</td>    </tr>    <tr>        <td><input type="checkbox" name="checkOne"></td>        <td>4</td>        <td>4</td>        <td>1</td>        <td>4</td>    </tr>    <tr>        <td><input type="checkbox" name="checkOne"></td>        <td>5</td>        <td>5</td>        <td>1</td>        <td>5</td>    </tr></table></body>
动态添加城市
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function addCity() {        //    1. 获取要添加的城市内容            var city = document.getElementById('city').value;        //    2. 判断城市是否有值, 如果有, 则添加到列表里面            if(city){            //    创建一个关于城市的文本节点                var textnode = document.createTextNode(city); //广州            //    创建一个li元素节点                var liEleNode = document.createElement('li');            //    将城市信息添加到li标签里面<li>城市名称</li>                liEleNode.appendChild(textnode);            //    将城市列表标签添加到ul标签里面去;                var ulEleNode = document.getElementById('city_ul');                ulEleNode.appendChild(liEleNode)            }else{                alert("城市未空");            }        }    </script></head><body><div class="content">    <form>        <input type="text" name="city" id="city" placeholder="请输入城市">        <input type="button" value="添加城市" onclick="addCity()">    </form><!--<li>深圳</li>-->    <ul id="city_ul">        <li>西安</li>        <li>成都</li>        <li>上海</li>    </ul></div></body>
省级信息二级联动
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--js和html代码分离-->    <script type="text/javascript" src="js/province.js">    </script></head><body><div class="content">    <form action="#" method="get">        <span>籍贯</span>        <!--当修改省份选项时, 执行函数changeCity的内容-->        <select id="province" onchange="changeCity()">            <option>---选择省份-----</option>            <option name="province" value="0">陕西</option>            <option name="province" value="1">山西</option>            <option name="province" value="2">广西</option>        </select>        <select id="city">            <option>---选择城市---</option>        </select>    </form></div></body>

推荐站点

  • 腾讯腾讯

    腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站,是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户,致力成为最具传播力和互动性,权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务,为中国数以亿计的互联网用户提供富有创意的网上新生活。

    www.qq.com
  • 搜狐搜狐

    搜狐网是全球最大的中文门户网站,为用户提供24小时不间断的最新资讯,及搜索、邮件等网络服务。内容包括全球热点事件、突发新闻、时事评论、热播影视剧、体育赛事、行业动态、生活服务信息,以及论坛、博客、微博、我的搜狐等互动空间。

    www.sohu.com
  • 网易网易

    网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。

    www.163.com
  • 新浪新浪

    新浪网为全球用户24小时提供全面及时的中文资讯,内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等,设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道,同时开设博客、视频、论坛等自由互动交流空间。

    www.sina.com.cn
  • 百度一下百度一下

    百度一下,你就知道

    www.baidu.com