python学习之javascripts

JavaScript 简介

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

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

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

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

简单的javascripts

<script>

alert("我的第一个 JavaScript");

</script>

这是一个javascript页面

中的 JavaScript 在本例中，JavaScript 会在页面加载时向 HTML 的 写文本：

<script>

document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");

</script>

这是一个javascript页面

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

脚本可位于 HTML 的 或 部分中，或者同时存在于两个部分中。

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

我的 Web 页面

一个段落。

点击这里 中的 JavaScript 函数 在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 部分。

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

我的第一个 Web 页面

一个段落。

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

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

如需使用外部文件，请在

我的 Web 页面

一个段落。

点击这里

注释：myFunction 保存在名为 "myScript.js" 的外部文件中。

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

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

<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>

用户登录

点击onclick事件 点击事件 onclick事件：onclick 事件会在对象被点击时发生。 案例（1）onclick实现图片的转换：实现点击按钮，切换图片

<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>

用户登录

实现表格全选与全部选案例

    <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>

动态添加城市

<ul id="city_ul">
    <li>西安</li>
    <li>成都</li>
    <li>上海</li>
</ul>

省级信息二级联动

<script type="text/javascript" src="js/province.js">

</script>

籍贯 ---选择省份----- 陕西 山西 广西 ---选择城市---

</form>