当前标签 / jQuery / 总共3篇

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

单行文本框

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

<!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()

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>

阅读更多