当前标签 / jQuery / 总共5篇

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前端基础(17)jQuery中的事件

事件绑定

bind(type[, data], fn);

第一个参数是绑定的事件类型,第二个参数可选是额外数据对象,第三个参数是处理函数。

在文档装载完成后,可以使用bind()方法来对元素绑定特定的事件,可以绑定的事件有:

事件说明
blur元素失去焦点
focus元素获得焦点
load一张页面或一幅图像完成加载。
resize重置按钮被点击
scroll滚动事件
unload用户退出页面
click点击事件
dblclick双击事件
mousedown鼠标按键按下
mouseup鼠标按键抬起
mousemove鼠标被移动
mouseover鼠标移到某个元素上
mouseout鼠标从某个元素上移开
mouseenter鼠标进入某个元素
mouseleave鼠标离开某个元素
change域的内容被改变
select文本被选中
submit确认按钮被点击
keydown键盘按下
keypress某个键盘按键被按下并松开。
keyup某个键盘按键被松开
error在加载文档或图像时发生错误。

阅读更多

Web前端基础(16)jQuery操作HTML属性和元素

属性操作

在jQuery中,用attr()方法来获取和设置元素的属性,用removeAttr()方法来删除元素属性。

attr()方法使用示例

var $para = $("p");
//获取
var p_text = $para.attr("title");  
//设置
$para.attr("title", "dp2px");
//可以一次修改多个属性
$para.attr({"title":"dp2px", "name":"地痞兔劈叉"});

removeAttr()方法使用示例

$("p").removeAttr("title");

样式操作

<p class="myclass" title="dp2px">地痞兔劈叉</p>

上面代码中,class其实也是p元素的一个属性,因此可以用attr()方法获得和设置class的内容。jQuery提供了一个addClass()方法来追加class值。提供了removeClass()来移除class值。

$("p").addClass("another");
$("p").removeClass("another");

jQuery中还提供了一个toggleClass()方法来实现单机切换(添加和删除)操作

另外判断是否有某个class值用方法hasClass()来判断。

阅读更多

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>

阅读更多