DP2PX.COM

单行文本框

首先在网页中创建一个表单，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        input:focus, textarea:focus{
            border:1px solid #f00;
            background: #fcc;
        }
    </style>
</head>
<body>
    <form action="#" method="POST" id="regForm">
        <legend>个人基本信息</legend>
        <div>
            <label for="username">名称：</label>
            <input id="username" type="text"></label>
        </div>
        <div>
            <label for="pass">密码：</label>
            <input id="pass" type="password"></label>
        </div>
        <div>
            <label for="msg">详细信息：</label>
            <textarea id="msg"></textarea>
        </div>
    </form>
</body>
</html>

但是IE6并不支持除超链接元素之外的:hover伪类选择器，此时可以用jQuery来弥补。

Web前端基础（18）jQuery中的动画

show()和hide()

show()和hide()是jQuery中最基本的动画方法，该动画操作了display:none;

$(function(){
    $("#panel").toggle(function(){
        $(this).next().hide();
    }, function(){
        $(this).next().show();
    })
})

show()和hide()可以传入动画执行毫秒数或者传入“nomal”, “slow”, “fast”关键字控制速度。

fadeIn()和fadeOut()

fadeIn()和fadeOut()只是改变透明度。

slideUp()和slideDown()

slideUp()和slideDown()只会改变元素的高度（由上到下展开，由下到上收起）。

自定义动画animate()

1	animate(params, speed, callback);

参数说明：
params: 一个包含样式属性和值的映射
speed:速度参数，可选
callback:动画完成时执行的函数，可选

$(function(){
    $("#panel").click(function(){
        $(this).animate({left:"500px"}, 3000);
    })
})

Web前端基础（15）jQuery选择器和DOM操作

jQuery是JavaScript中使用最广泛的一个库，它可以帮助我们简化js代码，更好的完成工作。

痛点

javascript遇到的一些痛点：

window.onload 事件有个覆盖问题，我们只能写一个
代码容错性差
浏览器兼容性问题
书写很繁琐，代码量多
代码很乱，各个页面到处都是
动画效果，我们很难实现

版本

目前jQuery有三个大版本：

1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.3.1

引入

使用jQuery只需要在页面的

引入jQuery文件即可

<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    ...
</head>
<body>
    ...
</body>
</html>

2019-07-19日

VueJs学习随笔--Style绑定和条件渲染

JavaScript / Vue.js

Web前端基础（19）jQuery对文本框和表单的操作