# jQuery入门1

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。jQuery设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。

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.2.1（2017年3月20日）
jquery-xxx.js 与 jquery-xxx.min.js区别：
1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些。
2. jquery-xxx.min.js：生产版本。部署环境中使用，没有缩进。体积小一些，程序加载更快。

# jQuery和javascript原生

它们的对象是有区别的，在操作方法时不通用，JQuery对象在操作时，更加方便。

原始javascript操作方式如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>js和jQuery</title>
    <script>
        //封装方法，根据id来获取元素对象
        function $(id) {
            var obj = document.getElementById(id);
            return obj;
        }
    </script>
</head>

<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
    <script>
        //1. 根据id获取元素对象
        //var div1 = document.getElementById("div1");
        //var div2 = document.getElementById("div2");
        var div1 = $("div1");
        var div2 = $("div2");
        //2.获取标签体内容
        console.log(div1.innerHTML);
        console.log(div2.innerHTML);
    </script>

</body>

</html>

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

jQuery操作方式如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"></script>
</head>

<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>

    <script>
        //使用JQuery获取元素对象
        var div1 = $("#div1");
        console.log(div1.html());
        var div2 = $("#div2");
        console.log(div2.html());

    </script>

</body>

</html>

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

它们的对象是可以相互转换的：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JQuer对象和js对象的转换</title>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"></script>
</head>

<body>

  <div id="div1">div1....</div>
  <div id="div2">div2....</div>



  <script>
    //1. 通过js方式来获取名称叫div的所有html元素对象
    var divs = document.getElementsByTagName("div");
    //对divs中所有的div 让其标签体内容变为"aaa"

    for (var i = 0; i < divs.length; i++) {
      //divs[i].innerHTML = "aaa";
      //原生js转换为JQuery对象,等同于上面的话：
      $(divs[i]).html("ccc");
    }

    //2. 通过jq方式来获取名称叫div的所有html元素对象
    var $divs = $("div");
    //对divs中所有的div 让其标签体内容变为"bbb"使用jq方式
    $divs.html("bbb");

    //jQuery对象转换为原生javascript：
    $divs[0].innerHTML = "ddd";
    $divs.get(1).innerHTML = "eee";

  </script>

</body>

</html>

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

# jQuery常用操作

jQuery绑定单击事件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //1.获取b1按钮
            $("#clickButton").click(function () {
                console.log("click button!")
            });
        });
    </script>

</head>

<body>
    <input type="button" value="点我" id="clickButton">
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在页面加载完运行，它同window.onload不同的是它可以定义多次:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>页面加载函数</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("clickButtonOrigin").onclick = function () {
                console.log("original click button");
            }
        }
        window.onload = function () {
            console.log("original window.onload!");
        }
        $(function () {
            //1.获取b1按钮
            $("#clickButton").click(function () {
                console.log("click button!")
            });
        });
        $(function () {
            console.log("jQuery window.onload!");
        });
    </script>

</head>

<body>
    <input type="button" value="点我" id="clickButtonOrigin">
    <input type="button" value="点我" id="clickButton">
</body>

</html>

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

修改html元素的样式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>改变css样式</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $("#div1").css("backgroundColor", "pink");
        });
    </script>

</head>

<body>
    <div id="div1">div1....</div>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 选择器

基本选择器
1. 标签选择器（元素选择器）：$("html标签名") 获得所有匹配标签名称的元素：$("#div")
2. id选择器：$("#id的属性值") 获得与指定id属性值匹配的元素：$("#test")
3. 类选择器：$(".class的属性值") 获得与指定的class属性值匹配的元素：$(".mini")
4. 并集选择器：$("选择器1,选择器2....") 获取多个选择器选中的所有元素：$("span,#two")
层级选择器
1. 后代选择器：$("A B ") 选择A元素内部的所有B元素：$("body div")
2. 子选择器：$("A > B") 选择A元素内部的所有直系子元素B：$("body > div")
属性选择器
1. 属性名称选择器：$("A[属性名]") 包含指定属性的选择器：$("div[title]")
2. 属性选择器：$("A[属性名='值']") 包含指定属性等于指定值的选择器：div[title='test']，$("div[title!='test']")，$("div[title^='te']")，$("div[title$='est']")，$("div[title*='es']")
3. 复合属性选择器：$("A[属性名='值'][]...") 包含多个属性条件的选择器：$("div[id][title*='es']")
过滤选择器
1. 首元素选择器：(:first) 获得选择的元素中的第一个元素：$("div:first")
2. 尾元素选择器：(:last) 获得选择的元素中的最后一个元素：$("div:last")
3. 非元素选择器：(:not(selector)) 不包括指定内容的元素：$("div:not(.one)")
4. 偶数选择器：(:even) 偶数，从 0 开始计数：$("div:even")
5. 奇数选择器：(:odd) 奇数，从 0 开始计数：$("div:odd")
6. 等于索引选择器：(:eq(index)) 指定索引元素：$("div:gt(3)")
7. 大于索引选择器：(:gt(index)) 大于指定索引元素：$("div:eq(3)")
8. 小于索引选择器：(:lt(index)) 小于指定索引元素：$("div:lt(3)")
9. 标题选择器：(:header) 获得标题（h1~h6）元素，固定写法：$(":header")
表单过滤选择器
1. 可用元素选择器：(:enabled) 获得可用元素：$("input[type='text']:enabled")
2. 不可用元素选择器：(:disabled) 获得不可用元素：$("input[type='text']:disabled")
3. 选中选择器：(:checked) 获得单选/复选框选中的元素：$("input[type='checkbox']:checked")
4. 选中选择器：(:selected) 获得下拉框选中的元素：$("#job > option:selected")

# DOM操作

内容操作
1. html()：获取/设置元素的标签体内容：<a>内容</a> --> 内容。
2. text()：获取/设置元素的标签体纯文本内容：<a>内容</a> --> 内容。
3. val()：获取/设置元素的value属性值。
属性操作
1. 通用属性操作
  1. attr(): 获取/设置元素的属性
  2. removeAttr():删除属性
  3. prop():获取/设置元素的属性
  4. removeProp():删除属性
  - attr和prop区别？
    1. 如果操作的是元素的固有属性，则建议使用prop，读取自定义属性时无论是否赋值均得到undefined。
    2. 如果操作的是元素自定义的属性，则建议使用attr。
2. 对class属性操作
  1. addClass()：添加class属性值。
  2. removeClass()：删除class属性值。
  3. toggleClass()：切换class属性。toggleClass("one"): 判断如果元素对象上存在class="one"，则将属性值one删除掉；如果元素对象上不存在class="one"，则添加。
  4. css()：设置或返回被选元素的一个或多个样式属性。
CRUD操作
1. append()：父元素将子元素追加到末尾。对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
2. prepend()：父元素将子元素追加到开头。对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
3. appendTo()：对象1.appendTo(对象2)：将对象1添加到对象2内部，并且在末尾
4. prependTo()：对象1.prependTo(对象2)：将对象1添加到对象2内部，并且在开头
5. after()：添加元素到元素后边。对象1.after(对象2)：将对象2添加到对象1后边，对象1和对象2是兄弟关系
6. before()：添加元素到元素前边。对象1.before(对象2)：将对象2添加到对象1前边，对象1和对象2是兄弟关系
7. insertAfter()：对象1.insertAfter(对象2)：将对象1添加到对象2后边，对象1和对象2是兄弟关系
8. insertBefore()：对象1.insertBefore(对象2)：将对象1添加到对象2前边，对象1和对象2是兄弟关系
9. remove()：移除元素。对象.remove():将对象删除掉
10. empty()：清空元素的所有后代元素。对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

# 常见示例

# 隔行换色

使一个表格的奇数行变为黄色，偶数行变为粉红。

# 选择表情

在一个网页中可以选择表情

# 移动多选选项

从左边向右边或从右边向左边移动多选选项。

jQuery入门2-常见操作 →