当前标签 / jQuery / 总共6篇

Justified Gallery 使用中文文档

· 大约 400 个字 · 预计 2 分钟 读完
JavaScript · 框架
JavaScript · 框架 · JustifiedGallery · jQuery · 瀑布流

Justified Gallery 是一个方便你创建瀑布流照片的 JavaScript 库，它可以帮助你优雅的排列图片显示，使用它的网站有 500px、Flickr 和 Google.

官网地址：https://miromannino.github.io/Justified-Gallery/

如何使用

下载地址：https://github.com/miromannino/Justified-Gallery/releases

这个库使用的前提是引入 jQuery 如果你的浏览器不是旧的很离谱它都可以很好的工作。

1
2

<link rel="stylesheet" href="css/justifiedGallery.css" />
<script src="js/jquery.justifiedGallery.js"></script>

阅读更多

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

· 大约 700 个字 · 预计 4 分钟 读完
Web前端 · 基础
Web前端 · 基础 · jQuery · 表单

单行文本框

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!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中的动画

· 大约 200 个字 · 预计 1 分钟 读完
Web前端 · 基础
Web前端 · 基础 · jQuery · 动画

show()和hide()

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

1
2
3
4
5
6
7

$(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:动画完成时执行的函数，可选

1
2
3
4
5

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

阅读更多

Web前端基础（17）jQuery中的事件

· 大约 400 个字 · 预计 2 分钟 读完
Web前端 · 基础
Web前端 · jQuery · 基础 · 事件

事件绑定 

1

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属性和元素

· 大约 400 个字 · 预计 2 分钟 读完
Web前端 · 基础
Web前端 · 基础 · jQuery · 属性 · 样式 · DOM

属性操作

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

attr()方法使用示例

1
2
3
4
5
6
7

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

removeAttr()方法使用示例

1

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

样式操作 

1

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

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

1
2

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

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

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

阅读更多

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

· 大约 1000 个字 · 预计 5 分钟 读完
Web前端 · 基础
Web前端 · 基础 · 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 只需要在页面的 <head> 引入 jQuery 文件即可

1
2
3
4
5
6
7
8
9

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

阅读更多