1. jQuery元素操作

​ 主要是遍历，创建，添加，删除元素

1.1 遍历元素

1. each()对于同一类元素做不同的操作

1
$("div").each(function(index,domEle) {xxx;})
  • 回调函数第一个参数一定是索引号，可以自己指定索引号名称。
  • 回调函数第二个参数一定是DOM元素对象。所以想要使用jQuery方法，需要给这个dom元素转换为jQuery对象$(domEle)。

2. $.each()主要用于遍历数组，处理数据

1
$.each(arr,function(index,ele))
  • 第一个参数可以是数组，也可以是对象。

1.2 添加元素

1. 内部添加

  • 内部添加后二者是父子关系。
  • append将元素放在内容的最后面，prepend将元素放在内容的前面。
1
2
element.append("元素")
element.prepend("元素")

2. 外部添加

  • 外部添加后二者关系是兄弟关系。
  • after将元素放在内容的最后面，before将元素放在内容的前面。
1
2
element.after("内容")
element.before("内容")

3. 删除元素

可以删除匹配的元素，自杀。

1
element.remove()

可以删除匹配的元素的子节点。相当于element.html(“”)。

1
element.clear()

2. jQuery尺寸，位置操作

2.1 尺寸

方法 描述
element.clear() 取得匹配元素宽度和高度值，只算width/height
innerWidth()/innerHeight() 取得匹配元素宽度和高度值 包含padding
outerWidth()/outerHeight() 取得匹配元素宽度和高度值 包含padding和border
outerWidth(true)/outerHeight(true) 取得匹配元素宽度和高度值 包含padding、border和margin

参数可以不加单位。

2.2 位置

1. offset()

设置或获取元素偏移。offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。它有两个属性，left和top。

2. position()

获取距离带有定位父级位置，如果没有带有定位的父级，则以文档为准。该方法只能获取不能设置。

3. scrollTop() / scrollLeft()

获取文档被卷曲的头部的距离，还可以带参数设置文档被卷曲头部的距离。参数不加单位。

在animate方法中也有scrollTop方法，用来元素做去往页面某一位置的动画。

3. jQuery事件

3.1 jQuery事件注册

1. 单个事件注册

1
element.click(function() { })

2. 多个事件注册

  • on()方法优势1：on() 方法在匹配元素上绑定一个或多个事件的事件处理函数。
1
2
3
4
5
6
7
8
element.on({
	click:function() {
	
	},
	mouseover:function() {
	
	}
})
  • 如果事件的事件处理函数做同样的操作，可以简写为：
1
2
3
element.on("mouseover mouseout",function(){

})
  • on()方法优势2：可以事件委派操作。事件委派的定义是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
1
2
3
$("ul").on("click","li",function() {
	// click 是绑定在ul身上的，但是触发的对象是ul里面的小li
})
  • on()方法优势3：on()方法可以给动态创建的元素绑定事件。
1
2
3
4
5
6
7
8
// $("ol li").click(function(){
//	alert(11);	// 传统绑定事件点击动态创建的li不会弹出弹框
// })
$("ol").on("click", "li", function(){
	alert(11);	// on()方法绑定事件点击动态创建的li可以弹出弹框
})
var li = $("<li>我是后来创建的</li>")
$("ol").append(li);

2. 解绑事件

  • off()方法用来解绑事件。

    不跟参数代表解绑element身上的所有事件。

1
element.off()

加参数代表解绑特定事件。

1
element.off("click")

解绑事件委托

1
$("ul").off("click","li");

3. jQuery自动触发事件

  • 前提是已经为元素绑定了事件。

第一种：

1
$("div").click();

第二种：

1
$("div").trigger("事件");

第三种：triggerHandle() 不会触发元素的默认行为，比如说文本框的光标闪烁。

1
$("div").triggerHandle("事件")

4. jQuery事件对象

  • 事件被触发就会有事件对象产生。

  • 阻止默认行为：event.preventDefault() 或者 return false;

  • 阻止冒泡：event.stopPropagation();

1
element.on(events,[selector],function(event) { })

4. jQuery其他方法

4.1 jQuery拷贝对象

如果想要把某个对象拷贝（合并）给另外一个对象使用。可以使用$.extend()方法。有冲突会覆盖原来数据。

1
$.extend([deep], target, obj1, [objN])
  • deep：可选，true表示深拷贝，默认为false，浅拷贝。
  • target：是要拷贝的目标对象。
  • obj1：待拷贝到第一个对象的对象。
  • objN：待拷贝到第N个对象的对象。
  • 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。拷贝后target和obj会指向同一个对象，遇到同名冲突会覆盖target中的数据。
  • 深拷贝把obj里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起。

4.2 多库共存

jQuery使用作 为 标 识 符 ， 随 着 jQuery的 流 行 ， 其 他 j s 库 也 会 用 作为标识符，随着jQuery的流行，其他js库也会用作为标识符，随着jQuery的流行，其他js库也会用作为标识符，这样一起使用会引起冲突。让jQuery和其他js库不存在冲突，叫做多库共存。

解决方案：

  1. 把里面的$符号统一改成jQuery。比如jQuery(“div”)。
  2. 用户自己定义，让jQuery释放对$控制权。
1
var mine = jQuery.noConflict();

就可以使用mine(“div”)代替$(“div”)了。

4.3 jQuery插件

使用jQuery插件之前必须先引入jQuery文件

jQuery插件库：http://www.jq22.com/

jQuery之家：http://www.hymleaf.com/ (推荐)

使用方法：

​ 查看演示——下载插件——打开解压后的index.html——将css和js文件夹复制到自己的文件夹中——引入文档中的css文件和js文件——复制html文件中的结构——换成自己的图片和内容——根据插件说明更改自己想调的参数

4.4 图片懒加载

图片懒加载的意思是：当我们页面滑动到可视区域，再显示图片。图片使用延迟加载可以提高网页下载速度，也可以减轻服务器负载。

实现方法：

  1. jQuery插件库中下载EasyLazyload.js插件
  2. 在自己的文件中引入相关js文件。
  3. 按照说明复制代码到自己的文档中。

4.5 全屏滚动

网址：www.dowebok.com/demo/2014/77/ (案例)

5. toDolist案例

分析

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
案例：toDoList 
① 文本框里面输入内容，按下回车，就可以生成待办事项。
② 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。
③ 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。
④ 但是本页面内容刷新页面不会丢失。

案例：toDoList 分析
① 刷新页面不会丢失数据，因此需要用到本地存储 localStorage
② 核心思路： 不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不	会丢失数据
③ 存储的数据格式：var todolist = [{ title : ‘xxx’, done: false}]
④ 注意点1： 本地存储 localStorage 里面只能存储字符串格式 ，因此需要把对象转换为字符串 JSON.stringify(data)。
⑤ 注意点2： 获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse() 我们才能使用里面的数据。

案例：toDoList 按下回车把新数据添加到本地存储里面
① 切记： 页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面。
② 利用事件对象.keyCode判断用户按下回车键（13）。
③ 声明一个数组，保存数据。
④ 先要读取本地存储原来的数据（声明函数 getData()），放到这个数组里面。
⑤ 之后把最新从表单获取过来的数据，追加到数组里面。
⑥ 最后把数组存储给本地存储 (声明函数 savaDate())

案例：toDoList 本地存储数据渲染加载到页面
① 因为后面也会经常渲染加载操作，所以声明一个函数 load，方便后面调用
② 先要读取本地存储数据。（数据不要忘记转换为对象格式）
③ 之后遍历这个数据（$.each()），有几条数据，就生成几个小li 添加到 ol 里面。
④ 每次渲染之前，先把原先里面 ol 的内容清空，然后渲染加载最新的数据。

案例：toDoList 删除操作
① 点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。
② 核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li
③ 我们可以给链接自定义属性记录当前的索引号
④ 根据这个索引号删除相关的数据----数组的splice(i, 1)方法
⑤ 存储修改后的数据，然后存储给本地存储
⑥ 重新渲染加载数据列表
⑦ 因为a是动态创建的，我们使用on方法绑定事件

案例：toDoList 正在进行和已完成选项操作
① 当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表。
② 点击之后，获取本地存储数据。
③ 修改对应数据属性 done 为当前复选框的checked状态。
④ 之后保存数据到本地存储
⑤ 重新渲染加载数据列表
⑥ load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面
⑦ 如果当前数据的done 为false， 则是待办事项，就把列表渲染加载到 ol 里面

案例：toDoList 统计正在进行个数和已经完成个数
① 在我们load 函数里面操作
② 声明2个变量 ：todoCount 待办个数 doneCount 已完成个数 
③ 当进行遍历本地存储数据的时候， 如果 数据done为 false， 则 todoCount++, 否则 doneCount++
④ 最后修改相应的元素 text()

todolist.htnl

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
33
34
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/todolist.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/todolist.js"></script>
</head>

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required>
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">
        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">
        </ul>
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn
    </footer>
</body>

</html>

todolist.css

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: rgba(255, 133, 154, 0.897);
}

section ,
footer {
    width: 600px;
    margin: 0 auto;
}

header {
    height: 40px;
    background-color: palevioletred;
}

header label {
    height: 40px;
    float: left;
    color: white;
    line-height: 40px;
    font-size: 18px;
}

header input {
    float: right;
    height: 24px;
    width: 300px;
    margin-top: 7px;
    border-radius: 5px;
    border: 0;
    padding-left: 5px;
}

h2 {
    position: relative;
    margin: 15px 0;
    color: white;
}

ol,
ul {
    list-style: none;
}

.demo-box {
    width: 100%;
}

li {
    height: 30px;
    background-color: palevioletred;
    border-bottom: 1px solid #fff;
    margin-top: 5px;
}

li input,
li p {
    float: left;
    height: 30px;
    line-height: 30px;
    margin-left: 10px;
    color: white;
}

#donelist li input,
#donelist li p {
    color: #666;
    text-decoration: line-through;
}
footer {
    margin-top: 20px;
    /* position: absolute;
    bottom: 10px;
    left: 340px; */
    font-size: 14px;
    color: #666;
    text-align: center;
}

a {
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    color: #fff;
    float: right;
    margin-right: 20px;
    font-size: 12px;
}

input[type="checkbox"]:checked {
    background-color: #fff;
}

#todocount,
#donecount {
    position: absolute;
    right: 5px;
    width: 20px;
    height: 30px;
    background-color: pink;
    font-size: 14px;
    color: white;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
}

todolist.js

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
$(function () {
    load();

    // 按下回车：把完整数据存储到本地存储里面
    $("#title").on("keydown", function (event) {
        if (event.keyCode === 13) {
            // 先读取本地存储原来的数据
            var local = getData();
            // 把最新的数据追加给local数组
            local.push({ title: $(this).val(), done: false });
            // 把这个数组存储到本地存储
            saveData(local);
            load();
            $(this).val("添加ToDo");
        }
    })

    // 2. 获取本地存储的数据我们需要把里面的字符串数据转换为对象格式：JSON.parse()
    function getData() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            return JSON.parse(data);
        } else {
            return [];
        }
    }

    // 保存本地存储数据
    function saveData(data) {
        // 1. 本地存储里面只能存储字符串数据格式，要把数组对象转换为字符串格式：JSON.stringify()
        localStorage.setItem("todolist", JSON.stringify(data));
    }

    // 渲染加载页面
    function load() {
        // 读取本地存储的数据
        var data = getData();
        // 每次加载前清空ol里的内容
        $("ol,ul").empty();
        // 统计个数
        var todoCount = 0;
        var doneCount = 0;
        // 遍历这个数据
        $.each(data, function (i, n) {
            if (n.done === false) {
                $("ol").prepend("<li><input type='checkbox' id=" + i + "> <p>" + n.title + "</p> <a href='javascript:;' id=" + i + ">×</a> </li>");
                todoCount++;
            } else {
                $("ul").prepend("<li><input type='checkbox' checked='checked' id=" + i + "> <p>" + n.title + "</p> <a href='javascript:;' id=" + i + ">×</a> </li>");
                doneCount++;
            }
        });
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    }

    // 删除操作
    $("ol,ul").on("click", "a", function () {
        var data = getData();
        // id是自定义属性，用来设置索引号
        var index = $(this).attr("id");
        // 没有办法直接把本地存储中的数据删掉，我们将得到的数据进行修改，然后再将该元素重新存到本地存储中
        // splice(index,n)用于删除数组中元素
        data.splice(index, 1);
        saveData(data);
        load();
    })

    // 正在进行和已完成操作
    $("ul,ol").on("click", "input", function () {
        // 点击之后获取本地存储数据
        var data = getData();
        var index = $(this).attr("id");
        // 修改done属性
        data[index].done = $(this).prop("checked");
        saveData(data);
        load();
    })
})